【轉】重新理解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_面向對象，了解更多的基本常識

一.簡單原型鏈

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

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); // 1alert(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); // 2alert(sub1.arr); // 1, 2 alert(sub2.arr); // 1alert(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.虛線表示輔助作用，實線表示決定性作用

參考資料

• 《JavaScript高級程序設計》

• 《JavaScript語言精粹》

轉載于:https://www.cnblogs.com/liyuspace/p/7757685.html

總結

以上是生活随笔為你收集整理的理解JS的6种继承方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。