基本術(shù)語

本文中，proto === [[Prototype]]

原型鏈

基本思想：

1. 構(gòu)造函數(shù)生成的對象有一個指針（proto）指向構(gòu)造函數(shù)的原型。
2. 如果將構(gòu)造函數(shù)1的原型指向另一個構(gòu)造函數(shù)2的實例，則構(gòu)造函數(shù)1的實例__proto__.proto 指向了構(gòu)造函數(shù)2的原型。原型2和實例1之間構(gòu)成了一條原型。

function Super() {};
function Sub() {};
Super.prototype.sayHi = function () { console.log('hi') };
Sub.prototype = new Super();const supInstance1 = new Sub();
supInstance1.sayHi(); // hi

缺點

1. Sub.prototype.constructor 被改變。
2. Sub.prototype = new Sub()，new的過程可能會有副作用。

盜用構(gòu)造函數(shù)（經(jīng)典繼承）

基本思想

1. 在new一個構(gòu)造函數(shù)1的時候，通過在構(gòu)造函數(shù)1中調(diào)用另一個構(gòu)造函數(shù)2來實現(xiàn)繼承。
2. 通過調(diào)用構(gòu)造函數(shù)2，將構(gòu)造函數(shù)2中的實例屬性復(fù)制到構(gòu)造函數(shù)1的實例中。

function Car(wheels) {this.wheels = wheels;
}function ElectricCar(wheels, type) {Cat.call(this, wheels);this.type = type;
}

缺點

1. 子類的實例不能訪問父類原型上的方法。
2. 必須在構(gòu)造函數(shù)中定義方法，因此函數(shù)（構(gòu)造函數(shù)1）不能重用。

組合繼承（偽經(jīng)典繼承）

基本思想

1. 將子類原型指向父類實例，通過原型鏈來實現(xiàn)子類繼承父類原型上的方法。
2. 通過盜用構(gòu)造函數(shù)來繼承實例的屬性。

function Super(title) {this.title = title;
}
Super.prototype.sayHi = function () {console.log(this.title, " <- Super title");
};function Sub(superTitle, subTitle) {Super.call(this, superTitle);this.subTitlte = subTitle;
}Sub.prototype = new Super();const subInstance = new Sub("superTitle in instance", "subTitle in instance");subInstance.sayHi(); // ****subtitle in instance  <- this title****/* subInstance結(jié)構(gòu)類型
**{"title": "superTitle in instance","subTitlte": "subTitle in instance",[[Prototype]]: Super
}--- 在[[Prototype]]:Super中
--- Super的結(jié)構(gòu)類型{title: undefined,[[Prototype]]: Object,
}**
*/

缺點

1. 在構(gòu)造函數(shù)2的原型中，有無用變量title：undefined
2. 在進(jìn)行原型鏈的鏈接時，會執(zhí)行new Super() 過程，如果構(gòu)造函數(shù)Super是一個有副作用的函數(shù)，會有不可預(yù)知的問題。（兩次調(diào)用Super函數(shù)）
3. 子類的原型的constructor屬性指向丟失。

原型式繼承

基本思想

對象間構(gòu)造原型鏈實現(xiàn)屬性的共享。

實現(xiàn)

es5的Object.create函數(shù)

// 返回一個對象，對象.__proto__ 指向 o
function objectCreate(o) {function F() {};F.prototype = o;return new F();
}

寄生式繼承

基本思想

1. 通過工廠模式創(chuàng)建新對象，構(gòu)造函數(shù)中通過原型式繼承來獲取目標(biāo)對象的能力。

function createSub(originObject) {const newObject = Object.create(originObject);newObject.sayHi = function() { console.log('hi') };return newObject;
}const person = { name: '張三',friends: ['李四', '趙武', '甲一']
};const personA = createSub(person);
personA.sayHi();

優(yōu)缺點

？？？感覺沒有使用的場景

寄生式組合繼承（目前比較完美的解決方案）

基本思想

1. 重寫子構(gòu)造函數(shù)的原型，將構(gòu)造函數(shù)原型的[[prototype]]指向從默認(rèn)Object改為父構(gòu)造函數(shù)的原型。實現(xiàn)原型屬性的繼承。
2. 在子構(gòu)造函數(shù)調(diào)用父構(gòu)造函數(shù)，實現(xiàn)實例屬性的復(fù)用。

function Super(name) {this.name = name;
}
Super.prototype.sayHi = function() { console.log(`hi this is super and name is ${this.name}`)};function Sub(name, age) {Super.call(this, name);this.age = age;
}Sub.prototype = Object.create(Super.prototype, {constructor: {value: Sub,enumerable: false,writable: true,configurable: true,},
});
// 這里同樣可以用es6中的 setPrototypeOf 來設(shè)置原型鏈的鏈接Sub.prototype.sayAge = function () { console.log(`the age of ${this.name} is ${this.age}`); }const subInstance = new Sub('Sub instance', 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**

優(yōu)缺點

1. 功能上沒有缺點
2. 實現(xiàn)起來冗長

es6的繼承

extends關(guān)鍵字

es6的繼承本質(zhì)上是es5繼承的語法糖。

// 可以實現(xiàn)和寄生式組合繼承完全相同的效果
class Super {constructor(name) {this.name = name;}sayHi() {console.log(`hi this is super and name is ${this.name}`)}
}class Sub extends Super {constructor(name,  age) {super(name);this.age = age;}sayAge() {console.log(`the age of ${this.name} is ${this.age}`)}}const subInstance = new Sub('Sub instance', 12);subInstance.sayHi(); // hi this is super and name is Sub instance
subInstance.sayAge(); // **the age of Sub instance is 12**參考數(shù)據(jù)：
- [1] [你不知道的JavaScript]
- [2] [JavaScript高級程序設(shè)計]
- [3] [[mdn](https://developer.mozilla.org/)](https://developer.mozilla.org/)