噫籲嚱，js之難，難於上青天
本文小綱介紹
請先看下圖，如果各位大佬覺得soeasy，請直接 插隊這裡 檢視class繼承 。
js 的繼承是通過原型鏈實現的，所以想要理解 js 的繼承，必須先吃透原型鏈！
原型和原型鏈
js 中的幾乎所有物件都有一個特殊的[[Prototype]]內建屬性，用來指定物件的原型物件，這個屬性實質上是對其他物件的引用。在瀏覽器中一般都會暴露一個私有屬性 __proto__，其實就是[[Prototype]]的瀏覽器實現。假如有一個物件var obj = {}，那麼可以通過obj.__proto__ 訪問到其原型物件Object.prototype，即obj.__proto__ === Object.prototype。物件有[[Prototype]]指向一個原型物件，原型物件本身也是物件也有自己的[[Prototype]]指向別的原型物件，這樣串接起來，就組成了原型鏈。
var obj = [1, 2, 3]
obj.__proto__ === Array.prototype // true
Number.prototype.__proto__ === Object.prototype // true
Array.prototype.__proto__ === null // true
obj.toString()
複製程式碼可以看出，上例中存在一個從obj到null的原型鏈，如下：
obj----__proto__---->Array.prototype----__proto__---->Object.prototype----__proto__---->null
複製程式碼上例中最後一行呼叫obj.toString()方法的時候，js 引擎就是沿著這條原型鏈查詢toString方法的。js 首先在obj物件自身上查詢toString方法；未找到，繼續沿著原型鏈查詢Array.prototype上有沒有toString；未找到，繼續沿著原型鏈在Object.prototype上查詢。最終在Object.prototype上找到了toString方法，於是淚流滿面的呼叫該方法。這就是原型鏈最基本的作用。
上面我說“js 中的幾乎所有物件都有一個特殊的[[Prototype]]內建屬性”，為什麼不是全部呢？因為 js 可以建立沒有內建屬性[[Prototype]]的物件：
var o = Object.create(null)
o.__proto__ // undefined
複製程式碼Object.create是 es5 的方法，所有瀏覽器都已支援。該方法建立並返回一個新物件，並將新物件的原型物件賦值為第一個引數。在上例中，Object.create(null)建立了一個新物件並將物件的原型物件賦值為null。此時物件 o 是沒有內建屬性[[Prototype]]的（不知道為什麼o.__proto__不是null，希望知道的大佬評論解釋下，萬分感激）。
es5寄生組合繼承
es5 的繼承是通過修改子類的原型物件來實現的：
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = Object.create(SuperType.prototype, {
constructor: {
value: SubType,
enumerable: false,
writable: true,
configurable: true
}
})
SubType.prototype.sayAge = function(){
alert(this.age);
};
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'
複製程式碼- 首先，這段程式碼宣告瞭父類
SuperType - 其次，宣告瞭父類的原型物件方法
sayName。 - 再次，宣告瞭子類
SubType，並在未來將要新建立的SubType例項環境上呼叫父類SuperType.call，以獲取父類中的name和colors屬性。 - 再次，用
Object.create()方法把子類的原型物件上的__proto__屬性指向了父類的原型物件，並把子類建構函式重新賦值為子類。 - 然後，給子類的原型物件上新增方法 sayAge。
- 最後初始化例項物件
instance。(呼叫new SubType('gim', '17')的時候會生成一個__proto__指向SubType.prototype的空物件，然後把this指向這個空物件。在新增完name、colors、age屬性之後，返回這個‘空物件’，也就是說instance最終就是這個‘空物件’。)
此時，程式碼中生成的原型鏈關係如下圖所示（下面三張圖擼了一下午，喜歡的幫忙點個贊謝謝）：
-
子類的原型物件的
__proto__指向父類的原型物件。 圖中有兩種顏色的帶箭頭的線，紅色的線是我們生成的例項的原型鏈，是我們之所以能呼叫到instance.sayName()和instance.sayAge()的根本所在。當呼叫instance.sayName()的時候，js引擎會先查詢instance物件中的自有屬性。未找到sayName屬性，則繼續沿原型鏈查詢，此時instance通過內建原型__proto__鏈到了SubType.prototype物件上。但在SubType.prototype上也未找到sayName屬性，繼續沿原型鏈查詢，此時SubType.prototype的__proto__鏈到了SuperType.prototype物件上。在物件上找到了sayName屬性，於是查詢結束，開始呼叫。因此呼叫instance.sayName()相當於呼叫了instance.__proto__.__proto__.sayName()，只不過前者中sayName函式內this指向instance例項物件，而後者sayName函式內的this指向了SuperType.prototype(instance.__proto__.__proto__ === SuperType.prototype)物件。 -
在 es5 的實現中，子類建構函式的
__proto__直接指向的是Function.prototype。 黑色的帶箭頭的線則是 es5 繼承中產生的‘副作用’，使得所有的函式的__proto__指向了Function.prototype，並最終指向 Object.prototype，從而使得我們宣告的函式可以直接呼叫toString(定義在Function.prototype上)、hasOwnProperty(定義在Object.prototype上) 等方法，如：SubType.toString()、SubType.hasOwnProperty()等。下面看看es6中有哪些不同吧。
es6的繼承
es6 的繼承是由 class ... extends ... 實現的:
class SuperType {
constructor(name) {
this.name = name
this.colors = ["red", "blue", "green"];
}
sayName() {
alert(this.name)
}
}
class SubType extends SuperType {
constructor(name, age){
super(name)
this.age = age
}
sayAge() {
alert(this.age)
}
}
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'
複製程式碼可以明顯的發現這段程式碼比之前的更加簡短和美觀。es6 class 實現繼承的核心在於使用關鍵字 extends 表明繼承自哪個父類，並且在子類建構函式中必須呼叫 super 關鍵字，super(name)相當於es5繼承實現中的 SuperType.call(this, name)。
雖然結果可能如你所料的實現了原型鏈繼承，但是這裡還是有個需要注意的點值得一說。
如圖，es6中的 class 繼承存在兩條繼承鏈：
-
子類的原型物件的
__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。 這點倒和經典繼承是一致的。 如紅線所示，子類SubType的prototype屬性的__proto__指向父類SuperType的prototype屬性。 相當於呼叫Object.setPrototypeOf(SubType.prototype, SuperType.prototype); 因為和經典繼承相同，這裡不再累述。 -
子類建構函式的
__proto__屬性，表示建構函式的繼承，總是指向父類。 這是個值得注意的點，和es5中的繼承不同，如藍線所示，子類SubType的__proto__指向父類SuperType。相當於呼叫了Object.setPrototypeOf(SubType, SuperType); es5繼承中子類和父類的內建原型直接指向的都是Function.prototype，所以說Function是所有函式的爸爸。而在es6class...extends...實現的繼承中，子類的內建原型直接指向的是父類。 之所以注意到這點，是因為看 kyle 大佬的《你不知道的javascript 下》的時候，看到了class MyArray extends Array{}和var arr = MyArray.of(3)這兩行程式碼，很不理解為什麼MyArray上面為什麼能調到of方法。因為按照es5中繼承的經驗，MyArray.__proto__應該指向了Function.prototype，而後者並沒有of方法。當時感覺世界觀都崩塌了，為什麼我以前的認知失效了？第二天重翻阮一峰老師的《ECMAScript6入門》才發現原來class實現的繼承是不同的。
知道了這點，就可以根據需求靈活運用Array類構造自己想要的類了：
class MyArray extends Array {
[Symbol.toPrimitive](hint){
if(hint === 'default' || hint === 'number'){
return this.reduce((prev,curr)=> prev+curr, 0)
}else{
return this.toString()
}
}
}
let arr = MyArray.of(2,3,4);
arr+''; // '9'
複製程式碼元屬性Symbol.toPrimitive定義了MyArray的例項發生強制型別轉換的時候應該執行的方法，hint的值可能是default/number/string中的一種。現在，例項arr能夠在發生加減乘除的強制型別轉換的時候，陣列內的每項會自動執行加性運算。
以上就是js實現繼承的兩種模式，可以發現class繼承和es5寄生組合繼承有相似之處，也有不同的地方。雖然class繼承存在一些問題（如暫不支援靜態屬性等），但是子類的內建原型指向父類這點是個不錯的改變，這樣我們就可以利用原生建構函式（Array等）構建自己想要的類了。
kyle大佬提到的行為委託
在讀《你不知道的javascript 上》的時候，感觸頗多。這本書真的是本良心書籍，讓我學會了LHS/RHS，讀懂了閉包，瞭解了詞法作用域，徹底理解了this指向，基本懂了js的原型鏈繼承。所以當時就忍不住又從頭讀了一遍。如果說諸多感受中最大的感受是啥，那一定是行為委託了。我第一次見過有大佬能夠如此強悍（至少沒見過國內的大佬這麼牛叉的），強悍到直接號召讀者抵制js的繼承模式（無論寄生組合繼承還是class繼承），並且提倡使用行為委託模式實現物件的關聯。我真的被折服了，要知道class可是w3c委員會制定出的標準，並且已經廣泛的應用到了業界中。關鍵的關鍵是，我確實認為行為委託確實更加清晰簡單（如有異議請指教）。
let SuperType = {
initSuper(name) {
this.name = name
this.color = [1,2,3]
},
sayName() {
alert(this.name)
}
}
let SubType = {
initSub(age) {
this.age = age
},
sayAge() {
alert(this.age)
}
}
Object.setPrototypeOf(SubType,SuperType)
SubType.initSub('17')
SubType.initSuper('gim')
SubType.sayAge() // 'gim'
SubType.sayName() // '17'
複製程式碼這就是模仿上面js繼承的兩個例子，利用行為委託實現的物件關聯。行為委託的實現非常超級極其的簡單，就是把父物件關聯到子物件的內建原型上，這樣就可以在子物件上直接呼叫父物件上的方法。行為委託生成的原型鏈沒有class繼承生成的原型鏈的複雜關係，一目瞭然。當然class有其存在的道理，但是在些許場景下，應該是行為委託更加合適吧。希望 safari 儘快實現Object.setPrototypeOf()方法，都 es10 了還未實現 es6 規定的方法，真是夠了。（P.S.終於在9.13號ios實現了 setPrototypeOf 方法，真的是 f 了）
小子愚鈍，如果行為委託完全能夠實現實現class繼承的功能，而且更加簡單和清晰，我們開發的過程中為什麼不愉快的嘗試用一下呢？