js的6種繼承方式

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

注：本文引用於http://www.cnblogs.com/ayqy/p/4471638.html

重點看第三點 組合繼承（最經常使用）

寫在前面

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

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

約定

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/*   * 約定   */ 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.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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.優缺點

優勢：

1. 簡單，易於實現

缺點：

1. 修改sub1.arr後sub2.arr也變了，由於來自原型對象的引用屬性是全部實例共享的。

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

2. 建立子類實例時，沒法向父類構造函數傳參

二.借用構造函數

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

1.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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.優缺點

優勢：

1. 解決了子類實例共享父類引用屬性的問題

2. 建立子類實例時，能夠向父類構造函數傳參

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

缺點：

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

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

三.組合繼承（最經常使用）

目前咱們的借用構造函數方式仍是有問題（沒法實現函數複用），不要緊，接着修復，jsers吭哧吭哧又搞出了組合繼承

1.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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.優缺點

優勢：

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

缺點:

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

P.S.若是沒法理解這個」多餘「，能夠查看黯羽輕揚：JS學習筆記2_面向對象，文章末尾有更詳細的解釋

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

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

1.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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.優缺點

優勢：

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

缺點：

1. 原型引用屬性會被全部實例共享，由於是用整個父類對象來充當了子類原型對象，因此這個缺陷無可避免

2. 沒法實現代碼複用（新對象是現取的，屬性是現添的，都沒用函數封裝，怎麼複用）

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

六.寄生式

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

1.具體實現

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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.優缺點

優勢：

1. 仍是不須要建立自定義類型

缺點：

1. 沒法實現函數複用（沒用到原型，固然不行）

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

七.6種繼承方式的聯繫

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

參考資料

• 《JavaScript高級程序設計》

• 《JavaScript語言精粹》