面向对象的JavaScript --- 多态


多态

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

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

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

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

一段多态的JavaScript代码

  1. var makeSound = function( animal ){
  2. if ( animal instanceof Duck ){
  3. console.log( '嘎嘎嘎' );
  4. }else if ( animal instanceof Chicken ){
  5. console.log( '咯咯咯' );
  6. }
  7. };
  8. var Duck = function(){};
  9. var Chicken = function(){};
  10. makeSound( new Duck() ); // 嘎嘎嘎
  11. makeSound( new Chicken() ); // 咯咯咯

这段代码确实体现了“多态性”,当我们分别向鸭和鸡发出“叫唤”的消息时,它们根据此消息作出了各自不同的反应。

但这样的“多态性”是无法令人满意的,如果后来又增加了一只动物,比如狗,显然狗的叫声是“汪汪汪”,此时我们必须得改动 makeSound 函数,才能让狗也发出叫声。修改代码总是危险的,修改的地方越多,程序出错的可能性就越大,而且当动物的种类越来越多时, makeSound 有可能变成一个巨大的函数。

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来,也就是将“不变的事物”与“可能改变的事物”分离开来。在这个故事中,动物都会叫,这是不变的,但是不同类型的动物具体怎么叫是可变的。把不变的部分隔离出来,把可变的部分封装起来,这给予了我们扩展程序的能力,程序看起来是可生长的,也是符合开放---封闭原则的,相对于修改代码来说,仅仅增加代码就能完成同样的功能,这显然优雅和安全得多。

对象的多态性

下面是改写后的代码,首先我们把不变的部分隔离出来,那就是所有的动物都会发出叫声:

  1. var makeSound = function( animal ){
  2. animal.sound();
  3. };

然后把可变的部分各自封装起来,我们刚才谈到的多态性实际上指的是对象的多态性:

  1. var Duck = function(){}
  2. Duck.prototype.sound = function(){
  3. console.log( '嘎嘎嘎' );
  4. };
  5. var Chicken = function(){}
  6. Chicken.prototype.sound = function(){
  7. console.log( '咯咯咯' );
  8. };
  9. makeSound( new Duck() ); // 嘎嘎嘎
  10. makeSound( new Chicken() ); // 咯咯咯

如果有一天又增加了一只狗,这时候只要简单地追加一些代码就可以了,而不用改动以前的makeSound 函数,如下所示:

  1. var Dog = function(){}
  2. Dog.prototype.sound = function(){
  3. console.log( '汪汪汪' );
  4. };
  5. makeSound( new Dog() ); // 汪汪汪

类型检查和多态

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

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

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

  1. public class Duck { // 鸭子类
  2. public void makeSound(){
  3. System.out.println( "嘎嘎嘎" );
  4. }
  5. }
  6. public class Chicken { // 鸡类
  7. public void makeSound(){
  8. System.out.println( "咯咯咯" );
  9. }
  10. }
  11. public class AnimalSound {
  12. public void makeSound( Duck duck ){ // (1)
  13. duck.makeSound();
  14. }
  15. }
  16. public class Test {
  17. public static void main( String args[] ){
  18. AnimalSound animalSound = new AnimalSound();
  19. Duck duck = new Duck();
  20. animalSound.makeSound( duck ); // 输出:嘎嘎嘎
  21. }
  22. }

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

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

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

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

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

使用继承得到多态效果

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

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

  1. public abstract class Animal {
  2. abstract void makeSound(); // 抽象方法
  3. }
  4. public class Chicken extends Animal{
  5. public void makeSound(){
  6. System.out.println( "咯咯咯" );
  7. }
  8. }
  9. public class Duck extends Animal{
  10. public void makeSound(){
  11. System.out.println( "嘎嘎嘎" );
  12. }
  13. }
  14. Animal duck = new Duck(); // (1)
  15. Animal chicken = new Chicken(); // (2)
  16. // 现在剩下的就是让 AnimalSound 类的 makeSound 方法接受 Animal 类型的参数
  17. // 而不是具体的Duck 类型或者 Chicken 类型
  18. public class AnimalSound{
  19. public void makeSound( Animal animal ){ // 接受 Animal 类型的参数
  20. animal.makeSound();
  21. }
  22. }
  23. public class Test {
  24. public static void main( String args[] ){
  25. AnimalSound animalSound= new AnimalSound ();
  26. Animal duck = new Duck();
  27. Animal chicken = new Chicken();
  28. animalSound.makeSound( duck ); // 输出嘎嘎嘎
  29. animalSound.makeSound( chicken ); // 输出咯咯咯
  30. }
  31. }

JavaScript的多态

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

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

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

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

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

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

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

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

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

将行为分布在各个对象中,并让这些对象各自负责自己的行为,这正是面向对象设计的优点。

再看一个现实开发中遇到的例子,这个例子的思想和动物叫声的故事非常相似。假设我们要编写一个地图应用,现在有两家可选的地图API提供商供我们接入自己的应用。目前我们选择的是谷歌地图,谷歌地图的 API 中提供了 show 方法,负责在页面上展示整个地图。示例代码如下:

  1. var googleMap = {
  2. show: function(){
  3. console.log( '开始渲染谷歌地图' );
  4. }
  5. };
  6. var renderMap = function(){
  7. googleMap.show();
  8. };
  9. renderMap(); // 输出:开始渲染谷歌地图

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

  1. var googleMap = {
  2. show: function(){
  3. console.log( '开始渲染谷歌地图' );
  4. }
  5. };
  6. var baiduMap = {
  7. show: function(){
  8. console.log( '开始渲染百度地图' );
  9. }
  10. };
  11. var renderMap = function( type ){
  12. if ( type === 'google' ){
  13. googleMap.show();
  14. }else if ( type === 'baidu' ){
  15. baiduMap.show();
  16. }
  17. };
  18. renderMap( 'google' ); // 输出:开始渲染谷歌地图
  19. renderMap( 'baidu' ); // 输出:开始渲染百度地图

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

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

  1. var renderMap = function( map ){
  2. if ( map.show instanceof Function ){
  3. map.show();
  4. }
  5. };
  6. var googleMap = {
  7. show: function(){
  8. console.log( '开始渲染谷歌地图' );
  9. }
  10. };
  11. var baiduMap = {
  12. show: function(){
  13. console.log( '开始渲染百度地图' );
  14. }
  15. };
  16. renderMap( googleMap ); // 输出:开始渲染谷歌地图
  17. renderMap( baiduMap ); // 输出:开始渲染百度地图

现在来找找这段代码中的多态性。当我们向谷歌地图对象和百度地图对象分别发出“展示地图”的消息时,会分别调用它们的 show 方法,就会产生各自不同的执行结果。

对象的多态性提示我们,“做什么”和“怎么去做”是可以分开的,即使以后增加了搜搜地图, renderMap 函数仍然不需要做任何改变,如下所示:

  1. var sosoMap = {
  2. show: function(){
  3. console.log( '开始渲染搜搜地图' );
  4. }
  5. };
  6. renderMap( sosoMap ); // 输出:开始渲染搜搜地图

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

设计模式与多态

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

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

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

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

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

面向对象的JavaScript --- 多态的更多相关文章

  1. 摘抄--全面理解面向对象的 JavaScript

    全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...

  2. 第1章 面向对象的JavaScript

    针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...

  3. 深入全面理解面向对象的 JavaScript

    深入全面理解面向对象的 JavaScript (原著: 曾 滢, 软件工程师, IBM,2013 年 4 月 17 日) JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来 ...

  4. 万字长文深度剖析面向对象的javascript

    目录 简介 什么是对象 构造函数 构造函数的特点 new命令的原理 prototype对象 Object的prototype操作 Object.getPrototypeOf Object.setPro ...

  5. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  6. 前端开发:面向对象与javascript中的面向对象实现(一)

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  7. [.net 面向对象编程基础] (13) 面向对象三大特性——多态

    [.net 面向对象编程基础] (13) 面向对象三大特性——多态 前面两节,我们了解了面向对象的的封装和继承特性,面向对象还有一大特性就是多态.比起前面的封装和继承,多态这个概念不是那么好理解.我们 ...

  8. 面向对象的 JavaScript

    面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...

  9. .NET面向对象特性之多态

    .NET面向对象特性之多态 前言 上一篇总结了面向对象三大特性之一的继承,再接再厉,这一章继续总结多态.同时把继承中涉及到多态的内容进一步补充扩展.可以说“继承”是多态的根基.但继承主要关注的是“共通 ...

随机推荐

  1. python——高级特性(2)

    迭代 在python中迭代是通过for ....in...完成的,只要是可迭代对象都可以迭代 #!usr/bin/python #-*- coding:UTF-8 -*- #tuple迭代 t=[(1 ...

  2. zabbix使用(自定义监控、自动报警)

    自定义监控(制作模板) zabbix自带模板Template OS Linux (Template App Zabbix Agent)提供CPU.内存.磁盘.网卡等常规监控,只要新加主机关联此模板,就 ...

  3. anaconda使用,jupyter notebook的使用方法

    1. 通过anaconda安装不同的python环境 1) conda create -n python36 python=3.5 2)  激活虚拟环境: activate python36  # 进 ...

  4. WPF实现夜间模式

    背景 项目中设计了一个黑色主题,稍加改正也可作为夜间模式,效果图如下: 原理 由于项目中存在地图,而地图完全是由位图组成,不能直接改变背景色,所以我在内容上面放置了一个黑色的Border作为遮罩.可通 ...

  5. 15、IO (转换流、缓冲流)

    转换流概述 * A: 转换流概述 * a: 转换流概述 * OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流中的字符编码成字节 * 将字符串按照指定的 ...

  6. bnu 10783 格斗游戏 线段与圆的关系

    格斗游戏 Time Limit: 1000ms Memory Limit: 65536KB   64-bit integer IO format: %lld      Java class name: ...

  7. C++ STL:lower_bound与upper_bound实现

    lower_bound lower_bound(begin, end, target)用来查找一个已排序的序列中[begin, end)第一个大于等于target的元素index.数组A如下: val ...

  8. HTML标签类型

    标签分类: 一.块标签:块标签是指本身属性为display:block;的元素. 1.默认占一行可以设置宽高, 2.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度 3.在不设置高度的情况下 ...

  9. csharp: Gets a files formatted size.

    /* ASP.NET 默认上传文件是4M ,可以修改服务配置.. <system.web> <!-- 指示 ASP.NET 支持的最大文件上载大小. 该限制可用于防止因用户将大量文件 ...

  10. C# 后台添加Log信息

    我们在做项目的时候,经常会使用到Log日志,今天分享一下如何在后台添加Log信息 创建一个写Log的方法: public void WriteLog(string Action) { try { st ...