面向对象的JavaScript

我们在进入设计模式的学习之前，需要先了解一些相关的周边知识，

例如一些面向对象的基础知识、this 等重要概念，还要掌握一些函数式编程的技巧。这些都是学习设计模式的必要铺垫。

动态类型语言和鸭子类型

静态类型和动态类型语言

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

静态类型语言在编译时便已确定变量的类型，而动态类型语言的变量类型要到程序运行的时候，待变量被赋予某个值之后，才会具有某种类型。

静态类型语言的优缺点

• 优点

  • 在编译时就能发现类型不匹配的错误，编译器可以帮助我们提前避免程序在运行期间又肯呢个发生的一些错误。
  • 如果在程序中明确地规定了数据类型，编译器还可以针对这些信息对程序进行一些优化工作，提高程序执行速度

  编译器如何根据类型优化程序？

  编译器可以针对明确的数据类型进行优化工作，提高程序执行速度的原因主要有以下几点：

  1. 内存分配优化：明确的数据类型可以帮助编译器更好地理解程序的内存使用情况，从而可以更有效地进行内存分配和管理，减少内存碎片和提高内存访问效率。

  2. 指令优化：编译器可以根据数据类型的信息来选择更合适的指令序列，例如针对特定数据类型的优化指令集，从而提高程序的执行效率。

  3. 编译器优化：明确的数据类型可以帮助编译器进行更精确的类型推导和优化，例如消除不必要的类型转换和临时变量，减少运行时开销。

  4. 算法优化：根据数据类型的信息，编译器可以选择更适合特定数据类型的算法和数据结构，从而提高程序的执行速度。

  总之，明确的数据类型可以为编译器提供更多的信息和优化的可能性，从而提高程序的执行速度。

• 缺点

  • 迫使程序员依照强契约来编写程序，为每个变量规定数据类型，归根结底只是辅助我们编写可靠性高程序的一种手段，而不是编写程序的目的，毕竟大部分人编写程序的目的是为了完成需求交付生产
  • 类型的声明也会增加更多的代码，在程序编写过程中，这些细节会让程序员的精力从思考业务逻辑上分散开来。

动态类型语言的优缺点

• 优点
  • 编写的代码数量更少，看起来也更加简洁，程序员可以把精力更多地放在业务逻辑上面。虽然不区分类型在某些情况下会让程序变得难以理解，但整体而言，代码量越少，越专注于逻辑表达，对阅读程序是越有帮助的。
• 缺点
  • 无法保证变量的类型，从而在程序的运行期有可能发生跟类型相关的错误

什么是鸭子类型？

鸭子类型是一种动态类型的编程风格，它是指在运行时检查对象的方法和属性，而不是在编译时进行类型检查。这意味着只要一个对象具有特定的方法和属性，就可以被视为另一个类型的对象。这种类型的编程风格通常用于动态语言中，如Python和JavaScript。鸭子类型的名称来源于“走起来像鸭子、叫起来像鸭子，那么它就是鸭子”的说法，即只要对象表现得像某种类型，就可以被认为是该类型。

鸭子类型是动态类型语言面向对象设计的核心。它让我们不用超类型，就能实现“面向接口编程，而不是面向实现编程”的原则。只要对象有合适的方法和属性，就可以被当作不同的类型来使用。

例如，有 push 和 pop 方法的对象可以当作栈，有 length 属性和下标存取的对象可以当作数组。 静态类型语言要实现“面向接口编程”比较困难，需要用抽象类或接口等进行向上转型。只有隐藏了对象的真实类型，才能通过类型检查系统，实现对象的多态性。 “面向接口编程”是设计模式的重要思想，但在 JavaScript 中，它的实现方式与一些静态类型语言不同，因此，JavaScript 的设计模式也有自己的特点。

多态

什么是多态？

多态的字面意思就是多种状态，同一操作作用于不同的对象上，可以产生不同的解释和不同的执行结果。比方说，我养了一只鸭和一只鸡，我对它们发出同一个指令 "叫一下"，鸭会嘎嘎嘎，而鸡会咯咯咯，所以让它们叫一下就是同一操作，而叫声不同则是不同的执行结果。

多态的意义

多态的意义是一个很深刻的问题，不同的编程语言和编程范式可能有不同的理解和表达。但是，一般来说，多态的意义可以从以下几个方面来看：

• 多态可以让程序员针对抽象而不是具体实现来编程，这样的代码会有更好的可扩展性和复用性。例如，如果我们定义了一个 Animal 类型的接口，它有一个 run 方法，那么我们可以用这个接口来操作不同的 Animal 子类的对象，如 Dog，Cat，Horse 等，而不需要关心它们的具体实现细节。这样，当我们需要添加新的 Animal 子类时，只需要实现 run 方法，就可以无缝地与原有的代码兼容，而不需要修改原有的代码
• 多态可以让程序在运行时动态地根据对象的实际类型来执行相应的方法，这样的代码会有更好的灵活性和多样性。例如，如果我们定义了一个 speak 函数，它接受一个 Animal 类型的参数，然后调用它的 run 方法，那么当我们传入不同的 Animal 子类的对象时，它会执行不同的 run 方法，从而产生不同的效果。这样，我们可以利用多态来实现一些通用的功能，如排序，比较，打印等，而不需要为每一种类型都写一个专门的函数
• 多态可以让程序具有更好的抽象性和封装性，这样的代码会有更好的可读性和可维护性。例如，如果我们定义了一个 CarFactory 类，它有一个 factory 方法，它根据传入的参数返回不同的 Car 子类的对象，如 JD，Benz 等，那么我们可以用这个 CarFactory 类来隐藏 Car 子类的创建细节，只需要关心 Car 类型的接口，而不需要知道 Car 子类的具体实现。这样，我们可以降低程序的耦合度，提高程序的模块化程度

一段“多态”的 JavaScript 代码

 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 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 时，它们就可以互换使用，这是实现多态性和设计模式的关键。

使用继承得到多态效果

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

我们先创建一个 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 在《重构：改善既有代码的设计》里写到：

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

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

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，在实际开发中也许不会如此顺利，这时候可以借助适配器模式来解决问题。

设计模式与多态

学习设计模式我们可以写出好的面向对象的代码，它给了我们一些常见的问题的解决方案，这些方案都是用了一些面向对象的技巧，比如把数据和操作包起来，让子类继承父类，让不同的对象可以用同样的方法，让对象可以组合成新的对象等等。其中，让不同的对象可以用同样的方法，就是多态，这是很重要的一个技巧，很多设计模式都用到了多态。例如：

• 在命令模式中，我们把请求封装成一些对象，这些对象都有一个 execute 方法，但是每个对象做的事情不一样，所以执行的结果也不一样。我们不用管这些对象具体怎么做的，只要调用它们的 execute 方法就行了。
• 在组合模式中，我们把一些对象组合成一个新的对象，这些对象都有一个 say 方法，但是每个对象说的话不一样，所以说出来的话也不一样。我们不用管这些对象是不是组合的，只要调用它们的 say 方法就行了。
• 在策略模式中，我们把一些算法封装成一些对象，这些对象都有一个 calculate 方法，但是每个对象算的方式不一样，所以算出来的结果也不一样。我们不用管这些对象具体怎么算的，只要调用它们的 calculate 方法就行了。

在 JavaScript 这种把函数当成对象的语言中，函数也可以用同样的方法，但是做的事情不一样，所以执行的结果也不一样。这也是多态的一种表现，也是很多设计模式可以用函数来实现的原因。

封装