實現繼承6種方式

1.原型鏈酬土。2.構造函數。3.組合繼承格带。4.寄生組合繼承撤缴。5.原型式。6.寄生式叽唱。

1屈呕、簡單原型鏈:

核心:拿父類實例來充當子類原型對象

優(yōu)點:簡單,易于實現

缺點:

① 修改sub1.arr后sub2.arr也變了棺亭,因為來自原型對象的 “引用屬性” 是所有實例共享的虎眨。

②創(chuàng)建子類實例時,無法向父類構造函數傳參

function Super(){

? ?this.val = 1;

? ? this.arr = [1];

}

function? Sub(){}

Sub.prototype =new ?Super();// 核心

var sub1 =new ?Sub();

sub1.val = 2;

sub1.arr.push(2);

alert(sub1.val);// 2

alert(sub1.arr);// 1, 2

var sub2 =new ?Sub();

alert(sub2.val);// 1

alert(sub2.arr);// 1, 2

2.借用構造函數

核心:借父類的構造函數來增強子類實例,等于是把父類的實例屬性復制了一份給子類實例裝上了(完全沒有用到原型)所有sub1和sub2互不干擾嗽桩。

優(yōu)點:(解決了使用原型鏈繼承的缺點岳守,同時引出了以下的缺點)

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

②創(chuàng)建子類實例時,可以向父類構造函數傳參

缺點:

無法實現函數復用碌冶,每個子類實例都持有一個新的fun函數湿痢,太多了就會影響性能,內存爆炸扑庞。譬重。

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

3.組合繼承(最常用)

核心:把實例函數都放在原型對象上,以實現函數復用罐氨。同時還要保留借用構造函數方式的優(yōu)點臀规,通過Super.call(this);繼承父類的基本屬性和引用屬性并保留能傳參的優(yōu)點;通過Sub.prototype = new Super();繼承父類函數栅隐,實現函數復用塔嬉。

優(yōu)點:

①不存在引用屬性共享問題。

②子類實例可以向父級傳參

③函數可以進行復用

缺點:

(一點小瑕疵)子類原型上有一份多余的父類實例屬性约啊,因為父類構造函數被調用了兩次邑遏,生成了兩份,而子類實例上的那一份屏蔽了子類原型上的恰矩。。憎蛤。又是內存浪費外傅,比剛才情況好點,不過確實是瑕疵俩檬。

function ?Super(){

// 只在此處聲明基本屬性和引用屬性

? ?this.val = 1;

? ?this.arr = [1];

}

//? 在此處聲明函數

Super.prototype.fun1 =function(){};

Super.prototype.fun2 =function(){};

function Sub(){

? ?Super.call(this);// 核心

}

Sub.prototype =new Super();// 核心

var sub1 =new ?Sub(1);

var sub2 =new ?Sub(2);

alert(sub1.fun1 === sub2.fun1);// true

4.寄生組合繼承(最佳方式)

核心:用beget(Super.prototype);切掉了原型對象上多余的那份父類實例屬性

優(yōu)點:完美了

缺點:理論上沒有了(如果用起來麻煩不算缺點的話萎胰。。)

用起來麻煩是一方面棚辽,另一方面是因為寄生組合式繼承出現的比較晚技竟,是21世紀初的東西,大家等不起這么久屈藐,所以組合繼承是最常用的榔组,而這個理論上完美的方案卻只是課本上的最佳方式了

function ?beget(obj){// 生孩子函數 beget:龍beget龍,鳳beget鳳联逻。

varF =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);

5.原型式

核心:用生孩子函數得到得到一個“純潔”的新對象(“純潔”是因為沒有實例屬性)搓扯,再逐步增強之(填充實例屬性)

P.S.ES5提供了Object.create()函數,內部就是原型式繼承包归,IE9+支持

優(yōu)點:從已有對象衍生新對象锨推,不需要創(chuàng)建自定義類型(更像是對象復制,而不是繼承。)

缺點:

① 原型引用屬性會被所有實例共享换可,因為是用整個父類對象來充當了子類原型對象椎椰,所以這個缺陷無可避免。

② 無法實現代碼復用(新對象是現取的沾鳄,屬性是現添的慨飘,都沒用函數封裝,怎么復用)

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

6.寄生式

這名字太扯了,而且寄生式是一種模式(套路)磁椒,并不是只能用來實現繼承

核心:給原型式繼承穿了個馬甲而已堤瘤,看起來更像繼承了(上面介紹的原型式繼承更像是對象復制)

優(yōu)點:還是不需要創(chuàng)建自定義類型

缺點:無法實現函數復用(沒用到原型,當然不行)

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){

? ?// 創(chuàng)建新對象

? var clone = beget(obj);// 核心

? // 增強

? ?clone.attr1 = 1;

? clone.attr2 = 2;

? return clone;

}

var sub = getSubObject(newSuper());

alert(sub.val);// 1

alert(sub.arr);// 1

alert(sub.attr1);// 1

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市医增,隨后出現的幾起案子慎皱,更是在濱河造成了極大的恐慌,老刑警劉巖叶骨,帶你破解...
    沈念sama閱讀 210,835評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茫多,死亡現場離奇詭異,居然都是意外死亡忽刽,警方通過查閱死者的電腦和手機天揖,發(fā)現死者居然都...
    沈念sama閱讀 89,900評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跪帝,“玉大人今膊,你說我怎么就攤上這事∩〗#” “怎么了斑唬?”我有些...
    開封第一講書人閱讀 156,481評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長黎泣。 經常有香客問我恕刘,道長,這世上最難降的妖魔是什么聘裁? 我笑而不...
    開封第一講書人閱讀 56,303評論 1 282
  • 正文 為了忘掉前任雪营,我火速辦了婚禮,結果婚禮上衡便,老公的妹妹穿的比我還像新娘献起。我一直安慰自己洋访,他們只是感情好,可當我...
    茶點故事閱讀 65,375評論 5 384
  • 文/花漫 我一把揭開白布谴餐。 她就那樣靜靜地躺著姻政,像睡著了一般。 火紅的嫁衣襯著肌膚如雪岂嗓。 梳的紋絲不亂的頭發(fā)上汁展,一...
    開封第一講書人閱讀 49,729評論 1 289
  • 那天,我揣著相機與錄音厌殉,去河邊找鬼食绿。 笑死,一個胖子當著我的面吹牛公罕,可吹牛的內容都是我干的器紧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,877評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼楼眷,長吁一口氣:“原來是場噩夢啊……” “哼铲汪!你這毒婦竟也來了?” 一聲冷哼從身側響起罐柳,我...
    開封第一講書人閱讀 37,633評論 0 266
  • 序言:老撾萬榮一對情侶失蹤掌腰,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后张吉,有當地人在樹林里發(fā)現了一具尸體齿梁,經...
    沈念sama閱讀 44,088評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,443評論 2 326
  • 正文 我和宋清朗相戀三年肮蛹,在試婚紗的時候發(fā)現自己被綠了士飒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,563評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡蔗崎,死狀恐怖,靈堂內的尸體忽然破棺而出扰藕,到底是詐尸還是另有隱情缓苛,我是刑警寧澤,帶...
    沈念sama閱讀 34,251評論 4 328
  • 正文 年R本政府宣布邓深,位于F島的核電站未桥,受9級特大地震影響,放射性物質發(fā)生泄漏芥备。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,827評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纷妆。 院中可真熱鬧摹芙,春花似錦日月、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至绊起,卻和暖如春精拟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背虱歪。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評論 1 264
  • 我被黑心中介騙來泰國打工蜂绎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人笋鄙。 一個月前我還...
    沈念sama閱讀 46,240評論 2 360
  • 正文 我出身青樓师枣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親局装。 傳聞我的和親對象是個殘疾皇子坛吁,可洞房花燭夜當晚...
    茶點故事閱讀 43,435評論 2 348

推薦閱讀更多精彩內容

  • 基于這篇文章的一些名稱約定: 上面的約定應該是比較合理的,如果難以理解铐尚,可以查看黯羽輕揚:JS學習筆記2_面向對象...
    一直玩編程閱讀 520評論 1 7
  • 1拨脉、構造函數模式 [url=]file:///C:/Users/i037145/AppData/Local/Tem...
    橫沖直撞666閱讀 844評論 0 0
  • 相關知識點 數據類型、運算宣增、對象玫膀、function、繼承爹脾、閉包帖旨、作用域、原型鏈灵妨、事件解阅、RegExp、JSON泌霍、Aj...
    sandisen閱讀 11,373評論 7 175
  • @轉自GitHub 介紹js的基本數據類型货抄。Undefined、Null朱转、Boolean蟹地、Number、Strin...
    YT_Zou閱讀 1,145評論 0 0
  • 單例模式 適用場景:可能會在場景中使用到對象藤为,但只有一個實例怪与,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式缅疟,...
    Obeing閱讀 2,056評論 1 10