面向对象的JavaScript --- 多态

Posted roylh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面向对象的JavaScript --- 多态相关的知识,希望对你有一定的参考价值。

面向对象的javascript --- 多态


多态

“多态”一词源于希腊文 polymorphism,拆开来看是poly(复数)+ morph(形态)+ism,从字面上我们可以理解为复数形态。

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

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

其实,其中就蕴含了多态的思想。

一段多态的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() ); // 汪汪汪

类型检查和多态

类型检查是在表现出对象多态性之前的一个绕不开的话题,但JavaScript是一门不必进行类型检查的动态类型语言,为了真正了解多态的目的,我们需要转一个弯, 从一门静态类型语言说起。静态类型语言在编译时会进行类型匹配检查。以Java为例,由于在代码编译时要进行严格的类型检查,所以不能给变量赋予不同类型的值,这种类型检查有时候会让代码显得僵硬,代码如下:

String str;
str = "abc"; // 没有问题
str = 2; // 报错

现在我们尝试把上面让鸭子和鸡叫的例子换成 Java 代码:

public class Duck { // 鸭子类
    public void makeSound(){
        System.out.println( "嘎嘎嘎" );
    }
}

public class Chicken { // 鸡类
    public void makeSound(){
        System.out.println( "咯咯咯" );
    }
}

public class AnimalSound {
    public void makeSound( Duck duck ){ // (1)
        duck.makeSound();
    }
}

public class Test {
    public static void main( String args[] ){
        AnimalSound animalSound = new AnimalSound();
        Duck duck = new Duck();
        animalSound.makeSound( duck ); // 输出:嘎嘎嘎
    }
}

我们已经顺利地让鸭子可以发出叫声,但如果现在想让鸡也叫唤起来,我们发现这是一件不可能实现的事情。因为(1)处 AnimalSound 类的 makeSound 方法,被我们规定为只能接受 Duck 类型的参数。

public class Test {
    public static void main( String args[] ){
        AnimalSound animalSound = new AnimalSound();
        Chicken chicken = new Chicken();
        animalSound.makeSound( chicken ); // 报错,只能接受 Duck 类型的参数
    }
}

在享受静态语言类型检查带来的安全性的同时,我们亦会感觉被束缚住了手脚。

为了解决这一问题,静态类型的面向对象语言通常被设计为可以向上转型:当给一个类变量赋值时,这个变量的类型既可以使用这个类本身,也可以使用这个类的超类。这就像我们在描述天上的一只麻雀或者一只喜鹊时,通常说“一只麻雀在飞”或者“一只喜鹊在飞”。但如果想忽略它们的具体类型,那么也可以说“一只鸟在飞”。

同理,当 Duck 对象和 Chicken对象的类型都被隐藏在超类型Animal身后,Duck对象和Chicken对象就能被交换使用,这是让对象表现出多态性的必经之路,而多态性的表现正是实现众多设计模式的目标。

使用继承得到多态效果

使用继承来得到多态效果,是让对象表现出多态性的最常用手段。继承通常包括实现继承和接口继承。我们讨论实现继承。

我们先创建一个 Animal 抽象类,再分别让Duck和Chicken都继承自Animal抽象类,下述代码中(1)处和(2)处的赋值语句显然是成立的,因为鸭子和鸡也是动物:

public abstract class Animal {
    abstract void makeSound(); // 抽象方法
}
public class Chicken extends Animal{
    public void makeSound(){
        System.out.println( "咯咯咯" );
    }
}
public class Duck extends Animal{
    public void makeSound(){
        System.out.println( "嘎嘎嘎" );
    }
}
Animal duck = new Duck(); // (1)
Animal chicken = new Chicken(); // (2)

// 现在剩下的就是让 AnimalSound 类的 makeSound 方法接受 Animal 类型的参数
// 而不是具体的Duck 类型或者 Chicken 类型

public class AnimalSound{
    public void makeSound( Animal animal ){ // 接受 Animal 类型的参数
        animal.makeSound();
    }
}
public class Test {
    public static void main( String args[] ){
        AnimalSound animalSound= new AnimalSound ();
        
        Animal duck = new Duck();
        Animal chicken = new Chicken();
        
        animalSound.makeSound( duck ); // 输出嘎嘎嘎
        animalSound.makeSound( chicken ); // 输出咯咯咯
    }
}

JavaScript的多态

从前面我们得知,多态的思想实际上是把“做什么”和“谁去做”分离开来,要实现这一点,归根结底先要消除类型之间的耦合关系。如果类型之间的耦合关系没有被消除,那么我们在makeSound方法中指定了发出叫声的对象是某个类型,它就不可能再被替换为另外一个类型。在 Java 中,可以通过向上转型来实现多态。

而 JavaScript 的变量类型在运行期是可变的。一个JavaScript对象,既可以表示Duck类型的对象,又可以表示 Chicken 类型的对象,这意味着 JavaScript 对象的多态性是与生俱来的。

这种与生俱来的多态性并不难解释。JavaScript作为一门动态类型语言,它在编译时没有类型检查的过程,既没有检查创建的对象类型,又没有检查传递的参数类型。我们既可以往makeSound函数里传递duck对象当作参数,也可以传递 chicken 对象当作参数。

由此可见,某一种动物能否发出叫声,只取决于它有没有makeSound方法,而不取决于它是否是某种类型的对象,这里不存在任何程度上的“类型耦合”。在JavaScript中,并不需要诸如向上转型之类的技术来取得多态的效果。

多态在面向对象程序设计中的作用

有许多人认为,多态是面向对象编程语言中最重要的技术。但我们目前还很难看出这一点,毕竟大部分人都不关心鸡是怎么叫的,也不想知道鸭是怎么叫的。让鸡和鸭在同一个消息之下发出不同的叫声,这跟程序员有什么关系呢?

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();
    }
};

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

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

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

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

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

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

设计模式与多态

GoF 所著的《设计模式》一书的副书名是“可复用面向对象软件的基础”。该书完全是从面向对象设计的角度出发的,通过对封装、继承、多态、组合等技术的反复使用,提炼出一些可重复使用的面向对象设计技巧。而多态在其中又是重中之重,绝大部分设计模式的实现都离不开多态性的思想。

拿命令模式来说,请求被封装在一些命令对象中,这使得命令的调用者和命令的接收者可以完全解耦开来,当调用命令的 execute 方法时,不同的命令会做不同的事情,从而会产生不同的执行结果。而做这些事情的过程是早已被封装在命令对象内部的,作为调用命令的客户,根本不必去关心命令执行的具体过程。

在组合模式中,多态性使得客户可以完全忽略组合对象和叶节点对象之前的区别,这正是组合模式最大的作用所在。对组合对象和叶节点对象发出同一个消息的时候,它们会各自做自己应该做的事情,组合对象把消息继续转发给下面的叶节点对象,叶节点对象则会对这些消息作出真实的反馈。

在策略模式中, Context 并没有执行算法的能力,而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算”的消息时,它们会返回各自不同的计算结果。

在 JavaScript 这种将函数作为一等对象的语言中,函数本身也是对象,函数用来封装行为并且能够被四处传递。当我们对一些函数发出“调用”的消息时,这些函数会返回不同的执行结果,这是“多态性”的一种体现,也是很多设计模式在 JavaScript 中可以用高阶函数来代替实现的原因。


以上是关于面向对象的JavaScript --- 多态的主要内容,如果未能解决你的问题,请参考以下文章

前端 JavaScript 设计模式前奏--面向对象-封装继承多态

浅谈JavaScript的面向对象和它的封装继承多态

JavaScript设计模式基础之面向对象的JavaScript

《JavaScript设计模式与开发》笔记 1.面向对象的JavaScript

Javascript设计模式与开发实践——面向对象的JavaScript(多态封装继承)

JS面向对象基础篇(封装 继承 多态)