瞭解 js 實現繼承的六種方式

JS作爲面向對象的弱類型語言，繼承也是其非常強大的特性之一。

繼承：子類可以使用父類的所有功能，並且對這些功能進行擴展。繼承的過程，就是從一般到特殊的過程。

繼承目的： 把子類型中共同的成員提取到父類型中，代碼重用

JS繼承的實現方式

既然要實現繼承，那麼首先我們得有一個父類，代碼如下：

// 定義一個動物類
function Animal (name) {
  // 屬性
  this.name = name || 'Animal';
  // 實例方法
  this.sleep = function(){
    console.log(this.name + '正在睡覺！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在喫：' + food);
};

1、原型鏈繼承

核心： 將父類的實例作爲子類的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
cat.eat('fish');
cat.sleep();
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

特點：

1. 非常純粹的繼承關係，實例是子類的實例，也是父類的實例
2. 父類新增原型方法/原型屬性，子類都能訪問到
3. 簡單，易於實現

缺點：

1. 要想爲子類新增屬性和方法，必須要在new Animal()這樣的語句之後執行，不能放到構造器中
2. 無法實現多繼承
3. 來自原型對象的所有屬性被所有實例共享
4. 創建子類實例時，無法向父類構造函數傳參

2、構造函數繼承（僞造對象、經典繼承）

核心：使用父類的構造函數來增強子類實例，等於是複製父類的實例屬性給子類

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特點：

1. 解決了1中，子類實例共享父類屬性的問題
2. 創建子類實例時，可以向父類傳遞參數
3. 可以實現多繼承（call多個父類對象）

缺點：

1. 實例並不是父類的實例，只是子類的實例
2. 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法
3. 無法實現函數複用，每個子類都有父類實例函數的副本，影響性能

3、組合繼承

核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類實例作爲子類原型，實現函數複用

function Cat(name){
  // 繼承屬性
  Animal.call(this);
  this.name = name || 'Tom';
}
// 繼承方法
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特點：

1. 彌補了方式2的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法
2. 既是子類的實例，也是父類的實例
3. 不存在引用屬性共享問題
4. 可傳參
5. 函數可複用

缺點：

1. 調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

4.原型式繼承

藉助原型可以基於已有的對象創建新對象，同時還因此不必創建自定義類型。

方法1：

// 實現原型式繼承的方法
function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}


var person = {
	name: 'Tom',
	friends: ["Jerry", "Jerry1"]
}
var person1 = object(person);
person1.name = "Greg";
person1.friends.push("Rob");

var person2 = object(person);
person2.name = "lisa";
person2.friends.push("lily");

console.log(person.friends);   // ["Jerry", "Jerry1", "Rob", "lily"]

 等於在objct函數內先創建一個臨時性的構造函數，然後將傳入的對象作爲這個構造函數的原型，最後返回這個臨時類型的新實例。

從本質上講，object()對傳入的對象執行了一次淺複製。

方法二：Object.create()

這裏通過es5新增的Object.create()方法規範了原型式繼承。這個方法接收兩個參數：一個用作新對象原型的對象和（可選的）一個新對象定義額外屬性的對象。

通過下方的例子可以實現原型式繼承：

var person = {
	name: 'Tom',
	friends: ["Jerry", "Jerry1"]
}
var person1 = Object.create(person);
person1.name = "Greg";
person1.friends.push("Rob");

var person2 = Object.create(person);
person2.name = "lisa";
person2.friends.push("lily");

console.log(person.friends);   // ["Jerry", "Jerry1", "Rob", "lily"]

Object.create()

Object.create()方法的第二個參數與Object.defineProperties()方法的第二個參數格式相同：每個屬性都是根據自己的描述符定義的。以這種方式指定的任何屬性都會覆蓋原型對象上的同名屬性。

var person = {
	name: 'Tom',
	friends: ["Jerry", "Jerry1"]
}
var person1 = Object.create(person, {
    name: {
        value: 'Greg'
    }
})
alert(person1.name);    // 'Greg'

5.寄生式繼承

寄生式繼承與原型式繼承的思路緊密相關，均爲同一人提出。

寄生式繼承和工廠模式類似，即創建一個僅用於封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最後像真地是它做了所有工作一樣返回對象。

// 這個是原型式繼承方法1內的函數
function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}


// 寄生式繼承的實現過程爲下面這個函數
function createAnother(original){
	var clone = object(original);
	clone.sayHi = function(){
		alert('hi');
	}
	return clone;
}

var person = {
	name: 'Tom',
	friends: ["Jerry", "Jerry1"]
}

var anotherPerson = createAnother(person);
anotherPerson.sayHi();

缺點：函數複用率低。

6.寄生組合式繼承

所謂寄生組合繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。
其背後的基本思路是：不必爲了指定子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型的原型的一個副本而已。本質上，就是使用寄生式繼承來繼承超類型的原型，然後再將結果指定給予類型的原型。

子類構造函數複製父類的自身屬性和方法，子類原型只接收父類的原型屬性和方法

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

function inheritPrototype(subType, superType){
	var prototype = object(superType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
}


function SuperType(name){
	this.name = name;
	this.colors = ['red','yellow','blue'];
}
SuperType.prototype.sayName = function(){
	alert(this.name);
}
function SubType(name, age){
	SuperType.call(this,name);
	
	this.age = age;
}
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
	alert(this.age);
}
var child1 = new SubType('xiaoming', 18);
console.log(child1); 

運行結果：

優點：

只調用了一次父類構造函數，避免了在子類的實例上面構建不必要的多餘的屬性。

這個被認爲是最理想的繼承範式。

 

參考：JS實現繼承的幾種方式