JavaScript继承方式最佳实践—寄生组合继承的详细推理

作者: 阿尔卑斯的隆冬 | 来源:发表于2018-09-06 22:12 被阅读1次

前言

也许学过JavaScript继承方式的朋友都知道，自定义引用类型的最佳继承方式非寄生组合继承方式莫属；然而，JavaScript中最常用的继承方式却不是寄生组合继承而是组合继承；其实，寄生组合继承方式是经组合继承方式改进而来的更有效率的继承方式，不过它比组合继承方式更难理解和掌握，我想这可能也是为什么大家更愿意使用组合继承方式而不是寄生组合继承方式的原因吧。

本文将从原型链开始，争取以尽可能详细和易于理解的方式来逐步推理寄生组合继承方式；不过其中会需要用到一些有关原型和设计模式的基础知识（如正文开头直接使用组合使用构造函数模式和原型模式的方法创建自定义引用类型），有关这方面的介绍大家可以先参考我的另一篇文章：
《JS设计模式深入理解—单例、工厂、构造函数、原型、组合构造原型、动态原型》

正文

JavaScript继承方法的核心是原型链，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们都知道构造函数、原型和实例之间有这样的关系：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而通过构造函数创建的实例都包含一个指向原型对象的内部指针。

那么，如果我们让一个构造函数的原型对象等于另一个类型的实例，结果会怎么样呢？答案就是，此时的原型对象会包含一个指向另一个类型原型的内部指针，相应地，另一个原型对象中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，如此层层递进，就构成了实例与原型的链条。这就是原型链的基本概念。

概念是抽象的，下面请看具体实例：

//使用构造函数定义父类的属性
function SuperType() {
    this.property = true;
}
//使用原型对象定义父类的方法
SuperType.prototype.getSuperValue = function() {
    return this.property;
};

//使用构造函数定义子类的属性
function SubType() {
    this.subproperty = false;
}

//替换子类的默认原型，继承父类的属性和方法
SubType.prototype = new SuperType();

//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;

//使用原型对象定义子类的方法
SubType.prototype.getSubValue = function() {
    return this.subproperty;
};

var instance = new SubType();       //创建子类实例
alert(instance.getSuperValue());    //通过子类调用超类方法，返回true

我们通过上面的代码定义了两个类：SuperType和SubType。其中SuperType是父类（超类），SubType是子类；为了让子类继承父类中的属性和方法，我们使用父类的实例去替换子类的默认原型；替换后，子类的原型就变成了父类的实例，其内部的[[prototype]]指针就可以索引到父类的原型，从而使子类继承了父类的属性和方法。继承完毕后，为了在子类中新增自己的方法，只需在替换后的原型上定义方法即可。

为了检测继承是否有效，我们创建了子类的实例instance，并成功调用了父类的方法。

原型链让类型继承成为可能，但上例仅仅只是为了展示原型链的作用而设计的最简单的使用情况；使用上例中的方法进行继承存在两个主要的问题：

如果通过new SubType()创建多个子类实例，那么所有实例的属性都引用的是子类原型（即父类实例）中的同一个；一旦遇到引用类型的属性（如数组），那么通过其中任何一个子类实例修改该属性，都会造成其它子类实例中该属性的改变。
上例中无论是父类还是子类中的属性，其值都是常量（意味着无需接受外部参数）。而一旦引入参数来设置子类实例的属性，那么上例中是无法通过创建子类实例时设置如new SubType(xxx,xxx,xxx)的方式来初始化从父类继承而来的属性的。

为了更好地说明上面两个问题，我们来看一个更为一般的情况：

//使用构造函数定义父类的属性
function SuperType(name, job) {
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
}

//使用原型对象定义父类的方法
SuperType.prototype.sayName = function() {
    alert(this.name);
};

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    this.age = age;
}

//替换子类的默认原型，继承父类的属性和方法
SubType.prototype = new SuperType();
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

在这个例子中，我们相比上个例子做出了两点改变：

在父类属性中引入了引用类型属性colors；
父类和子类实例都需要通过接收外部参数来初始化各自的属性。

下面先来看问题1，假设有如下代码：

var instance1 = new SubType();    //创建子类实例1
var instance2 = new SubType();    //创建子类实例2

alert(instance1.colors);    //"red,blue,green"
alert(instance2.colors);    //"red,blue,green"

instance1.colors.push("black");

alert(instance1.colors);    //"red,blue,green,black"
alert(instance2.colors);    //"red,blue,green,black"

经过测试我们发现，调用new SubType()创建出的instance1和instance2中的colors属性都来自子类原型SubType.prototype；当通过instance1去修改colors中的内容时，instance2中的colors也随之改变；因此它们并没有做到拥有属于自己的属性。

再来看问题2，如何才能通过

var instance1 = new SubType("Nicholas", "29", "Software Engineer");    //创建子类实例1
var instance2 = new SubType("Greg", "27", "Doctor");                   //创建子类实例2

使得子类实例instance1和instance2完成正确有效的属性初始化（包括从父类继承而来的属性）？

幸运的是，有一个办法可以同时解决这两个问题，那就是在子类的构造函数中添加父类的属性定义：

//使用构造函数定义父类的属性
function SuperType(name, job) {
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
}

//使用原型对象定义父类的方法
SuperType.prototype.sayName = function() {
    alert(this.name);
};

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    //添加父类中的属性定义
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
    //子类的属性
    this.age = age;
}

//替换子类的默认原型，继承父类的属性和方法
SubType.prototype = new SuperType();
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

var instance1 = new SubType("Nicholas", "29", "Software Engineer");    //创建子类实例1
var instance2 = new SubType("Greg", "27", "Doctor");                   //创建子类实例2

instance1.sayName();        //Nicholas
instance1.sayAge();         //29
alert(instance1.job);       //Software Engineer

instance2.sayName();        //Greg
instance2.sayAge();         //27
alert(instance2.job);       //Doctor

alert(instance1.colors);    //red,blue,green
alert(instance2.colors);    //red,blue,green

instance1.colors.push("black");

alert(instance1.colors);    //red,blue,green,black
alert(instance2.colors);    //red,blue,green

通过在子类的构造函数中添加父类属性的定义，既使得子类实例能够完成属性的有效初始化，又保证了每个子类的实例都拥有自己的属性；这样在修改某个实例的属性值后，将不再影响其它实例的对应属性值。同时由于之前子类继承了原型中的父类属性，则在子类构造函数中重新添加这些属性的定义将覆盖（屏蔽）原型中的对应属性。

看到刚才的解决办法，你可能会问：还要自己手动一个个地往子类构造函数里重新添加父类中的属性，你确定这是在继承？如果父类中的属性有成千上万个，那不是要累死我。。。

没错，这就是问题所在。不知道你发现没，往子类构造函数里重新添加父类属性的操作，其实只需要一条语句就可以完成：

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    //添加父类中的属性定义
    SuperType.call(this,name,job);
    //子类的属性
    this.age = age;
}

原来我们之前添加的所有语句，恰恰就是父类构造函数的全部内容，那为何我们不直接将父类的构造函数当成普通的函数调用呢？同时需要明白，函数只不过是在特定环境中执行代码的对象而已，因此只需要通过call()（或者apply()）显式地将SuperType函数的作用域指定为（将来）新创建的对象即可，这样在调用SuperType函数时，实际上是在完成这样的操作（假设新创建的对象为instance）：

function SuperType(name, job) {
    instance.name = name;
    instance.job = job;
    instance.colors = ["red", "blue", "green"];
}

其实，经过修改后的继承方式，就是大名鼎鼎的组合继承，正如文章开头提到的，它是JavaScript中最常用的继承模式。

既然已经介绍过了组合继承，说明离我们的终极目标——寄生组合继承不远了。不过在此之前，先让我们来看看组合继承方式还有那里不足：

//使用构造函数定义父类的属性
function SuperType(name, job) {
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
}

//使用原型对象定义父类的方法
SuperType.prototype.sayName = function() {
    alert(this.name);
};

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    //添加父类中的属性定义
    SuperType.call(this,name,job);                 //第二次调用SuperType()
    //子类的属性
    this.age = age;
}

//替换子类的默认原型，继承父类的属性和方法
SubType.prototype = new SuperType();              //第一次调用SuperType()
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

组合继承最大的问题就是无论在什么情况下，都会调用两次父类的构造函数：一次是在替换子类原型的时候，另一次是在子类构造函数中。

其实经过前面的推理分析，我们都十分清楚，我们在替换子类原型时调用父类构造函数创建其实例的真正目的，不是为了继承父类的属性，因为我们可以在（也必须在）子类的构造函数中做到这一点；而是为了继承父类的方法——父类的方法存在于父类原型中，我们正是通过创建父类实例来索引到父类原型的。

那么从这一点来考虑，我们可不可以省去父类实例的创建，而直接引用父类的原型呢，如下：

//替换子类的默认原型，继承父类的方法
SubType.prototype = SuperType.prototype;

乍一看好像完美地解决了问题，但那是因为没注意到本来后面还有的两条语句：

//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

如果直接将子类原型指针指向父类原型，那么后面的两条语句将直接修改父类的原型！这是万万不可取的。

既然直接引用父类的原型行不通，那看来还是得用创建实例的办法去指向父类原型，但好像只有靠创建父类实例才能自动获得指向父类原型的内部指针，那这么一来不就又绕回来了吗？。。。

其实也不尽然，还有一种方法可以在不通过调用父类构造函数创建实例的情况下创建出自动获得指向父类原型指针的对象。那就是随便定义一个空的构造函数，先替换该构造函数的默认原型为我们需要的父类原型，再通过这个构造函数创建实例（顺序很重要，注意替换在先，创建在后）：

function F() {}
F.prototype = SuperType.prototype;
var o = new F();

此时创建出的实例o，其内部就包含了一个指向父类原型SuperType.prototype的内部指针[[prototype]]，然后再用这个o对象去替换子类的默认原型即可：

//创建一个能索引父类原型的实例
function F() {}
F.prototype = SuperType.prototype;
var o = new F();

//替换子类的默认原型，继承父类的方法
SubType.prototype = o;             
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

为了让代码更加简洁，我们把创建能索引父类原型实例的代码封装成一个函数，并且规定其传入参数为需要索引的原型对象，返回结果为创建出的对象实例，则有：

function object(prototype) {
    function F() {}
    F.prototype = prototype;
    return new F();
}

重写刚才的代码，有：

function object(prototype) {
    function F() {}
    F.prototype = prototype;
    return new F();
}

//替换子类的默认原型，继承父类的方法
SubType.prototype = object(SuperType.prototype);
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

事实上，我们甚至都不必自己定义object()函数，因为ECMAScript5新增了Object.create()方法，该方法与我们的object()函数行为完全一样，不过Object.create()还进行了拓展——这个方法接收两个参数：一个用作新对象的原型对象和（可选的）一个为新对象定义额外属性的对象。

具体到本例中，我们只需要指定原型对象即可：

//替换子类的默认原型，继承父类的方法
SubType.prototype = Object.create(SuperType.prototype);
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

于是，对组合继承方式进行优化过后的最终方案已经形成：

//使用构造函数定义父类的属性
function SuperType(name, job) {
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
}

//使用原型对象定义父类的方法
SuperType.prototype.sayName = function() {
    alert(this.name);
};

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    //添加父类中的属性定义
    SuperType.call(this,name,job); 
    //子类的属性
    this.age = age;
}

//替换子类的默认原型，继承父类的方法
SubType.prototype = Object.create(SuperType.prototype);
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;
//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

不过，为了在代码中形成逻辑上的统一和区分，还可以把

//替换子类的默认原型，继承父类的方法
SubType.prototype = Object.create(SuperType.prototype);
//弥补因替换原型而失去的默认的constructor属性
SubType.prototype.constructor = SubType;

（这两条语句）封装成一个通用的函数inheritPrototype()：

function inheritPrototype(SubType, SuperType) {
    //替换子类的默认原型，继承父类的方法
    SubType.prototype = Object.create(SuperType.prototype);
    //弥补因替换原型而失去的默认的constructor属性
    SubType.prototype.constructor = SubType;
}

从而得到：

//使用构造函数定义父类的属性
function SuperType(name, job) {
    this.name = name;
    this.job = job;
    this.colors = ["red", "blue", "green"];
}

//使用原型对象定义父类的方法
SuperType.prototype.sayName = function() {
    alert(this.name);
};

//使用构造函数定义子类的属性
function SubType(name, age, job) {
    //添加父类中的属性定义
    SuperType.call(this,name,job); 
    //子类的属性
    this.age = age;
}

//子类继承父类的方法
inheritPrototype(SubType, SuperType);

//使用原型对象定义子类的方法
SubType.prototype.sayAge = function() {
    alert(this.age);
};

//继承函数定义
function inheritPrototype(SubType, SuperType) {
    //替换子类的默认原型，继承父类的方法
    SubType.prototype = Object.create(SuperType.prototype);
    //弥补因替换原型而失去的默认的constructor属性
    SubType.prototype.constructor = SubType;
}

这就是最终的寄生组合继承方式，开发人员普遍认为寄生组合继承是引用类型最理想的继承范式。

JavaScript继承方式最佳实践—寄生组合继承的详细推理

前言

正文

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

让前端飞

饥人谷技术博客