基于這篇文章的一些名稱約定:
/* * 約定 */ 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.虛線表示輔助作用,實線表示決定性作用