理解JS的7種繼承方式

寫在前面

一直不喜歡JS的OOP，在學習階段好像也用不到，總覺得JS的OOP不倫不類的，可能是因爲先接觸了Java，所以對JS的OO部分有些牴觸。

偏見歸偏見，既然面試官問到了JS的OOP，那麼說明這東西肯定是有用的，應該拋開偏見，認真地瞭解一下

約定

P.S.下面將展開一個有點長的故事，所以有必要提前約定共同語言：

/*
 * 約定
 */
function Fun(){
    // 私有屬性
    var val = 1;        // 私有基本屬性
    var arr = [1];      // 私有引用屬性
    function fun(){}    // 私有函數（引用屬性）
 
    // 實例屬性
    this.val = 1;               // 實例基本屬性
    this.arr = [1];             // 實例引用屬性
    this.fun = function(){};    // 實例函數（引用屬性）
}
 
// 原型屬性
Fun.prototype.val = 1;              // 原型基本屬性
Fun.prototype.arr = [1];            // 原型引用屬性
Fun.prototype.fun = function(){};   // 原型函數（引用屬性）

上面的約定應該是比較合理的，如果難以理解，可以查看黯羽輕揚：JS學習筆記2_面向對象，瞭解更多的基本常識

一.簡單原型鏈

這是實現繼承最簡單的方式了，真的超簡單，核心就一句話（在代碼中用註釋標明瞭）

1.具體實現

function Super(){
    this.val = 1;
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2

2.核心

拿父類實例來充當子類原型對象

3.優缺點

優點：

簡單，易於實現

缺點：

修改sub1.arr後sub2.arr也變了，因爲來自原型對象的引用屬性是所有實例共享的。
可以這樣理解：執行sub1.arr.push(2);先對sub1進行屬性查找，找遍了實例屬性（在本例中沒有實例屬性），沒找到，就開始順着原型鏈向上找，拿到了sub1的原型對象，一搜身，發現有arr屬性。於是給arr末尾插入了2，所以sub2.arr也變了
創建子類實例時，無法向父類構造函數傳參

二.借用構造函數

簡單原型鏈真夠簡單，可是存在2個致命缺點簡直不能用，於是上個世紀末的jsers就想辦法fix這2個缺陷，然後出現了借用構造函數方式

1.具體實現

function Super(val){
    this.val = val;
    this.arr = [1];
 
    this.fun = function(){
        // ...
    }
}
function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}
 
var sub1 = new Sub(1);
var sub2 = new Sub(2);
sub1.arr.push(2);
alert(sub1.val);    // 1
alert(sub2.val);    // 2
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1
 
alert(sub1.fun === sub2.fun);   // false

2.核心

借父類的構造函數來增強子類實例，等於是把父類的實例屬性複製了一份給子類實例裝上了（完全沒有用到原型）

3.優缺點

優點：

解決了子類實例共享父類引用屬性的問題
創建子類實例時，可以向父類構造函數傳參

P.S.前輩就這麼高效，兩個缺陷瞬間修復

缺點：

無法實現函數複用，每個子類實例都持有一個新的fun函數，太多了就會影響性能，內存爆炸。。

P.S.好吧，剛修復了共享引用屬性的問題，又出現了這個新問題。。

三.組合繼承（最常用）

目前我們的借用構造函數方式還是有問題（無法實現函數複用），沒關係，接着修復，jsers吭哧吭哧又搞出了組合繼承

1.具體實現

function Super(){
    // 只在此處聲明基本屬性和引用屬性
    this.val = 1;
    this.arr = [1];
}
//  在此處聲明函數
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub(1);
var sub2 = new Sub(2);
alert(sub1.fun === sub2.fun);   // true

2.核心

把實例函數都放在原型對象上，以實現函數複用。同時還要保留借用構造函數方式的優點，通過Super.call(this);繼承父類的基本屬性和引用屬性並保留能傳參的優點；通過Sub.prototype = new Super();繼承父類函數，實現函數複用

3.優缺點

優點：

不存在引用屬性共享問題
可傳參
函數可複用

缺點:

（一點小瑕疵）子類原型上有一份多餘的父類實例屬性，因爲父類構造函數被調用了兩次，生成了兩份，而子類實例上的那一份屏蔽了子類原型上的。。。又是內存浪費，比剛纔情況好點，不過確實是瑕疵

P.S.如果無法理解這個”多餘“，可以查看黯羽輕揚：JS學習筆記2_面向對象，文章末尾有更詳細的解釋

四.寄生組合繼承（最佳方式）

從名字就能看出又是對組合繼承的優化，不是說組合繼承有瑕疵嗎，沒關係，我們接着追求完美

1.具體實現

function beget(obj){   // 生孩子函數 beget：龍beget龍，鳳beget鳳。
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super(){
    // 只在此處聲明基本屬性和引用屬性
    this.val = 1;
    this.arr = [1];
}
//  在此處聲明函數
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
var proto = beget(Super.prototype); // 核心
proto.constructor = Sub;            // 核心
Sub.prototype = proto;              // 核心
 
var sub = new Sub();
alert(sub.val);
alert(sub.arr);

P.S.等等，生孩子函數是啥東西，怎麼沒聽過？還有標明瞭核心的3句話，怎麼沒看明白？彆着急，我們喝杯茶接着看

2.核心

用beget(Super.prototype);切掉了原型對象上多餘的那份父類實例屬性

P.S.啥？沒看明白？哦哦~，忘記說原型式和寄生式繼承了，就說怎麼總覺得忘了鎖門。。這記性

P.S.寄生組合式繼承，這名字不是很貼切，和寄生式繼承關係並不是特別大

3.優缺點

優點：完美了

缺點：理論上沒有了（如果用起來麻煩不算缺點的話。。）

P.S.用起來麻煩是一方面，另一方面是因爲寄生組合式繼承出現的比較晚，是21世紀初的東西，大家等不起這麼久，所以組合繼承是最常用的，而這個理論上完美的方案卻只是課本上的最佳方式了

五.原型式

其實介紹完上面的完美方案就可以結束了，但從組合繼承到完美方案好像有一段不小的思維跳躍，有必要把故事說清楚

1.具體實現

function beget(obj){   // 生孩子函數 beget：龍beget龍，鳳beget鳳。
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super(){
    this.val = 1;
    this.arr = [1];
}
 
// 拿到父類對象
var sup = new Super();
// 生孩子
var sub = beget(sup);   // 核心
// 增強
sub.attr1 = 1;
sub.attr2 = 2;
//sub.attr3...
 
alert(sub.val);     // 1
alert(sub.arr);     // 1
alert(sub.attr1);   // 1

P.S.誒~看到了沒，生孩子函數beget出現了

2.核心

用生孩子函數得到得到一個“純潔”的新對象（“純潔”是因爲沒有實例屬性），再逐步增強之（填充實例屬性）

P.S.ES5提供了Object.create()函數，內部就是原型式繼承，IE9+支持

3.優缺點

優點：

從已有對象衍生新對象，不需要創建自定義類型（更像是對象複製，而不是繼承。。）

缺點：

原型引用屬性會被所有實例共享，因爲是用整個父類對象來充當了子類原型對象，所以這個缺陷無可避免
無法實現代碼複用（新對象是現取的，屬性是現添的，都沒用函數封裝，怎麼複用）

P.S.這東西和繼承有很大關係嗎？爲什麼尼古拉斯把它也列爲實現繼承的一種方式？關係不大，但有一定關係

六.寄生式

這名字太扯了，而且寄生式是一種模式（套路），並不是只能用來實現繼承

1.具體實現

function beget(obj){   // 生孩子函數 beget：龍beget龍，鳳beget鳳。
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super(){
    this.val = 1;
    this.arr = [1];
}
function getSubObject(obj){
    // 創建新對象
    var clone = beget(obj); // 核心
    // 增強
    clone.attr1 = 1;
    clone.attr2 = 2;
    //clone.attr3...
 
    return clone;
}
 
var sub = getSubObject(new Super());
alert(sub.val);     // 1
alert(sub.arr);     // 1
alert(sub.attr1);   // 1

2.核心

給原型式繼承穿了個馬甲而已，看起來更像繼承了（上面介紹的原型式繼承更像是對象複製）

注意：beget函數並不是必須的，換言之，創建新對象 -> 增強 -> 返回該對象，這樣的過程叫寄生式繼承，新對象是如何創建的並不重要（用beget生的，new出來的，字面量現做的。。都可以）

3.優缺點

優點：

還是不需要創建自定義類型

缺點：

無法實現函數複用（沒用到原型，當然不行）

P.S.劇情解析：有缺陷的寄生式繼承 + 不完美的組合繼承 = 完美的寄生組合式繼承，不妨回去找找看哪裏用到了寄生

6種繼承方式的聯繫

P.S.虛線表示輔助作用，實線表示決定性作用

七、ES6 繼承方式：（最優方式）

1 基本用法

Class 之間可以通過extends關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。

[javascript]view plain copy
class ColorPoint extends Point {}  

上面代碼定義了一個ColorPoint類，該類通過extends關鍵字，繼承了Point類的所有屬性和方法。但是由於沒有部署任何代碼，所以這兩個類完全一樣，等於複製了一個Point類。下面，我們在ColorPoint內部加上代碼。

[javascript]view plain copy
class ColorPoint extends Point {  
    constructor(x, y, color) {  
        super(x, y); //  調用父類的 constructor(x, y)  
        this.color = color;  
    }  
    toString() {  
        return this.color + ' ' + super.toString(); //  調用父類的 toString()  
    }  
}  

上面代碼中， constructor方法和toString方法之中，都出現了super關鍵字，它在這裏表示父類的構造函數，用來新建父類的this對象。
子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因爲子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象。

[javascript]view plain copy
class Point { /* ... */ }  
class ColorPoint extends Point {  
    constructor() {}  
}  
let cp = new ColorPoint(); // ReferenceError  

上面代碼中， ColorPoint繼承了父類Point，但是它的構造函數沒有調用super方法，導致新建實例時報錯。
ES5 的繼承，實質是先創造子類的實例對象this，然後再將父類的方法添加到this上面（ Parent.apply(this)）。 ES6 的繼承機制完全不同，實質是先創造父類的實例對象this（所以必須先調用super方法），然後再用子類的構造函數修改this。
如果子類沒有定義constructor方法，這個方法會被默認添加，代碼如下。也就是說，不管有沒有顯式定義，任何一個子類都有constructor方法。

[javascript]view plain copy
constructor(...args) {  
    super(...args);  
}  

另一個需要注意的地方是，在子類的構造函數中，只有調用super之後，纔可以使用this關鍵字，否則會報錯。這是因爲子類實例的構建，是基於對父類實例加工，只有super方法才能返回父類實例。

[javascript]view plain copy
class Point {  
    constructor(x, y) {  
        this.x = x;  
        this.y = y;  
    }  
}  
class ColorPoint extends Point {  
    constructor(x, y, color) {  
        this.color = color; // ReferenceError  
        super(x, y);  
        this.color = color; //  正確  
    }  
}  

上面代碼中，子類的constructor方法沒有調用super之前，就使用this關鍵字，結果報錯，而放在super方法之後就是正確的。
下面是生成子類實例的代碼。

[javascript]view plain copy
let cp = new ColorPoint(25, 8, 'green');  
cp instanceof ColorPoint // true  
cp instanceof Point // true  

上面代碼中，實例對象cp同時是ColorPoint和Point兩個類的實例，這與 ES5 的行爲完全一致。

Super_LD

發佈了14 篇原創文章 · 獲贊 11 · 訪問量 5萬+

私信關注

JavaScript的7種繼承方式

寫在前面

約定

一.簡單原型鏈

1.具體實現

2.核心

3.優缺點

二.借用構造函數

1.具體實現

2.核心

3.優缺點

三.組合繼承（最常用）

1.具體實現

2.核心

3.優缺點

四.寄生組合繼承（最佳方式）

1.具體實現

2.核心

3.優缺點

五.原型式

1.具體實現

2.核心

3.優缺點

六.寄生式

1.具體實現

2.核心

3.優缺點

6種繼承方式的聯繫

七、ES6 繼承方式：（最優方式）