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

前言

也许学过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;
}

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349

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

前言

正文

推荐阅读更多精彩内容