重新理解 JS 的 6 種繼承方式

###寫在前面

一直不喜歡 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_面向物件](http://ayqy.net/blog/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_面向物件](http://ayqy.net/blog/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.虛線表示輔助作用，實線表示決定性作用

###參考資料

《JavaScript 高階程式設計》
《JavaScript 語言精粹》

評論

提交評論