面向对象的JavaScript

最新推荐文章于 2022-08-09 15:00:06 发布

万里啊WanLi

最新推荐文章于 2022-08-09 15:00:06 发布

阅读量93

点赞数

分类专栏： JavaScript设计模式

本文链接：https://blog.csdn.net/weixin_43101289/article/details/113189238

版权

JavaScript设计模式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

传统面向对象的语言中的类式继承，在JavaScript中是没有提供的，JavaScript是通过原型委托的方式来实现对象与对象之间的继承的，并且JavaScript也没有在语言层面提供对抽象类和接口的支持。JavaScript和传统面向对象语言有许多不一致的地方，所以我们在用设计模式编写代码的过程中，需要将JavaScript与传统面向对象语言加以区别。

1.1 动态类型语言和鸭子类型

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

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

静态类型语言的优点是在代码编译时，就能发现类型不匹配的问题，编辑器可以帮助我们提前避免程序在运行期间有可能发生的一些错误。其次，如果在程序中明确地规定了数据类型，编译器还能针对这些信息对程序进行一些优化工作，提高程序执行速度。

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

动态类型语言的优点是编写的代码数量更少，看起来也更加简洁，程序员可以把精力更多地放在业务逻辑上面。虽然不区分类型在某些情况下会让程序变得难以理解，但整体而言，代码量越少，越专注于逻辑表达，对阅读程序是越有帮助的。

动态类型语言的缺点是无法保证变量的类型，从而在程序的运行期有可能发生跟类型相关的错误。这好像在商店买了一包牛肉辣条，但是要真正吃到嘴里才知道是不是牛肉味。

在JavaScript中，当我们对一个变量赋值时，显然不需要考虑它的类型，因此，JavaScript是一门典型的动态类型语言。

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

这一切都建立在鸭子类型（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); //恭喜加入合唱团
joinChoir(chicken); // 恭喜加入合唱团

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

在动态类型语言的面向对象设计中，鸭子类型的概念至关重要。利用鸭子类型的思想，我们不必借助超类型的帮助，就能轻松地在动态类型语言中实现一个原则：“面向接口编程，而不是面向实现编程”。例如，一个对象若有push和pop方法，并且这些方法提供了正确的实现，它就可以被当作栈来使用。一个对象如果有length属性，也可以依照下标来存取属性（最好还要拥有slice和splice等方法），这个对象就可以被当作数组来使用。

在静态类型语言中，要实现“面向接口编程”并不是一件容易的事情，往往要通过抽象类或者接口等将对象进行向上转型。当对象的真正类型被隐藏在它的超类型身后，这些对象才能在类型检查系统的“监视”之下互相被替换使用。只有当对象能够被互相替换使用，才能体现出对象多态性的价值。

“面向接口编程”是设计模式中最重要的思想，但在JavaScript语言中，“面向接口编程”的过程跟主流的静态类型语言不一样，因此，在JavaScript中实现设计模式的过程与在一些我们熟悉的语言中实现的过程会大相径庭。

1.2 多态

多态从字面上我们可以理解为复数形态。

多态的实际含义是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。

我们来举例说明一下：

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

其实，其中就蕴含了多态的思想。下面我们通过代码进行具体的介绍。

1.2.1一段“多态”的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有可能变成一个巨大的函数。

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

1.2.2 对象的多态性

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

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()); // 汪汪汪

1.2.3 类型检查和多态

类型检查是在表现出对象多态性之前的一个绕不开的话题，但JavaScript是一门不必进行类型检查的动态类型语言，为了真正了解多态的目的，我们需要转一个弯，从一门静态类型语言说起。

我们在1.1节已经说明过静态类型语言在编译时会进行类型匹配检查。以Java为例，由于在代码编译时要进行严格的类型检查，所以不能给变量赋予不同类型的值，这种类型检查有时候会让代码显得僵硬，代码如下：

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

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

public class Duck {
	public void makeSound(){
		System.out.println('嘎嘎嘎');
	}
}

public class Chocken{
	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对象就能被交换使用，这是让对象表现出多态性的必经之路，而多态性的表现正是实现众多设计模式的目标。

1.2.4 使用继承得到多态效果

使用继承来得到多态效果，是让对象表现出多态性的最常用手段。继承通常包括实现继承和接口继承。本节我们讨论实现继承，接口继承的例子请参见第21章。

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

public abstract classs Animal{
	abstract void makeSound(); // 抽象方法
}

public class Chicked extends Animal{
	public void makeSound(){
		System.out.orintln('咯咯咯');
	}
}

public class Duck extends Animal{
	public void makeSound(){
		System.out.pringln('嘎嘎嘎');
	}
}

Animal duck = new Duck(); // (1)
Animal chicken = new Chicken(); // (2)

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

public class AnimalSound{
	public void makeSound(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); // 输出：咯咯咯
	}
}

1.2.5 JavaScript的多态

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

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

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

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

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

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

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

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

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

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

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

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

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

1.2.7 设计模式与多态

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

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

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

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

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

1.3 封装

封装的目的是将信息隐藏。一般而言，我们讨论的封装是封装数据和封装实现。这一节将讨论更广义的封装，不仅包括封装数据和封装实现，还包括封装类型和封装变化。

1.3.1 封装数据

在许多语言的对象系统中，封装数据是由语法解析来实现的，这些语言也许提供了private、public、protected等关键字来提供不同的访问权限。

但JavaScript并没有提供对这些关键字的支持，我们只能依赖变量的作用域来实现封装特性，而且只能模拟出public和private这两种封装性。

除了ECMAScript 6中提供的let之外，一般我们通过函数来创建作用域：

var myObject = (function(){
	var __name = 'sven'; // 私有(private)变量
	return {
		getName: function(){ // 公开(public)方法
			return __name;
		}
	}
})();

console.log(myObject.getName()); // 输出：sven
console.log(myObject.__name); // 输出：undefined

另外值得一提的是，在ECMAScript 6中，还可以通过Symbol创建私有属性。

1.3.2 封装实现

上一节描述的封装，指的是数据层面的封装。有时候我们喜欢把封装等同于封装数据，但这是一种比较狭义的定义。

封装的目的是将信息隐藏，封装应该被视为“任何形式的封装”，也就是说，封装不仅仅是隐藏数据，还包括隐藏实现细节、设计细节以及隐藏对象的类型等。

从封装实现细节来讲，封装使得对象内部的变化对其他对象而言是透明的，也就是不可见的。对象对它自己的行为负责。其他对象或者用户都不关心它的内部实现。封装使得对象之间的耦合变松散，对象之间只通过暴露的API接口来通信。当我们修改一个对象时，可以随意地修改它的内部实现，只要对外的接口没有变化，就不会影响到程序的其他功能。

封装实现细节的例子非常之多。拿迭代器来说明，迭代器的作用是在不暴露一个聚合对象的内部表示的前提下，提供一种方式来顺序访问这个聚合对象。我们编写了一个each函数，它的作用就是遍历一个聚合对象，使用这个each函数的人不用关心它的内部是怎样实现的，只要它提供的功能正确便可以。即使each函数修改了内部源代码，只要对外的接口或者调用方式没有变化，用户就不用关心它内部实现的改变。

1.3.3 封装实现

封装类型是静态类型语言中一种重要的封装方式。一般而言，封装类型是通过抽象类和接口来进行的。把对象的真正类型隐藏在抽象类或者接口之后，相比对象的类型，客户更关心对象的行为。在许多静态语言的设计模式中，想方设法地去隐藏对象的类型，也是促使这些模式诞生的原因之一。比如工厂方法模式、组合模式等。

当然在JavaScript中，并没有对抽象类和接口的支持。JavaScript本身也是一门类型模糊的语言。在封装类型方面，JavaScript没有能力，也没有必要做得更多。对于JavaScript的设计模式实现来说，不区分类型是一种失色，也可以说是一种解脱。在后面章节的学习中，我们可以慢慢了解这一点。