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

時間 2019-12-08

原文原文鏈接

寫在前面

一直不喜歡JS的OOP，在學習階段好像也用不到，總以爲JS的OOP不三不四的，多是由於先接觸了Java，因此對JS的OO部分有些抵觸。javascript

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

約定

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_面向對象，瞭解更多的基本常識wordpress

一.簡單原型鏈

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

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也變了，由於來自原型對象的引用屬性是全部實例共享的。this

能夠這樣理解：執行sub1.arr.push(2);先對sub1進行屬性查找，找遍了實例屬性（在本例中沒有實例屬性），沒找到，就開始順着原型鏈向上找，拿到了sub1的原型對象，一搜身，發現有arr屬性。因而給arr末尾插入了2，因此sub2.arr也變了.net
建立子類實例時，沒法向父類構造函數傳參

二.借用構造函數

簡單原型鏈真夠簡單，但是存在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