[JS设计模式]：鸭子类型与多态

鸭子类型

编程语言按照数据类型大体可以分为两类，一类是静态类型语言，另一类是动态类型语言。

动态类型语言对变量类型的宽容给实际编码带来了很大的灵活性。由于无需进行类型检测，我们可以尝试调用任何对象的任意方法，而无需去考虑它原本是否被设计为拥有该方法。

这一切都建立在鸭子类型（duck typing）的概念上，鸭子类型的通俗说法是：“如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。”

我们可以通过一个小故事来更深刻地了解鸭子类型：

从前在JavaScript王国里，有一个国王，他觉得世界上最美妙的声音就是鸭子的叫声，于是国王召集大臣，要组建一个1000只鸭子组成的合唱团。大臣们找遍了全国，终于找到999只鸭子，但是始终还差一只，最后大臣发现有一只非常特别的鸡，它的叫声跟鸭子一模一样，于是这只鸡就成为了合唱团的最后一员。

这个故事告诉我们，国王要听的只是鸭子的叫声，这个声音的主人到底是鸡还是鸭并不重要。鸭子类型指导我们只关注对象的行为，而不关注对象本身，也就是关注HAS-A, 而不是IS-A。

代码模拟：

var duck = {
    duckSinging: function() {
        console.log('嘎嘎嘎');
    }
};

var chicken = {
    duckSinging: function() {
        console.log('嘎嘎嘎');
    }
}

var choir = [];  // 合唱团

var joinChoir = function(animal) {
    if(animal && typeof animal.duckSinging === 'function') {
        choir.push(animal);
        console.log('恭喜加入合唱团');
        console.log('合唱团已有成员数量：' + choir.length);
    }
}

joinChoir(duck); // 恭喜加入合唱团      合唱团已有成员数量：1
joinChoir(chicken); // 恭喜加入合唱团   合唱团已有成员数量：2

我们看到，对于加入合唱团的动物，大臣们根本无需检查它们的类型，而是只需要保证它们拥有duckSinging方法。如果下次期望加入合唱团的是一只小狗，而这只小狗刚好也会鸭子叫，我相信这只小狗也能顺利加入。

多态

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

例：主人家里养了两只动物，分别是一只鸭子和一只鸡，当主人向它们发出“叫”的命令时，鸭子会“嘎嘎嘎”叫，而鸡会“咯咯咯”。这两种动物会以自己的方式来发出叫声。它们同样“都是动物”并且可以发出叫声，但根据主人的主指令，它们会发出不同的叫声。

一段多态的JS代码，我们把上面的故事用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方法中添加更的分支判断。修改代码总是危险的，修改的地方越多，程序出错的可能性越大，而且当动物种类越来越多时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()); // 咯咯咯

如果有一天动物世界里增加了一只狗，这时候我们只需要简单的追加一些代码就可以了，而不用去改以前的makeSound函数了，如下代码：

var Dog = function() {}
Dog.prototype.sound = function() {
    console.log('汪汪汪');
}

makeSound(new Dog()); // 汪汪汪

Martin Fowler在《重构：改善既有代码的设计》里写到：

多态的最根本好处在于，你不必再向对象询问“你是什么类型”而后根据得到的答案调用对象的某个行为——你只管调用该行为就是了，其他的一切多态机制都会为你安排妥当。

换句话说，多态最根本的作用就是通过把过程化的条件分支语句转化为对象的多态性，从而消除这些条件分支语句。

Martin Fowler的话可以用下面这个例子很好地诠释：

在电影的拍摄现场，当导演喊出“action”时，主角开始背台词，照明师负责打灯光，后面的群众演员假装中枪倒地，道具师往镜头里撒上雪花。在得到同一个消息时，每个对象都知道自己应该做什么。如果不利用对象的多态性，而是用面向过程的方式来编写这一段代码，那么相当于在电影开始拍摄之后，导演每次都要走到每个人的面前，确认它们的职业分工（类型），然后告诉他们要做什么。如果映射到程序中，那么程序中将充斥着条件分支语句。

利用对象的多态性，导演在发布消息时，就不必考虑各个对象接到消息后应该做什么。对象应该做什么并不是临时决定的，而是已经事先约定和排练完毕的。每个对象应该做什么，已经成为了该对象的一个方法，被安装在对象的内部，每个对象负责它们自己的行为。所以这些对象可以根据同一个消息，有条不紊地分别进行各自的工作。

再看一个现实开发中遇到的例子，这个例子的思想和动物叫声的故事非常相似。

假设我们要编写一个地图应用，现在有两家可选的地图API提供商供我们接入自己的应用。目前我们选择的是谷歌地图，谷歌地图的API中提供了show方法，负责在页面上展示整个地图。示例代码如下：

var googleMap = {
    show: function(){
        console.log( '开始渲染谷歌地图' );
    }
};  

var renderMap = function(){
    googleMap.show();
};  

renderMap();    // 输出：开始渲染谷歌地图  

后来因为某些原因，要把谷歌地图换成百度地图，为了让renderMap函数保持一定的弹性，我们用一些条件分支来让renderMap函数同时支持谷歌地图和百度地图：

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' );     // 输出：开始渲染百度地图  

可以看到，虽然renderMap函数目前保持了一定的弹性，但这种弹性是很脆弱的，一旦需要替换成搜搜地图，那无疑必须得改动renderMap函数，继续往里面堆砌条件分支语句。

我们还是先把程序中相同的部分抽象出来，那就是显示某个地图：

var renderMap = function( map ){
    if ( map.show instanceof Function ){
        map.show();
    }
};  

renderMap( googleMap );    // 输出：开始渲染谷歌地图
renderMap( baiduMap );     // 输出：开始渲染百度地图 

现在来找找这段代码中的多态性。当我们向谷歌地图对象和百度地图对象分别发出“展示地图”的消息时，会分别调用它们的show方法，就会产生各自不同的执行结果。对象的多态性提示我们，“做什么”和“怎么去做”是可以分开的，即使以后增加了搜搜地图，renderMap函数仍然不需要做任何改变，如下所示：

var sosoMap = {
    show: function(){
        console.log( '开始渲染搜搜地图' );
    }
};  

renderMap( sosoMap );     // 输出：开始渲染搜搜地图  

在这个例子中，我们假设每个地图API提供展示地图的方法名都是show，在实际开发中也许不会如此顺利，这时候可以借助适配器模式来解决问题。