JavaScript构造函数继承的六种实现方式详解

JavaScript构造函数继承概述

本节将探讨如何生成一个能够继承多个对象的实例。

假设目前存在一个表示“动物”的构造函数。

 
function Animal(){
this.species = "动物";
　　} 

同时，还有一个表示“猫”的构造函数。

 
function Cat(name,color){
this.name = name;
this.color = color;
　　} 

方法一：构造函数绑定

那么，如何让“猫”继承“动物”的特性呢？

最直观的方法是利用call或apply方法，将父对象的构造函数绑定到子对象上。具体操作是在子对象的构造函数内部添加一行代码：

 
function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;
this.color = color;
　　} 
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 输出：动物

方法二：prototype模式

更为常见的做法是使用prototype属性。

若将“猫”的prototype对象指向一个“Animal”的实例，则所有“猫”的实例都能继承“Animal”的属性。

 
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 输出：动物

代码第一行将Cat的prototype对象指向一个Animal的实例。

Cat.prototype = new Animal();

这相当于完全删除了prototype对象原先的值，并赋予其新值。但第二行的作用是什么呢？

Cat.prototype.constructor = Cat;

事实上，任何一个prototype对象都拥有一个constructor属性，该属性指向其对应的构造函数。因此，Cat.prototype这个对象的constructor属性原本是指向Cat的。

在之前的步骤中，我们已经删除了该prototype对象原来的值，导致新的prototype对象失去了constructor属性。因此，我们必须手动添加回去，否则后续的“继承链”将出现错误。这就是第二行代码的含义。

总之，这是一个至关重要的原则，编程时务必遵守。下文的所有示例均遵循此规则，即如果替换了prototype对象，

o.prototype = {};

那么下一步必然是为新的prototype对象加上constructor属性，并将该属性指回原来的构造函数。

o.prototype.constructor = o;

方法三：直接继承prototype

由于Animal对象中不变的属性可以直接写入Animal.prototype，因此Cat()也可以跳过调用Animal()，直接继承Animal.prototype。

现在，我们先对Animal对象进行改写：

 
function Animal(){ }
Animal.prototype.species = "动物";

接着，将Cat的prototype对象指向Animal的prototype对象，从而完成继承。

 
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 输出：动物

与前一种方法相比，这种做法的优点是效率较高（无需执行和建立Animal的实例），且更节省内存。然而，其缺点是Cat.prototype和Animal.prototype现在指向同一个对象，因此对Cat.prototype的任何修改都会反映到Animal.prototype上。

因此，上述代码实际上存在一个问题。请看第二行：

Cat.prototype.constructor = Cat;

这一行实际上也修改了Animal.prototype对象的constructor属性！

alert(Animal.prototype.constructor); // 输出：Cat

方法四：利用空对象作为中介

鉴于“直接继承prototype”存在上述缺点，我们可以利用一个空对象作为中介来解决。

 
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

F是一个空对象，几乎不占用内存。此时，修改Cat的prototype对象就不会影响Animal的prototype对象。

alert(Animal.prototype.constructor); // 输出：Animal

方法五：prototype模式的封装函数

我们将上述方法封装成一个函数，以便更方便地使用。

 
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
　　} 

使用时，方法如下：

 
extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 输出：动物

这个extend函数正是YUI库实现继承所采用的方法。

另外需要说明的是，函数体最后一行：

Child.uber = Parent.prototype;

其含义是为子对象设置一个uber属性，该属性直接指向父对象的prototype属性。这相当于在子对象上打开了一条通道，可以直接调用父对象的方法。这一行代码的放置是为了实现继承的完备性，属于备用性质。

方法六：拷贝继承

上述方法采用了prototype对象来实现继承。我们也可以换一种思路，纯粹采用“拷贝”方法来实现继承。简而言之，如果把父对象的所有属性和方法都拷贝到子对象中，是否也能实现继承呢？

首先，仍将Animal的所有不变属性放置在其prototype对象上。

 
function Animal(){}
Animal.prototype.species = "动物";

然后，编写一个函数来实现属性拷贝的目的。

 
function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
　　　　　　} 
c.uber = p;
　　} 

该函数的作用是将父对象prototype对象中的属性逐一拷贝给Child对象的prototype对象。

使用时，写法如下：

 
extend2(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 输出：动物

未完待续，请继续阅读第三部分《非构造函数的继承》。

（完）