面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

时间：2023-03-09 14:19:53
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

原型模式和基于原型继承的JavaScript对象系统

在 Brendan Eich 为 JavaScript设计面向对象系统时，借鉴了Self和Smalltalk这两门基于原型的语言。之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始Brendan Eich就没打算在 JavaScript 中加入类的概念。

在以类为中心的面向对象编程语言中，类和对象的关系可以想象成铸模和铸件的关系，对象总是从类中创建而来。而在原型编程的思想中，类并不是必需的，对象未必需要从类中创建而来，一个对象是通过克隆另外一个对象所得到的。就像电影《第六日》一样，通过克隆可以创造另外一个一模一样的人，而且本体和克隆体看不出任何区别。

原型模式不单是一种设计模式，也被称为一种编程泛型。

使用克隆的原型模式

从设计模式的角度讲，原型模式是用于创建对象的一种模式，如果我们想要创建一个对象，一种方法是先指定它的类型，然后通过类来创建这个对象。原型模式选择了另外一种方式，我们不再关心对象的具体类型，而是找到一个对象，然后通过克隆来创建一个一模一样的对象。

既然原型模式是通过克隆来创建对象的，那么很自然地会想到，如果需要一个跟某个对象一模一样的对象，就可以使用原型模式。

假设我们在编写一个飞机大战的网页游戏。某种飞机拥有分身技能，当它使用分身技能的时候，要在页面中创建一些跟它一模一样的飞机。如果不使用原型模式，那么在创建分身之前，无疑必须先保存该飞机的当前血量、炮弹等级、防御等级等信息，随后将这些信息设置到新创建的飞机上面，这样才能得到一架一模一样的新飞机。

如果使用原型模式，我们只需要调用负责克隆的方法，便能完成同样的功能。

原型模式的实现关键，是语言本身是否提供了clone方法。ECMAScript5提供了Object.create方法，可以用来克隆对象。代码如下：

var Plane = function(){

    this.blood = 100;

    this.attackLevel = 1;

    this.defenseLevel = 1;

};

var plane = new Plane();

plane.blood = 500;

plane.attackLevel = 10;

plane.defenseLevel = 7;

var clonePlane = Object.create( plane );

console.log( clonePlane ); // 输出： Object {blood: 500, attackLevel: 10, defenseLevel: 7}

在不支持 Object.create 方法的浏览器中，则可以使用以下代码模拟一个Object.create 方法：

Object.create = Object.create || function( obj ){

    var F = function(){};

    F.prototype = obj;

    return new F();

};

克隆是创建对象的手段

通过以上代码，我们看到了如何通过原型模式来克隆出一个一模一样的对象。但原型模式的真正目的并非在于需要得到一个一模一样的对象，而是提供了一种便捷的方式去创建某个类型的对象，克隆只是创建这个对象的过程和手段。

在用 Java 等静态类型语言编写程序的时候，类型之间的解耦非常重要。依赖倒置原则提醒我们创建对象的时候要避免依赖具体类型，而用 new XXX创建对象的方式显得很僵硬。工厂方法模式和抽象工厂模式可以帮助我们解决这个问题，但这两个模式会带来许多跟产品类平行的工厂类层次，也会增加很多额外的代码。

原型模式提供了另外一种创建对象的方式，通过克隆对象，我们就不用再关心对象的具体类型名字。这就像一个仙女要送给三岁小女孩生日礼物，虽然小女孩可能还不知道飞机或者船怎么说，但她可以指着商店橱柜里的飞机模型说“我要这个”。

当然在 JavaScript 这种类型模糊的语言中，创建对象非常容易，也不存在类型耦合的问题。从设计模式的角度来讲，原型模式的意义并不算大。但JavaScript本身是一门基于原型的面向对象语言，它的对象系统就是使用原型模式来搭建的，在这里称之为原型编程范型也许更合适。

体验Io语言

原型模式不仅仅是一种设计模式，也是一种编程范型。JavaScript就是使用原型模式来搭建整个面向对象系统的。在 JavaScript 语言中不存在类的概念，对象也并非从类中创建出来的，所有的JavaScript对象都是从某个对象上克隆而来的。对于习惯了以类为中心语言的人来说，也许一时不容易理解这种基于原型的语言。即使是对于 JavaScript 语言的熟练使用者而言，也可能会有一种“不识庐山真面目，只缘身在此山中”的感觉。事实上，使用原型模式来构造面向对象系统的语言远非仅有 JavaScript 一家。JavaScript基于原型的面向对象系统参考了 Self 语言和 Smalltalk 语言，为了搞清JavaScript中的原型，我们本该寻根溯源去瞧瞧这两门语言。但由于这两门语言距离现在实在太遥远，我们不妨转而了解一下另外一种轻巧又基于原型的语言——Io 语言。

作为一门基于原型的语言， Io 中同样没有类的概念，每一个对象都是基于另外一个对象的克隆。

既然每个对象都是由其他对象克隆而来的，那么我们猜测Io语言本身至少要提供一个根对象，其他对象都发源于这个根对象。这个猜测是正确的，在 Io 中，根对象名为 Object。

Animal := Object clone // 克隆动物对象

Animal makeSound := method( "animal makeSound " print );

Dog := Animal clone

Dog eat = method( "dog eat " print );

现在已经完成了整个动物世界的构建，通过一次次克隆，Io的对象世界里不再只有形单影只的根对Object，而是多了两个新的对象： Animal 对象和 Dog 对象。

其中 Dog 的原型是 Animal，Animal 对象的原型是 Object。我们来测试 Animal 对象和 Dog 对象的功能。

Animal makeSound // 输出： animal makeSound

Dog eat // 输出： dog eat

原型编程范型的一些规则

我们看到了如何在 Io 语言中从无到有地创建一些对象。跟使用“类”的语言不一样的地方是，Io语言中最初只有一个根对象 Object，其他所有的对象都克隆自另外一个对象。如果 A 对象是从 B 对象克隆而来的，那么 B 对象就是 A 对象的原型。

Object 是 Animal 的原型，而Animal是Dog的原型，它们之间形成了一条原型链。这个原型链是很有用处的，当我们尝试调用 Dog 对象的某个方法时，而它本身却没有这个方法，那么 Dog 对象会把这个请求委托给它的原型 Animal 对象，如果 Animal 对象也没有这个属性，那么请求会顺着原型链继续被委托给 Animal 对象的原型 Object 对象。这样一来便能得到继承的效果，看起来就像 Animal 是 Dog 的“父类”， Object 是 Animal 的“父类”。

这个机制并不复杂，却非常强大， Io 和 JavaScript 一样，基于原型链的委托机制就是原型继承的本质。

在 Io 的解释器中执行 Dog makeSound 时， Dog 对象并没有 makeSound 方法，于是把请求委托给了它的原型 Animal 对象 ，而 Animal 对象是有 makeSound 方法的，所以该条语句可以顺利得到输出:

Dog makeSound // 输出 animal makeSound

现在我们明白了原型编程中的一个重要特性，即当对象无法响应某个请求时，会把该请求委托给它自己的原型。

综上所述：原型编程范型至少包括以下基本规则：

  • 所有的数据都是对象
  • 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它
  • 对象会记住他的原型
  • 如果对象无法响应某个请求，它会把这个请求委托给它自己的原型

JavaScript中的原型继承

在原型继承方面， JavaScript的实现原理和Io语言非常相似，JavaScript也遵守这些原型编程的基本规则。

  • 所有的数据都是对象
  • 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它
  • 对象会记住他的原型
  • 如果对象无法响应某个请求，它会把这个请求委托给它构造器的原型

所有的数据都是对象

JavaScript 在设计的时候，模仿 Java 引入了两套类型机制：基本类型和对象类型。基本类型包undefined、 number、 boolean、 string、 function、 object。从现在看来，这并不是一个好的想法。按照 JavaScript 设计者的本意，除了undefined之外，一切都应是对象。为了实现这一目标，number、boolean、string 这几种基本类型数据也可以通过“包装类”的方式变成对象类型数据来处理。

我们不能说在 JavaScript 中所有的数据都是对象，但可以说绝大部分数据都是对象。那么相信在 JavaScript 中也一定会有一个根对象存在，这些对象追根溯源都来源于这个根对象。

JavaScript 中的根对象是 Object.prototype 对象。 Object.prototype 对象是一个空的对象。我们在JavaScript 遇到的每个对象，实际上都是从 Object.prototype 对象克隆而来的，Object.prototype 对象就是它们的原型。

var obj1 = new Object();

var obj2 = {};

// 可以利用 ECMAScript 5 提供的 Object.getPrototypeOf 来查看这两个对象的原型：

console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 输出： true

console.log( Object.getPrototypeOf( obj2 ) === Object.prototype ); // 输出： true

要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它

在 Io 语言中，克隆一个对象的动作非常明显，我们可以在代码中清晰地看到 clone 的过程。比如以下代码：

Dog := Animal clone

但在 JavaScript 语言里，我们并不需要关心克隆的细节，因为这是引擎内部负责实现的。我们所需要做的只是显式地调用 var obj1 = new Object()或者varobj2={}。此时，引擎内部会从Object.prototype上面克隆一个对象出来，我们最终得到的就是这个对象。

function Person( name ){

    this.name = name;

};

Person.prototype.getName = function(){

    return this.name;

};

var a = new Person( 'sven' );

console.log( a.name ); // 输出： sven

console.log( a.getName() ); // 输出： sven

console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出： true

疑问：在 JavaScript 中没有类的概念，这句话我们已经重复过很多次了。但刚才不是明明调用了 new Person()吗？

在这里 Person 并不是类，而是函数构造器，JavaScript的函数既可以作为普通函数被调用，也可以作为构造器被调用。当使用 new 运算符来调用函数时，此时的函数就是一个构造器。

用new运算符来创建对象的过程，实际上也只是先克隆Object.prototype对象，再进行一些其他额外操作的过程。

在 Chrome 和 Firefox 等向外暴露了对象__ proto __属性的浏览器下，我们可以通过下面这段代码来理解 new 运算的过程：

function Person( name ){

    this.name = name;

};

Person.prototype.getName = function(){

    return this.name;

};

var objectFactory = function(){

    var obj = new Object(), // 从 Object.prototype 上克隆一个空的对象

    Constructor = [].shift.call( arguments ); // 取得外部传入的构造器，此例是 Person

    obj.__proto__ = Constructor.prototype; // 指向正确的原型

    var ret = Constructor.apply( obj, arguments ); // 借用外部传入的构造器给 obj 设置属性

    return typeof ret === 'object' ? ret : obj; // 确保构造器总是会返回一个对象

};

var a = objectFactory( Person, 'sven' );

console.log( a.name ); // 输出： sven

console.log( a.getName() ); // 输出： sven

console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出： true

我们看到，分别调用下面两句代码产生了一样的结果：

var a = objectFactory( A, 'sven' );

var a = new A( 'sven' );

对象会记住它的原型

如果请求可以在一个链条中依次往后传递，那么每个节点都必须知道它的下一个节点。同理，要完成Io语言或者 JavaScript 语言中的原型链查找机制，每个对象至少应该先记住它自己的原型。

目前我们一直在讨论“对象的原型”，就JavaScript的真正实现来说，其实并不能说对象有原型，而只能说对象的构造器有原型。对于“对象把请求委托给它自己的原型”这句话，更好的说法是对象把请求委托给它的构造器的原型。

那么对象如何把请求顺利地转交给它的构造器的原型呢？

JavaScript 给对象提供了一个名为__ proto __ 的隐藏属性，某个对象的__ proto __ 属性默认会指向它的构造器的原型对象，即{Constructor}.prototype。

在一些浏览器中， __ proto__ 被公开出来，我们可以在 Chrome 或者 Firefox 上用这段代码来验证：

var a = new Object();

console.log ( a.__proto__=== Object.prototype ); // 输出： true

var B = function(){};

var b = new B();

console.log ( b.__proto__=== B.prototype ); // 输出： true

实际上， __ proto__ 就是对象跟“对象构造器的原型”联系起来的纽带。正因为对象要通过__ proto __ 属性来记住它的构造器的原型，所以我们用 objectFactory 函数来模拟用new创建对象时，需要手动给 obj 对象设置正确的__ proto __指向。

obj.__proto__ = Constructor.prototype;

通过这句代码，我们让 obj.__ proto __ 指向 Person.prototype，而不是原来的 Object.prototype。

如果对象无法响应某个请求，它会把这个请求委托给它的构造器的原型

这条规则即是原型继承的精髓所在。从对Io语言的学习中，我们已经了解到，当一个对象无法响应某个请求的时候，它会顺着原型链把请求传递下去，直到遇到一个可以处理该请求的对象为止。

JavaScript 的克隆跟 Io 语言还有点不一样， Io 中每个对象都可以作为原型被克隆，当 Animal对象克隆自 Object 对象， Dog 对象又克隆自 Animal 对象时，便形成了一条天然的原型链。

而在 JavaScript 中，每个对象都是从Object.prototype对象克隆而来的，如果是这样的话，我们只能得到单一的继承关系，即每个对象都继承自 Object.prototype 对象，这样的对象系统显然是非常受限的。

实际上,虽然JavaScript 的对象最初都是由Object.prototype对象克隆而来的，但对象构造器的原型并不仅限于 Object.prototype 上，而是可以动态指向其他对象。这样一来，当对象a需要借用对象b的能力时，可以有选择性地把对象 a 的构造器的原型指向对象b，从而达到继承的效果。下面的代码是我们最常用的原型继承方式：

var obj = { name: 'sven' };

var A = function(){};

A.prototype = obj;

var a = new A();

console.log( a.name ); // 输出： sven

我们来看看执行这段代码的时候，引擎做了哪些事情:

  1. 尝试遍历对象 a 中的所有属性，但没有找到 name 这个属性。
  2. 查找 name 属性的这个请求被委托给对象a的构造器的原型，它被a.__ proto __记录着并且指向A.prototype，而 A.prototype 被设置为对象 obj。
  3. 在对象 obj 中找到了 name 属性，并返回它的值.

当我们期望得到一个“类”继承自另外一个“类”的效果时，往往会用下面的代码来模拟实现：

var A = function(){};

A.prototype = { name: 'sven' };

var B = function(){};

B.prototype = new A();

var b = new B();

console.log( b.name ); // 输出： sven

再看这段代码执行的时候，引擎做了什么事情。

  1. 首先，尝试遍历对象 b 中的所有属性，但没有找到 name 这个属性。
  2. 查找 name 属性的请求被委托给对象 b 的构造器的原型，它被b.__ proto __记录着并且指向B.prototype，而 B.prototype 被设置为一个通过 new A()创建出来的对象。
  3. 在该对象中依然没有找到 name 属性，于是请求被继续委托给这个对象构造器的原型A.prototype。
  4. 在 A.prototype 中找到了 name 属性，并返回它的值。

和把 B.prototype 直接指向一个字面量对象相比，通过 B.prototype = new A()形成的原型链比之前多了一层。但二者之间没有本质上的区别，都是将对象构造器的原型指向另外一个对象，继承总是发生在对象和对象之间。

最后还要留意一点，原型链并不是无限长的。现在我们尝试访问对象a的address属性。而对象b和它构造器的原型上都没有 address 属性，那么这个请求会被最终传递到哪里呢？

实际上，当请求达到 A.prototype，并且在 A.prototype 中也没有找到 address 属性的时候，请求会被传递给 A.prototype 的构造器原型 Object.prototype，显然Object.prototype中也没有address属性，但Object.prototype 的原型是 null，说明这时候原型链的后面已经没有别的节点了。所以该次请求就到此打住，a.address返回 undefined。

a.address // 输出： undefined

原型继承的未来

设计模式在很多时候其实都体现了语言的不足之处。PeterNorvig曾说，设计模式是对语言不足的补充，如果要使用设计模式，不如去找一门更好的语言。这句话非常正确。不过，作为Web前端开发者，相信JavaScript在未来很长一段时间内都是唯一的选择。虽然我们没有办法换一门语言，但语言本身也在发展，说不定哪天某个模式在 JavaScript 中就已经是天然的存在，不再需要拐弯抹角来实现。

比如 Object.create 就是原型模式的天然实现。使用Object.create来完成原型继承看起来更能体现原型模式的精髓。目前大多数主流浏览器都提供了 Object.create 方法。

但美中不足是在当前的 JavaScript引擎下，通过Object.create来创建对象的效率并不高，通常比通过构造函数创建对象要慢。此外还有一些值得注意的地方，比如通过设置构造器的prototype来实现原型继承的时候，除了根对象 Object.prototype 本身之外，任何对象都会有一个原型。而通过Object.create(null)可以创建出没有原型的对象。

另外， ECMAScript 6 带来了新的Class语法。这让JavaScript看起来像是一门基于类的语言，但其背后仍是通过原型机制来创建对象。通过 Class 创建对象的一段简单示例代码如下所示 ：

class Animal {

    constructor(name){

        this.name = name;

    }

    getName(){

        return this.name;

    }

}

class Dog extends Animal {

    constructor(name){

        super(name);

    }

    speak(){

        return "wolf";

    }

}

var dog = new Dog("Scamp");

console.log(dog.getName() + 'say' + dog.speak());

相关文章