JavaScript设计模式与开发实践随笔(二)
多态
多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈
var makeSound = function( animal ){
if ( animal instanceof Duck ){
console.log( '嘎嘎嘎' );
}else if ( animal instanceof Chicken ){
console.log( '咯咯咯' );
}
};
var Duck = function(){};
var Chicken = function(){};
makeSound( new Duck() ); // 嘎嘎嘎
makeSound( new Chicken() ); // 咯咯咯
以上代码的缺点就是每添加一种动物都必须改动makesound函数,修改代码的风险比较大,而多态的思想是将不变的事物和可能改变的事物分离开来。
var makeSound = function( animal ){
animal.sound();
};
然后把可变的部分各自封装起来,我们刚才谈到的多态性实际上指的是对象的多态性:
var Duck = function(){}
Duck.prototype.sound = function(){
console.log( '嘎嘎嘎' );
};
var Chicken = function(){}
Chicken.prototype.sound = function(){
console.log( '咯咯咯' );
};
makeSound( new Duck() ); // 嘎嘎嘎
makeSound( new Chicken() ); // 咯咯咯
以后再添加动物的时候就直接在后边追加构造函数和添加原型就可以了
多态最根本的作用就是通过把过程化的条件分支语句转化为对象的多态性,从而
消除这些条件分支语句
var googleMap = {
show: function(){
console.log( '开始渲染谷歌地图' );
}
};
var baiduMap = {
show: function(){
console.log( '开始渲染百度地图' );
}
};
var renderMap = function( type ){
if ( type === 'google' ){
googleMap.show();
}else if ( type === 'baidu' ){
baiduMap.show();
}
};
renderMap( 'google' ); // 输出:开始渲染谷歌地图
renderMap( 'baidu' ); // 输出:开始渲染百度地图
修改后
var renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};
renderMap( googleMap ); // 输出:开始渲染谷歌地图
renderMap( baiduMap ); // 输出:开始渲染百度地图
JavaScript设计模式与开发实践随笔(二)的更多相关文章
- JavaScript设计模式与开发实践随笔(三)
封装 1. 封装数据 a) 只能依赖变量的作用域来实现封装特性,es6中可以通过symbol创建私有属性 var myObject = (function(){ var __name = ' ...
- JavaScript设计模式与开发实践随笔(一)
编程语言按照数据类型大体可以分为两类,一类是静态类型语言,另一类是动态类型语言. 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时 候,待变量被赋予某个值之后,才会具有 ...
- JavaScript设计模式与开发实践(二)——apply&&call
call和apply的用途 改变this指向 先看个例子: var obj1 = { name: 'sven' }; var obj2 = { name: 'anne' }; window.name ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- JavaScript设计模式与开发实践 - 策略模式
引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- 《javascript设计模式与开发实践》--- (单一职责原则)
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
随机推荐
- [冬令营day1T3]Tree
题目描述 Description 给一棵N个节点的无根树,求路径长度=K的简单路径数 输入描述 Input Description 第一行两个正整数N,K 接下来N-1行,每行两个正整数x,y,表示 ...
- [PHP] Laravel使用redis保存SESSION
Laravel使用redis保存SESSION 首先确认服务器已经安装redis服务,php安装了redis扩展. 1.打开config/database.php.在redis配置项中增加sessio ...
- P1553 数字反转(升级版)
Emma,关于这道题,我..不想说啥子,也就做了它一个下午左右吧(原由:本人太菜) 补充一个知识点goto语句: 这个东西特别的好用,可以直接无条件调到冒号后面的语句,进行操作. 举个例子: #inc ...
- 洛谷 P2615 神奇的幻方
传送门 I'm here! 思路 这个题,我们可以直接去模拟,因为范围很小,且\(N\)都是奇数 直接构造一个矩阵,初始值都为\(0\),然后\(while\)循环,根据题目给出的\(4\)个条件进行 ...
- python总结八
1.range的使用讲解: 首先呢如果只是一个参数的话,那么就是循环遍历这个参数递增,例如 range(5)>>[1,2,3,4] 如果是两个参数的话,且注意后面的第二个参数要比第一个大, ...
- linux复制文件夹、重命名文件夹、删除文件夹
linux中复制命令为cp(即copy缩写),重命名使用mv命令(即move缩写)来实现,删除命令为rm(即remove缩写). 如果操作对象是单个文件,复制和删除以及重命名很简单,如下: cp a. ...
- javascript系列--认识并理解构造函数,原型和原型链
一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...
- 【Gamma】“北航社团帮”展示博客
目录 团队介绍 项目愿景 整个项目的预期典型用户 功能展示 原预期用户数量 项目使用情况数据分析 用户量变化 学生认证人数 社长认证人数 入社申请数 活动发布 新闻发布 网页端使用情况 小程序打开次数 ...
- [Gamma]阶段发布说明
小小易校园微信小程序发布说明 第二版小小易校园小程序发布啦~ 打开微信,点击右上角➕,选择扫一扫,扫描以下二维码即可进入小程序: 版本功能: 上一版功能请参见[Beta阶段]发布说明. 当前版本的更新 ...
- jquery设置bootstrap-select的默认选中值
<select id="mSelect"></select> $("#mSelect").val(["1",&quo ...