ES5 有 6 種方式可以實現繼承，分別爲：
1. 原型鏈繼承
原型鏈繼承的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
function SuperType() {
this.name = 'Yvette';
this.colors = ['pink', 'blue', 'green'];
}
SuperType.prototype.getName = function () {
return this.name;
}
function SubType() {
this.age = 22;
}
SubType.prototype = new SuperType();
SubType.prototype.getAge = function() {
return this.age;
}
SubType.prototype.constructor = SubType;
let instance1 = new SubType();
instance1.colors.push('yellow');
console.log(instance1.getName()); //'Yvette'
console.log(instance1.colors);//[ 'pink', 'blue', 'green', 'yellow' ]
let instance2 = new SubType();
console.log(instance2.colors);//[ 'pink', 'blue', 'green', 'yellow' ]
缺點：
- 通過原型來實現繼承時，原型會變成另一個類型的實例，原先的實例屬性變成了現在的原型屬性，該原型的引用類型屬性會被所有的實例共享。
- 在創建子類型的實例時，沒有辦法在不影響所有對象實例的情況下給超類型的構造函數中傳遞參數。
2. 借用構造函數
借用構造函數的技術，其基本思想爲:
在子類型的構造函數中調用超類型構造函數。
function SuperType(name) {
this.name = name;
this.colors = ['pink', 'blue', 'green'];
}
function SubType(name) {
SuperType.call(this, name);
}
let instance1 = new SubType('Yvette');
instance1.colors.push('yellow');
console.log(instance1.colors);//['pink', 'blue', 'green', yellow]
let instance2 = new SubType('Jack');
console.log(instance2.colors); //['pink', 'blue', 'green']
優點:
- 可以向超類傳遞參數
- 解決了原型中包含引用類型值被所有實例共享的問題
缺點:
- 方法都在構造函數中定義，函數複用無從談起，另外超類型原型中定義的方法對於子類型而言都是不可見的。
3. 組合繼承(原型鏈 + 借用構造函數)
組合繼承指的是將原型鏈和借用構造函數技術組合到一塊，從而發揮二者之長的一種繼承模式。基本思路：
使用原型鏈實現對原型屬性和方法的繼承，通過借用構造函數來實現對實例屬性的繼承，既通過在原型上定義方法來實現了函數複用，又保證了每個實例都有自己的屬性。
function SuperType(name) {
this.name = name;
this.colors = ['pink', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
console.log(this.name);
}
function SuberType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SuberType.prototype = new SuperType();
SuberType.prototype.constructor = SuberType;
SuberType.prototype.sayAge = function () {
console.log(this.age);
}
let instance1 = new SuberType('Yvette', 20);
instance1.colors.push('yellow');
console.log(instance1.colors); //[ 'pink', 'blue', 'green', 'yellow' ]
instance1.sayName(); //Yvette
let instance2 = new SuberType('Jack', 22);
console.log(instance2.colors); //[ 'pink', 'blue', 'green' ]
instance2.sayName();//Jack
缺點:
- 無論什麼情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部。
優點:
- 可以向超類傳遞參數
- 每個實例都有自己的屬性
- 實現了函數複用
4. 原型式繼承
原型繼承的基本思想：
藉助原型可以基於已有的對象創建新對象，同時還不必因此創建自定義類型。
function object(o) {
function F() { }
F.prototype = o;
return new F();
}
在 object() 函數內部，先創建一個臨時性的構造函數，然後將傳入的對象作爲這個構造函數的原型，最後返回了這個臨時類型的一個新實例，從本質上講，object() 對傳入的對象執行了一次淺拷貝。
ECMAScript5通過新增 Object.create()方法規範了原型式繼承。這個方法接收兩個參數：一個用作新對象原型的對象和（可選的）一個爲新對象定義額外屬性的對象(可以覆蓋原型對象上的同名屬性)，在傳入一個參數的情況下，Object.create() 和 object() 方法的行爲相同。
var person = {
name: 'Yvette',
hobbies: ['reading', 'photography']
}
var person1 = Object.create(person);
person1.name = 'Jack';
person1.hobbies.push('coding');
var person2 = Object.create(person);
person2.name = 'Echo';
person2.hobbies.push('running');
console.log(person.hobbies);//[ 'reading', 'photography', 'coding', 'running' ]
console.log(person1.hobbies);//[ 'reading', 'photography', 'coding', 'running' ]
在沒有必要創建構造函數，僅讓一個對象與另一個對象保持相似的情況下，原型式繼承是可以勝任的。
缺點:
- 同原型鏈實現繼承一樣，包含引用類型值的屬性會被所有實例共享。
5. 寄生式繼承
寄生式繼承是與原型式繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工廠模式類似，即創建一個僅用於封裝繼承過程的函數，該函數在內部已某種方式來增強對象，最後再像真地是它做了所有工作一樣返回對象。
function createAnother(original) {
var clone = object(original);//通過調用函數創建一個新對象
clone.sayHi = function () {//以某種方式增強這個對象
console.log('hi');
};
return clone;//返回這個對象
}
var person = {
name: 'Yvette',
hobbies: ['reading', 'photography']
};
var person2 = createAnother(person);
person2.sayHi(); //hi
基於 person 返回了一個新對象 -—— person2，新對象不僅具有 person 的所有屬性和方法，而且還有自己的 sayHi() 方法。在考慮對象而不是自定義類型和構造函數的情況下，寄生式繼承也是一種有用的模式。
缺點：
- 使用寄生式繼承來爲對象添加函數，會由於不能做到函數複用而效率低下。
- 同原型鏈實現繼承一樣，包含引用類型值的屬性會被所有實例共享。
6. 寄生組合式繼承
所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法，基本思路：
不必爲了指定子類型的原型而調用超類型的構造函數，我們需要的僅是超類型原型的一個副本，本質上就是使用寄生式繼承來繼承超類型的原型，然後再將結果指定給子類型的原型。寄生組合式繼承的基本模式如下所示：
function inheritPrototype(subType, superType) {
var prototype = object(superType.prototype); //創建對象
prototype.constructor = subType;//增強對象
subType.prototype = prototype;//指定對象
}
- 第一步：創建超類型原型的一個副本
- 第二步：爲創建的副本添加
constructor屬性 - 第三步：將新創建的對象賦值給子類型的原型
至此，我們就可以通過調用 inheritPrototype 來替換爲子類型原型賦值的語句：
function SuperType(name) {
this.name = name;
this.colors = ['pink', 'blue', 'green'];
}
//...code
function SuberType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SuberType.prototype = new SuperType();
inheritPrototype(SuberType, SuperType);
//...code
優點:
只調用了一次超類構造函數，效率更高。避免在SuberType.prototype上面創建不必要的、多餘的屬性，與其同時，原型鏈還能保持不變。
因此寄生組合繼承是引用類型最理性的繼承範式。