（注1：如果有問(wèn)題歡迎留言探討，一起學(xué)習(xí)砌们！轉(zhuǎn)載請(qǐng)注明出處，喜歡可以點(diǎn)個(gè)贊哦！）
（注2：更多內(nèi)容請(qǐng)查看我的目錄和敬。）
1. 簡(jiǎn)介
在前面兩節(jié)产园，我們花了大量的篇幅來(lái)介紹如何創(chuàng)建對(duì)象（JS入門(mén)難點(diǎn)解析10-創(chuàng)建對(duì)象）以及構(gòu)造函數(shù)坯约，原型對(duì)象和實(shí)例對(duì)象三者的定義和關(guān)系（JS入門(mén)難點(diǎn)解析11-構(gòu)造函數(shù)盖溺，原型對(duì)象，實(shí)例對(duì)象）铣除。如果你能好好理解體會(huì)這兩篇文章中的內(nèi)容谚咬，那么對(duì)于本章所述的知識(shí)點(diǎn)，你將會(huì)感覺(jué)清晰易懂尚粘。
2. 關(guān)于繼承
在詳細(xì)講述繼承前择卦，我們有必要理解繼承的概念和JS為什么要實(shí)現(xiàn)繼承。
關(guān)于繼承的概念背苦，我們來(lái)看一段引自百度百科(百度百科-繼承性)的解釋?zhuān)?/p>
“繼承”是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念互捌。如果一個(gè)類(lèi)A繼承自另一個(gè)類(lèi)B，就把這個(gè)A稱(chēng)為"B的子類(lèi)"行剂，而把B稱(chēng)為"A的父類(lèi)"。繼承可以使得子類(lèi)具有父類(lèi)的各種屬性和方法钳降，而不需要再次編寫(xiě)相同的代碼厚宰。在令子類(lèi)繼承父類(lèi)的同時(shí)，可以重新定義某些屬性，并重寫(xiě)某些方法铲觉，即覆蓋父類(lèi)的原有屬性和方法澈蝙，使其獲得與父類(lèi)不同的功能。另外撵幽，為子類(lèi)追加新的屬性和方法也是常見(jiàn)的做法灯荧。
通過(guò)繼承可以提高代碼復(fù)用性，方便地實(shí)現(xiàn)擴(kuò)展盐杂，降低軟件維護(hù)的難度逗载。我們知道，JavaScript是一種基于對(duì)象的腳本語(yǔ)言链烈，而在ES6之前JS沒(méi)有類(lèi)的概念厉斟。如何將所有的對(duì)象區(qū)分與聯(lián)系起來(lái)？如何更好地組織JS的代碼呢强衡？
JS借鑒C++和Java使用new命令時(shí)調(diào)用"類(lèi)"的構(gòu)造函數(shù)（constructor）的思路擦秽，做了一個(gè)簡(jiǎn)化的設(shè)計(jì)，在Javascript語(yǔ)言中漩勤，new命令后面跟的不是類(lèi)感挥，而是構(gòu)造函數(shù)。構(gòu)造函數(shù)中的this關(guān)鍵字越败，代表了新創(chuàng)建的實(shí)例對(duì)象触幼。每一個(gè)實(shí)例對(duì)象，都有自己的屬性和方法的副本眉尸。而所有的實(shí)例對(duì)象共享同一個(gè)prototype對(duì)象域蜗，prototype對(duì)象就好像是實(shí)例對(duì)象的原型，而實(shí)例對(duì)象則好像"繼承"了prototype對(duì)象一樣噪猾。
當(dāng)然霉祸，利用構(gòu)造函數(shù)和原型鏈，只是其中一種思路袱蜡。下面我們?cè)敿?xì)介紹實(shí)現(xiàn)JS繼承的兩類(lèi)四種方式和這幾種方式的組合丝蹭，以及他們各自的優(yōu)缺點(diǎn)。
3. 模擬類(lèi)的繼承
正如第2節(jié)所述坪蚁，JS的設(shè)計(jì)者為我們提供了一個(gè)最直接的思路奔穿。通過(guò)構(gòu)造函數(shù)實(shí)例化對(duì)象，并通過(guò)原型鏈將實(shí)例對(duì)象關(guān)聯(lián)起來(lái)敏晤。
3.1 原型鏈繼承
基本思想：使用父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象贱田。
// demo3.1
// 聲明父類(lèi)構(gòu)造函數(shù)
function SuperType() {
this.superValue = 'super';
}
// 為父類(lèi)原型對(duì)象添加方法
SuperType.prototype.getSuperValue = function() {
return this.superValue;
};
// 聲明子類(lèi)構(gòu)造函數(shù)
function SubType() {
this.subValue = 'sub';
}
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象-關(guān)鍵就在這里
SubType.prototype = new SuperType();
// 為子類(lèi)原型對(duì)象添加方法
SubType.prototype.getSubValue = function () {
return this.subValue;
};
// 新建子類(lèi)實(shí)例對(duì)象
var instance = new SubType();
console.log(instance.superValue); // super
console.log(instance.getSuperValue()); // super
console.log(instance.subValue); // sub
console.log(instance.getSubValue()); // sub
其構(gòu)造函數(shù)，實(shí)例對(duì)象和原型對(duì)象關(guān)系如下：
注意：
- 將父類(lèi)實(shí)例對(duì)象賦值給子類(lèi)構(gòu)造函數(shù)的prototype 屬性以后嘴脾，重寫(xiě)了子類(lèi)原型對(duì)象男摧，此時(shí)新的子類(lèi)原型對(duì)象是沒(méi)有屬于自己的constructor屬性的蔬墩，而是繼承了SuperType.protoType的constructor屬性。
// 接代碼demo3.1
console.log(SubType.prototype.constructor === SubType); // false
console.log(SuperType.prototype.constructor === SuperType); // true
console.log(SubType.prototype.constructor === SuperType); // true
- 所有的對(duì)象默認(rèn)都繼承了Object耗拓，這個(gè)繼承是通過(guò)原型鏈實(shí)現(xiàn)的拇颅。
// 接代碼demo3.1
console.log(SuperType.prototype.__proto__ === Object.prototype); // true
- 在對(duì)子類(lèi)原型對(duì)象的屬性和方法進(jìn)行改動(dòng)(增加，刪除乔询，重寫(xiě))時(shí)樟插，需要在將父類(lèi)實(shí)例對(duì)象賦值給子類(lèi)構(gòu)造函數(shù)的prototype 屬性以后。
// demo3.2
function SuperType() {
this.superValue = 'super';
}
SuperType.prototype.getSuperValue = function() {
return this.superValue;
};
function SubType() {
this.subValue = 'sub';
}
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象之前為子類(lèi)原型對(duì)象添加屬性
SubType.prototype.beforeNewSuperType = 'beforeNewSuperType';
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象-關(guān)鍵就在這里
SubType.prototype = new SuperType();
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象之后為子類(lèi)原型對(duì)象添加屬性
SubType.prototype.afterNewSuperType = 'afterNewSuperType';
// 新建子類(lèi)實(shí)例對(duì)象
var instance = new SubType();
// 新建子類(lèi)實(shí)例對(duì)象后之后為子類(lèi)原型對(duì)象添加屬性
SubType.prototype.afterNewSubType = 'afterNewSubType';
console.log(instance.beforeNewSuperType); // undefined
console.log(instance.afterNewSuperType); // afterNewSuperType
console.log(instance.afterNewSubType); // afterNewSubType
- 在對(duì)子類(lèi)原型對(duì)象的屬性和方法進(jìn)行改動(dòng)時(shí)竿刁，不可以用對(duì)象字面量改寫(xiě)子類(lèi)原型對(duì)象黄锤。
// demo3.3
// 聲明父類(lèi)構(gòu)造函數(shù)
function SuperType() {
this.superValue = 'super';
}
// 為父類(lèi)原型對(duì)象添加方法
SuperType.prototype.getSuperValue = function() {
return this.superValue;
};
// 聲明子類(lèi)構(gòu)造函數(shù)
function SubType() {
this.subValue = 'sub';
}
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象-關(guān)鍵就在這里
SubType.prototype = new SuperType();
// 為子類(lèi)原型對(duì)象添加方法
SubType.prototype= {
getSubValue : function () {
return this.subValue;
}
};
// 新建子類(lèi)實(shí)例對(duì)象
var instance = new SubType();
console.log(instance.superValue); // undefined
console.log(instance.getSuperValue); // undefined
console.log(instance.subValue); // sub
console.log(instance.getSubValue()); // sub
優(yōu)點(diǎn)：
當(dāng)原型進(jìn)行屬性和方法的改動(dòng)時(shí)，對(duì)所有繼承實(shí)例能夠即時(shí)生效们妥。(參見(jiàn)demo3.2)
方便判斷對(duì)象類(lèi)型（這一塊以后會(huì)開(kāi)單章詳細(xì)講述其原理）猜扮。
- 方法1：用instanceof操作符來(lái)判斷原型鏈中是否有某構(gòu)造函數(shù)，操作符右邊必然是構(gòu)造函數(shù)监婶，而左邊是在該構(gòu)造函數(shù)所處原型鏈位置之前的實(shí)例或者原型對(duì)象時(shí)會(huì)返回true旅赢。
- 方法2：用isPrototypeOf方法來(lái)判斷原型鏈中是否有某原型對(duì)象，方法調(diào)用者必然是原型對(duì)象惑惶，而參數(shù)是在該原型對(duì)象所處原型鏈位置之前的實(shí)例或者原型對(duì)象時(shí)時(shí)會(huì)返回true煮盼。
// 接demo3.1
// 方法一：用instanceof操作符來(lái)判斷
// 左邊實(shí)例右邊構(gòu)造函數(shù)
console.log(instance instanceof SubType); // true
console.log(instance instanceof SuperType); // true
console.log(instance instanceof Object); // true
// 左邊原型對(duì)象右邊構(gòu)造函數(shù)
console.log(SubType.prototype instanceof SuperType); // true
// 方法二：用isPrototypeOf方法來(lái)判斷
// 調(diào)用者原型對(duì)象參數(shù)是實(shí)例
console.log(SubType.prototype.isPrototypeOf(instance)); // true
console.log(SuperType.prototype.isPrototypeOf(instance)); // true
console.log(Object.prototype.isPrototypeOf(instance)); // true
// 調(diào)用者原型對(duì)象參數(shù)是原型對(duì)象
console.log(SuperType.prototype.isPrototypeOf(SubType.prototype)); // true
缺點(diǎn)：
- 父類(lèi)構(gòu)造函數(shù)的屬性，被子類(lèi)原型擁有之后带污，由子類(lèi)實(shí)例對(duì)象共享僵控。
// demo3.4
// 聲明父類(lèi)構(gòu)造函數(shù)
function SuperType() {
this.value = [1, 2, 3];
}
// 聲明子類(lèi)構(gòu)造函數(shù)
function SubType() {
}
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象-關(guān)鍵就在這里
SubType.prototype = new SuperType();
// 新建子類(lèi)實(shí)例對(duì)象
var instance1 = new SubType();
var instance2 = new SubType();
console.log(instance1.value); // [1, 2, 3]
console.log(instance2.value); // [1, 2, 3]
instance1.value.push(4);
console.log(instance1.value); // [1, 2, 3, 4]
console.log(instance2.value); // [1, 2, 3, 4]
在創(chuàng)建繼承關(guān)系時(shí)，無(wú)法對(duì)父類(lèi)型的構(gòu)造函數(shù)傳參鱼冀。理由同缺點(diǎn)1报破，如果傳參，會(huì)影響到所有的實(shí)例千绪。
無(wú)法實(shí)現(xiàn)多繼承充易。因?yàn)閷⒏割?lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象時(shí)，是一對(duì)一的荸型。
3.2 借用構(gòu)造函數(shù)繼承
基本思想：在子類(lèi)構(gòu)造函數(shù)內(nèi)部調(diào)用父類(lèi)構(gòu)造函數(shù)盹靴。拋開(kāi)父類(lèi)的原型對(duì)象，直接通過(guò)在子類(lèi)構(gòu)造函數(shù)內(nèi)部借用父類(lèi)構(gòu)造函數(shù)來(lái)增強(qiáng)子類(lèi)構(gòu)造函數(shù)瑞妇，此時(shí)子類(lèi)實(shí)例會(huì)擁有子類(lèi)和父類(lèi)定義的實(shí)例屬性與方法稿静。
// demo3.5
// 聲明父類(lèi)構(gòu)造函數(shù)
function SuperType(value) {
this.superValue = value;
this.arr = [1, 2, 3];
}
// 聲明子類(lèi)構(gòu)造函數(shù)
function SubType() {
// 借用父類(lèi)構(gòu)造函數(shù)，繼承父類(lèi)并且可以傳參-關(guān)鍵就在這里
SuperType.call(this, 'super');
this.subValue = 'sub';
}
// 新建子類(lèi)實(shí)例對(duì)象
var instance1 = new SubType();
var instance2 = new SubType();
console.log(instance1.arr); // [1, 2, 3]
console.log(instance2.arr); // [1, 2, 3]
instance1.arr.push(4);
console.log(instance1.arr); // [1, 2, 3, 4]
console.log(instance2.arr); // [1, 2, 3]
優(yōu)點(diǎn)：
由父類(lèi)構(gòu)造函數(shù)定義的實(shí)例屬性被子類(lèi)實(shí)例繼承以后仍然是獨(dú)立的實(shí)例屬性辕狰。（參見(jiàn)demo3.5）
在創(chuàng)建繼承關(guān)系時(shí)改备，可以傳參。理由同優(yōu)點(diǎn)1蔓倍，傳參不會(huì)影響所有實(shí)例绍妨。（參見(jiàn)demo3.5）
可以實(shí)現(xiàn)多繼承润脸。因?yàn)樵谧宇?lèi)構(gòu)造函數(shù)內(nèi)部可以借用多個(gè)父類(lèi)構(gòu)造函數(shù)柬脸。
缺點(diǎn)
父類(lèi)原型定義的公共屬性和方法無(wú)法被繼承他去。
父類(lèi)構(gòu)造函數(shù)發(fā)生改動(dòng)時(shí)，可能會(huì)影響到子類(lèi)構(gòu)造函數(shù)以及實(shí)例的構(gòu)造方法倒堕，而且這種變動(dòng)不會(huì)影響到之前已經(jīng)生成的實(shí)例灾测。
繼承關(guān)系難以判定，只能判斷實(shí)例與子類(lèi)的直接繼承關(guān)系垦巴，實(shí)例與父類(lèi)的繼承關(guān)系無(wú)法判定媳搪。
// 接demo3.5
console.log(instance1 instanceof SubType); // true
console.log(instance1 instanceof SuperType); // false
console.log(SubType.prototype.isPrototypeOf(instance1)); // true
console.log(SuperType.prototype.isPrototypeOf(instance1)); // false
- 方法都定義在構(gòu)造函數(shù)內(nèi)部，無(wú)法實(shí)現(xiàn)方法復(fù)用骤宣。
3.3 組合繼承（原型鏈 + 借用構(gòu)造函數(shù)）—— 最常用的繼承模式
主要思路：利用原型鏈實(shí)現(xiàn)對(duì)父類(lèi)原型屬性的繼承秦爆，借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)父類(lèi)實(shí)例屬性的繼承。
// demo3.6
// 聲明父類(lèi)構(gòu)造函數(shù)
function SuperType(value) {
this.superValue = value;
this.arr = [1, 2, 3];
}
// 為父類(lèi)原型對(duì)象添加方法
SuperType.prototype.getSuperValue = function() {
return this.superValue;
};
// 聲明子類(lèi)構(gòu)造函數(shù)
function SubType() {
// 借用父類(lèi)構(gòu)造函數(shù)憔披，繼承父類(lèi)并且可以傳參-第二次調(diào)用父類(lèi)構(gòu)造函數(shù)
SuperType.call(this, 'super');
this.subValue = 'sub';
}
// 將父類(lèi)實(shí)例對(duì)象作為子類(lèi)原型對(duì)象等限，第一次調(diào)用父類(lèi)構(gòu)造函數(shù)
SubType.prototype = new SuperType();
// 將子類(lèi)原型對(duì)象的constructor屬性指向子類(lèi)本身
SubType.prototype.constructor = SubType;
// 為子類(lèi)原型對(duì)象添加方法
SubType.prototype.getSubValue = function () {
return this.subValue;
};
// 新建子類(lèi)實(shí)例對(duì)象
var instance = new SubType();
console.log(instance.superValue); // super
console.log(instance.getSuperValue()); // super
console.log(instance.subValue); // sub
console.log(instance.getSubValue()); // sub
var instance2 = new SubType();
instance.arr.push(4);
console.log(instance.arr); // [1, 2, 3, 4]
console.log(instance2.arr); // [1, 2, 3]
優(yōu)點(diǎn)：
擁有原型鏈繼承和借用構(gòu)造函數(shù)繼承的所有優(yōu)點(diǎn)，卻沒(méi)有兩者的缺點(diǎn)芬膝。
缺點(diǎn)：
調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)望门，父類(lèi)的實(shí)例屬性被復(fù)制了兩份，一份放在子類(lèi)原型锰霜，一份放在子類(lèi)實(shí)例筹误，而且最后子類(lèi)實(shí)例繼承自父類(lèi)的實(shí)例屬性覆蓋了子類(lèi)原型繼承自父類(lèi)的實(shí)例屬性。
4. 委托繼承
委托繼承癣缅，并不需要使用者去調(diào)用構(gòu)造函數(shù)厨剪。本質(zhì)上其實(shí)是選一個(gè)原始對(duì)象作為其他對(duì)象的原型來(lái)繼承，這樣在其他對(duì)象中找不到的屬性和方法友存，會(huì)委托該原始對(duì)象去尋找祷膳，也就實(shí)現(xiàn)了繼承。
4.1 原型式繼承
主要思路：利用一個(gè)空的構(gòu)造函數(shù)為橋梁爬立，將一個(gè)對(duì)象作為原型創(chuàng)建新對(duì)象钾唬，這樣新生成的對(duì)象都可以通過(guò)原型鏈共享這個(gè)原型對(duì)象的屬性。
可以用如下函數(shù)來(lái)闡釋該思路：
// demo4.1
function object(o) {
function F() {} // 建一個(gè)空的構(gòu)造函數(shù)
F.prototype = o; // 將F的原型對(duì)象指向o
return new F(); // 返回F的實(shí)例侠驯，這樣返回的實(shí)例原型即為傳入的o
}
下面我們來(lái)看一個(gè)具體的例子：
// 接demo4.1
// demo4.2
// person就是原始對(duì)象抡秆，用來(lái)作為其他新對(duì)象的原型對(duì)象
var person = {
name: 'ZhangSan',
hobbies: ['painting', 'running'],
friends: ['LiSi', 'WangWu']
};
var anotherPersonOne = object(person);
anotherPersonOne.name = 'LiSi';
anotherPersonOne.hobbies.push('singing');
anotherPersonOne.friends = ['ZhangSan', 'WangWu'];
var anotherPersonTwo = object(person);
anotherPersonTwo.name = 'WangWu';
anotherPersonTwo.hobbies.push('dancing');
anotherPersonTwo.friends = ['ZhangSan', 'LiSi'];
console.log(person.name); // 'ZhangSan'
console.log(person.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(person.friends); // ['LiSi', 'WangWu']
console.log(anotherPersonOne.name); // 'LiSi'
console.log(anotherPersonOne.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(anotherPersonOne.friends); // ['ZhangSan', 'WangWu']
console.log(anotherPersonTwo.name); // 'WangWu'
console.log(anotherPersonTwo.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(anotherPersonTwo.friends); // ['ZhangSan', 'LiSi']
console.log(anotherPersonOne.__proto__ === person); // true
console.log(anotherPersonTwo.__proto__ === person); // true
注意：
ECMAScript5通過(guò)新增方法Object.create()方法規(guī)范化了原型式繼承。這個(gè)方法接收兩個(gè)參數(shù)：一個(gè)用作新對(duì)象原型的對(duì)象和（可選的）一個(gè)可選的為新對(duì)象定義額外屬性的對(duì)象吟策。其實(shí)就是一種語(yǔ)法糖儒士，幫助我們實(shí)現(xiàn)繼承的同時(shí)，方便地定義了新對(duì)象的屬性檩坚。在只傳入一個(gè)參數(shù)的情況下着撩，Object.create()和我們定義的object()方法效果相同诅福。
// demo4.3
// person就是原始對(duì)象，用來(lái)作為其他新對(duì)象的原型對(duì)象
var person = {
name: 'ZhangSan',
hobbies: ['painting', 'running'],
friends: ['LiSi', 'WangWu']
};
var anotherPersonOne = Object.create(person, {
name: {
value: 'LiSi'
},
friends: {
value: ['ZhangSan', 'WangWu']
}});
anotherPersonOne.hobbies.push('singing');
var anotherPersonTwo = Object.create(person, {
name: {
value: 'WangWu'
},
friends: {
value: ['ZhangSan', 'LiSi']
}});
anotherPersonTwo.hobbies.push('dancing');
console.log(person.name); // 'ZhangSan'
console.log(person.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(person.friends); // ['LiSi', 'WangWu']
console.log(anotherPersonOne.name); // 'ZhangSan'
console.log(anotherPersonOne.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(anotherPersonOne.friends); // ['ZhangSan', 'WangWu']
console.log(anotherPersonTwo.name); // 'ZhangSan'
console.log(anotherPersonTwo.hobbies); // ['painting', 'running', 'singing', 'dancing']
console.log(anotherPersonTwo.friends); // ['ZhangSan', 'LiSi']
console.log(anotherPersonOne.__proto__ === person); // true
console.log(anotherPersonTwo.__proto__ === person); // true
優(yōu)點(diǎn)：
不需要使用者調(diào)用構(gòu)造函數(shù)拖叙，不必額外創(chuàng)建自定義類(lèi)型氓润。
支持傳參。
// 接demo4.1
// demo4.4
var superObj = {
init: function(value){
this.value = value;
},
getValue: function(){
return this.value;
}
}
var subObj = object(superObj);
subObj.init('sub');
console.log(subObj.getValue()); // 'sub'
- 可以用用isPrototypeOf方法來(lái)判斷繼承關(guān)系薯鳍。
console.log(superObj.isPrototypeOf(subObj)); // true
缺點(diǎn)：
由于引用屬性是被共享的咖气，對(duì)引用屬性的改動(dòng)會(huì)影響到其他對(duì)象。（參見(jiàn)demo4.2）
無(wú)法用instanceof操作符來(lái)判斷繼承關(guān)系挖滤，因?yàn)闆](méi)有構(gòu)造函數(shù)崩溪。
4.2 寄生式繼承
主要思路：在原型式繼承的基礎(chǔ)上，對(duì)返回的原型進(jìn)行了增強(qiáng)斩松。
// demo4.5
function object(o) {
function F() {} // 建一個(gè)空的構(gòu)造函數(shù)
F.prototype = o; // 將F的原型對(duì)象指向o
return new F(); // 返回F的實(shí)例伶唯，這樣返回的實(shí)例原型即為傳入的o
}
function createAnother(obj) {
var clone = object(obj); // 通過(guò)調(diào)用函數(shù)來(lái)創(chuàng)建一個(gè)新對(duì)象
clone.favouriteColors = ['red']; // 以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
clone.sayHi = function() {
console.log('hi');
}
return clone; // 返回這個(gè)對(duì)象
}
var person = {
name: 'ZhangSan',
hobbies: ['painting', 'running'],
friends: ['LiSi', 'WangWu']
};
var anotherPersonOne = createAnother(person);
console.log(anotherPersonOne.favouriteColors); // ['red']
anotherPersonOne.sayHi(); // hi
var anotherPersonTwo = createAnother(person);
anotherPersonTwo.favouriteColors.push('white');
console.log(anotherPersonOne.favouriteColors); // ['red']
console.log(anotherPersonTwo.favouriteColors); // ['red', 'white']
注意：
有的人可能想到了，我們前面說(shuō)過(guò)Object.create()在只有一個(gè)參數(shù)時(shí)與object效果相同惧盹。所以上述代碼可以寫(xiě)成：
// demo4.6
function createAnother(obj) {
var clone = Object.create(obj, {
favouriteColors: {
value: ['red']
},
sayHi: {
value: function() {
console.log('hi');
}
}
});
return clone;
}
var person = {
name: 'ZhangSan',
hobbies: ['painting', 'running'],
friends: ['LiSi', 'WangWu']
};
var anotherPersonOne = createAnother(person);
console.log(anotherPersonOne.favouriteColors); // ['red']
anotherPersonOne.sayHi(); // hi
var anotherPersonTwo = createAnother(person);
anotherPersonTwo.favouriteColors.push('white');
console.log(anotherPersonOne.favouriteColors); // ['red']
console.log(anotherPersonTwo.favouriteColors); // ['red', 'white']
不過(guò)哪種寫(xiě)法更優(yōu)乳幸，需要使用者自己抉擇。
優(yōu)點(diǎn)：
為原型添加屬性和方法更加方便岭参。
新增加的屬性和方法是獨(dú)立的反惕。（參見(jiàn)demo4.5和demo4.6）
缺點(diǎn)：
新增加的函數(shù)無(wú)法復(fù)用。
4.3 寄生組合式繼承（組合 + 寄生）—— 最完美的繼承模式
還記得使用最廣泛的組合繼承模式么演侯，唯一的缺點(diǎn)就是需要兩次調(diào)用父類(lèi)構(gòu)造函數(shù)姿染。而寄生模式不需要調(diào)用構(gòu)造函數(shù)，那么想辦法將組合模式其中一次調(diào)用改成使用寄生模式即可秒际。
基本思路：父類(lèi)構(gòu)造函數(shù)定義的實(shí)例屬性通過(guò)借用構(gòu)造函數(shù)來(lái)繼承悬赏，而父類(lèi)原型定義的共享屬性通過(guò)寄生模式來(lái)繼承。
// demo 4.6
// 寄生繼承方法娄徊，將父類(lèi)原型復(fù)制一份給子類(lèi)原型闽颇，并且將constructor變成指向子類(lèi)原型
function inheritPrototype(subType, superType) {
var prototype = superType.prototype;
prototype.constructor = subType;
subType.prototype = prototype;
}
// 父類(lèi)構(gòu)造函數(shù)定義父類(lèi)實(shí)例屬性
function SuperType(name) {
this.name = name;
this.colors = ['blue', 'green']
}
// 父類(lèi)原型中定義公共方法
SuperType.prototype.sayName = function() {
console.log(this.name)
};
// 子類(lèi)構(gòu)造函數(shù)借用父類(lèi)構(gòu)造函數(shù)定義子類(lèi)實(shí)例屬性，同時(shí)也可以直接添加自己定義的實(shí)例屬性
function SubType(name ,age) {
SuperType.call(this, name);
this.age = age;
}
// 將父類(lèi)原型復(fù)制一份寄锐，作為子類(lèi)原型
inheritPrototype(SubType, SuperType);
// 在重定義的子類(lèi)原型中定義公共方法
SubType.prototype.sayAge = function() {
console.log(this.age);
};
var instanceOne = new SubType('張三', 22);
var instanceTwo = new SubType('李四', 26);
instanceOne.sayName(); // 張三
instanceOne.sayAge(); // 22
console.log(instanceOne.colors); // ['blue', 'green']
instanceTwo.colors.push('white');
console.log(instanceTwo.colors);// ['blue', 'green', 'white']
console.log(instanceOne.colors);// ['blue', 'green']
注意：
此時(shí)兵多，是可以用instanceof操作符和isPrototypeOf方法來(lái)判斷繼承關(guān)系的，但是并不是從原型鏈找到父類(lèi)原型來(lái)判斷的橄仆，而是子類(lèi)原型和父類(lèi)原型的引用是同一個(gè)對(duì)象剩膘。
// 接 demo4.6
console.log(instanceOne instanceof SubType); // true
console.log(instanceOne instanceof SuperType); // true
console.log(SubType.prototype.isPrototypeOf(instanceOne)); // true
console.log(SuperType.prototype.isPrototypeOf(instanceOne)); // true
console.log(SubType.prototype === SuperType.prototype); // true
優(yōu)點(diǎn)：
近乎完美，父類(lèi)的實(shí)例屬性不會(huì)出現(xiàn)在子類(lèi)的原型而是獨(dú)立出現(xiàn)在各個(gè)子類(lèi)實(shí)例盆顾，而父類(lèi)的原型屬性被copy到了子類(lèi)中怠褐，子類(lèi)可以共享父類(lèi)和子類(lèi)原型定義的屬性。
缺點(diǎn)：
對(duì)子類(lèi)原型的修改影響了父類(lèi)原型您宪，事實(shí)上現(xiàn)在他們使用的是同一個(gè)引用奈懒。
思考：
當(dāng)然奠涌，為了解決該缺點(diǎn)，我們?cè)趇nheritPrototype()方法中磷杏，可以將superType.prototype拷貝一份給subType.prototype溜畅，而不是指向同一個(gè)引用。但是如此一來(lái)茴丰，又會(huì)引發(fā)另一個(gè)缺點(diǎn)达皿，那就是不能判斷實(shí)例與父類(lèi)型的繼承關(guān)系。如何抉擇贿肩，可以根據(jù)實(shí)際需要來(lái)定。
6. 總結(jié)
其實(shí)理解繼承龄寞，主要是理解構(gòu)造函數(shù)汰规，實(shí)例屬性和原型屬性的關(guān)系。要想實(shí)現(xiàn)繼承物邑，將不同的對(duì)象或者函數(shù)聯(lián)系起來(lái)溜哮，總共就以下幾種思路：
- 原型鏈：父類(lèi)的實(shí)例當(dāng)做子類(lèi)的原型。如此子類(lèi)的原型包含父類(lèi)定義的實(shí)例屬性色解，享有父類(lèi)原型定義的的屬性茂嗓。
- 借用構(gòu)造函數(shù)：子類(lèi)直接使用父類(lèi)的構(gòu)造函數(shù)。如此子類(lèi)的實(shí)例直接包含父類(lèi)定義的實(shí)例屬性科阎。
- 原型式：復(fù)制父類(lèi)原型屬性給子類(lèi)原型述吸。如此，子類(lèi)實(shí)例享有父類(lèi)定義的原型屬性锣笨。
- 寄生式：思路與3一樣蝌矛，只是利用工廠模式對(duì)復(fù)制的父類(lèi)原型對(duì)象進(jìn)行增強(qiáng)。
然后错英，1入撒，2思路結(jié)合，實(shí)例屬性繼承用借用構(gòu)造函數(shù)保證獨(dú)立性椭岩，方法繼承用原型鏈保證復(fù)用性茅逮，就是組合模式。
4判哥，2思路結(jié)合献雅，或者說(shuō)3，4與1姨伟，2思路結(jié)合惩琉，實(shí)例屬性繼承用借用構(gòu)造函數(shù)保證獨(dú)立性，方法繼承用原型復(fù)制增強(qiáng)的方式夺荒，就是寄生組合模式瞒渠。
參考
JS入門(mén)難點(diǎn)解析10-創(chuàng)建對(duì)象
JS入門(mén)難點(diǎn)解析11-構(gòu)造函數(shù)良蒸，原型對(duì)象，實(shí)例對(duì)象
javascript面向?qū)ο笙盗械谌獙?shí)現(xiàn)繼承的3種形式
一張圖理解prototype伍玖、proto和constructor的三角關(guān)系
JS實(shí)現(xiàn)繼承的幾種方式
重新理解JS的6種繼承方式
Javascript繼承機(jī)制的設(shè)計(jì)思想
經(jīng)典面試題：js繼承方式上
經(jīng)典面試題：js繼承方式下
閑說(shuō)繼承
Javascript中的幾種繼承方式比較
JS實(shí)現(xiàn)繼承的幾種方式詳述（推薦）
百度百科-面向?qū)ο蟪绦蛟O(shè)計(jì)
廖雪峰的官方網(wǎng)站-原型繼承
百度百科-javascript
百度百科-繼承性
BOOK-《JavaScript高級(jí)程序設(shè)計(jì)（第3版）》第6章
BOOK-《你不知道的JavaScript》 第2部分
