JS中的6種繼承方法

一绸栅、原型的繼承
只需要將子級的原型對象設(shè)置為父級的一個(gè)實(shí)例,加入到原型鏈中即可。

// 繼承原型
cPerson.prototype = new Person(name, age);
// 添加更多方法
cPerson.prototype.getLive = function() {}

缺點(diǎn):
1.來自原型對象的引用屬性是所有實(shí)例共享的哟玷,原型中的一改則全改
2.創(chuàng)建子類實(shí)例時(shí),無法向父類構(gòu)造函數(shù)傳參


二一也、構(gòu)造函數(shù)的繼承
等于是把父類的實(shí)例屬性復(fù)制了一份給子類實(shí)例裝上了(完全沒有用到原型)
(構(gòu)造函數(shù)的本質(zhì)巢寡,它其實(shí)是在new內(nèi)部實(shí)現(xiàn)的一個(gè)復(fù)制過程)
在繼承時(shí)想要的,就是想父級構(gòu)造函數(shù)中的操作在子級的構(gòu)造函數(shù)中重現(xiàn)一遍即可椰苟。我們可以通過call方法來達(dá)到目的抑月。

// 構(gòu)造函數(shù)的繼承function cPerson(name, age, job) {
    Person.call(this, name, age);
    this.job = job;
}

缺點(diǎn):
無法實(shí)現(xiàn)函數(shù)復(fù)用,每個(gè)子類實(shí)例都持有一個(gè)新的fun函數(shù)舆蝴,太多了就會(huì)影響性能谦絮,內(nèi)存爆炸。


三洁仗、組合繼承(最常用)
把實(shí)例函數(shù)都放在原型對象上层皱,以實(shí)現(xiàn)函數(shù)復(fù)用。同時(shí)還要保留借用構(gòu)造函數(shù)方式的優(yōu)點(diǎn)赠潦,通過Super.call(this);繼承父類的基本屬性和引用屬性并保留能傳參的優(yōu)點(diǎn)叫胖;通過Sub.prototype = new Super();繼承父類函數(shù),實(shí)現(xiàn)函數(shù)復(fù)用

function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心

缺點(diǎn): 由于調(diào)用了2次父類的構(gòu)造方法她奥,會(huì)存在一份多余的父類實(shí)例屬性(原因: 第一次SuperType.call(this);語句從父類拷貝了一份父類實(shí)例屬性給子類作為子類的實(shí)例屬性瓮增,第二次SubType.prototype = new SuperType();創(chuàng)建父類實(shí)例作為子類原型疲陕,此時(shí)這個(gè)父類實(shí)例就又有了一份實(shí)例屬性,但這份會(huì)被第一次拷貝來的實(shí)例屬性屏蔽掉钉赁,所以多余蹄殃。)


四、寄生組合繼承(最佳方式)
( 對組合繼承的優(yōu)化)
用beget(Super.prototype);切掉了原型對象上多余的那份父類實(shí)例屬性

function beget(obj){   // 生孩子函數(shù) beget:龍beget龍你踩,鳳beget鳳诅岩。
    var F = function(){};
    F.prototype = obj;
    return new F();  //返回一個(gè)新的構(gòu)造函數(shù)F的實(shí)例
}
function Super(){
    // 只在此處聲明基本屬性和引用屬性
    this.val = 1;
    this.arr = [1];
}
//  在此處聲明函數(shù)
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);

五、原型式
用生孩子函數(shù)得到得到一個(gè)“純潔”的新對象(“純潔”是因?yàn)闆]有實(shí)例屬性)带膜,再逐步增強(qiáng)之(填充實(shí)例屬性)
(beget函數(shù)的參數(shù)為父類的一個(gè)實(shí)例化對象吩谦,這個(gè)參數(shù)作為新構(gòu)造函數(shù)的原型)

function beget(obj){   // 生孩子函數(shù) 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);   // 核心
// 增強(qiáng)
sub.attr1 = 1;
sub.attr2 = 2;
//sub.attr3...

六式廷、寄生式
給原型式繼承穿了個(gè)馬甲而已,看起來更像繼承了(上面介紹的原型式繼承更像是對象復(fù)制)
注意:beget函數(shù)并不是必須的芭挽,換言之滑废,創(chuàng)建新對象 -> 增強(qiáng) -> 返回該對象,
這樣的過程叫寄生式繼承袜爪,新對象是如何創(chuàng)建的并不重要(用beget生的蠕趁,new出來的,字面量現(xiàn)做的辛馆。俺陋。都可以)
(beget函數(shù)的參數(shù)為父類的一個(gè)實(shí)例化對象,這個(gè)參數(shù)作為新構(gòu)造函數(shù)的原型)
缺點(diǎn):無法實(shí)現(xiàn)函數(shù)復(fù)用(沒用到原型昙篙,當(dāng)然不行)


相關(guān)參考:

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末腊状,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子苔可,更是在濱河造成了極大的恐慌缴挖,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硕蛹,死亡現(xiàn)場離奇詭異醇疼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)法焰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進(jìn)店門秧荆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人埃仪,你說我怎么就攤上這事乙濒。” “怎么了?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵颁股,是天一觀的道長么库。 經(jīng)常有香客問我,道長甘有,這世上最難降的妖魔是什么诉儒? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮亏掀,結(jié)果婚禮上忱反,老公的妹妹穿的比我還像新娘。我一直安慰自己滤愕,他們只是感情好温算,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著间影,像睡著了一般注竿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上魂贬,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天巩割,我揣著相機(jī)與錄音,去河邊找鬼随橘。 笑死喂分,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的机蔗。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼甘萧,長吁一口氣:“原來是場噩夢啊……” “哼萝嘁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扬卷,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤牙言,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后怪得,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咱枉,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年徒恋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蚕断。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,683評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡入挣,死狀恐怖亿乳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤葛假,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布障陶,位于F島的核電站,受9級特大地震影響聊训,放射性物質(zhì)發(fā)生泄漏抱究。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一带斑、第九天 我趴在偏房一處隱蔽的房頂上張望媳维。 院中可真熱鬧,春花似錦遏暴、人聲如沸侄刽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽州丹。三九已至,卻和暖如春杂彭,著一層夾襖步出監(jiān)牢的瞬間墓毒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工亲怠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留所计,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓团秽,卻偏偏與公主長得像主胧,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子习勤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 博客內(nèi)容:什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對象屬性創(chuàng)建對象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,403評論 3 12
  • 我們在對象創(chuàng)建模式中討論過踪栋,對象創(chuàng)建的模式就是定義對象模板的方式。有了模板以后图毕,我們就可以輕松地創(chuàng)建多個(gè)結(jié)構(gòu)相同的...
    csRyan閱讀 875評論 0 7
  • 本章內(nèi)容 理解對象屬性 理解并創(chuàng)建對象 理解繼承 面向?qū)ο笳Z言有一個(gè)標(biāo)志夷都,那就是它們都有類的概念,而通過類可以創(chuàng)建...
    悶油瓶小張閱讀 846評論 0 1
  • 基于這篇文章的一些名稱約定: 上面的約定應(yīng)該是比較合理的予颤,如果難以理解囤官,可以查看黯羽輕揚(yáng):JS學(xué)習(xí)筆記2_面向?qū)ο?..
    一直玩編程閱讀 524評論 1 7
  • 這幾天心里頗不寧靜,你總是臉色時(shí)好時(shí)壞,讓我捉摸不透捏检,我們不是說好了荞驴,要好好的溝通,好好的走下去嗎贯城? 今天你下班后...
    Mr_Zhang2O12閱讀 169評論 0 0