多态

多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈

 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设计模式与开发实践随笔(二)的更多相关文章

  1. JavaScript设计模式与开发实践随笔(三)

    封装 1. 封装数据 a)      只能依赖变量的作用域来实现封装特性,es6中可以通过symbol创建私有属性 var myObject = (function(){ var __name = ' ...

  2. JavaScript设计模式与开发实践随笔(一)

    编程语言按照数据类型大体可以分为两类,一类是静态类型语言,另一类是动态类型语言. 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时 候,待变量被赋予某个值之后,才会具有 ...

  3. JavaScript设计模式与开发实践(二)——apply&&call

    call和apply的用途 改变this指向 先看个例子: var obj1 = { name: 'sven' }; var obj2 = { name: 'anne' }; window.name ...

  4. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  5. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  6. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  7. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  8. 《javascript设计模式与开发实践》--- (单一职责原则)

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  9. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

随机推荐

  1. 移动端事件(touchstart、touchmove、touchend)--移动端开发整理笔记(三)

    移动端事件 三个事件 touchstart 手指触摸 相当于PC端 mousedown touchend 手指抬起 相当于PC端 mouseup touchmove 手指滑动 相当于PC端 mousm ...

  2. Windbg的快捷键

    窗口切换 可以使用以下键盘快捷方式窗口之间进行切换. 项 效果 CTRL+TAB 调试信息窗口之间切换. 通过重复使用此密钥,你可以扫描通过的所有窗口,而不考虑是否浮动. 停靠本身,或选项卡式停靠窗口 ...

  3. [题解向] Luogu4092 [HEOI2016/TJOI2016]树

    #\(\mathcal{\color{red}{Description}}\) \(Link\) 给定一棵以\(1\)为根的树,有两种操作: \(C: \ \ x\)给点\(x\)打上花标记. \(Q ...

  4. centos 6.9 安装docker

    1.查看系统具体版本 yum install lsb -y lsb_release -a 2.安装yum源 yum -y install http://dl.fedoraproject.org/pub ...

  5. [C++进阶] 数据结构与算法

    1 出栈&入栈问题 一个栈的入栈序列为ABCDE,则不可能的出栈序列为?(不定项选择题) A:ECDBA  B:DCEAB   C:DECBA   D:ABCDE   E:EDCBA 正确答案 ...

  6. mysql 基本操作二

    1.查询数据 MariaDB [jason]> offset ; 默认是从偏移量为0 处开始查村数据,通过指定offset 可以从offset 处开始取数 2.where 语句 MariaDB ...

  7. BST平衡二叉树的后继结点(最近的大)

    public class InorderSuccessorInBST {//平衡二叉树查找后继结点 public TreeNode inorderSuccessor(TreeNode root, Tr ...

  8. Image动画

    前几课讲的静态Image挺有趣的,但是如果能有动画的效果,那就更有趣了,mPython做出动画效果也不难.用images的列表,list. 下面就是一个列表: eggs bacon tomatoes ...

  9. [转帖]美团在Redis上踩过的一些坑-4.redis内存使用优化

    美团在Redis上踩过的一些坑-4.redis内存使用优化 博客分类: 运维 redis redisstringhash优化segment-hash  转载请注明出处哈:http://carlosfu ...

  10. 《C++ 习题与解析》笔记

    目录 ####Chapter-1 C++语言概述(错题) ####Chapter-2 类和对象 ####Chapter-3 引用 ####Chapter-4 友元函数 #### Chapter-5 运 ...