JavaScript幾種繼承方式的優(yōu)缺點(diǎn)

參考http://www.reibang.com/p/1016160e91fe
原型繼承
缺點(diǎn): 子類(lèi)實(shí)例共享屬性,造成實(shí)例間的屬性會(huì)相互影響

function Parent1() {
  this.name = ['super1']
  this.reName = function () {
    this.name.push('super111')
  }
}
function Child1() {

}
Child1.prototype = new Parent1()
var child11 = new Child1()
var child12 = new Child1()
var parent1 = new Parent1()
child11.reName()
console.log(child11.name, child12.name) // [ 'super1', 'super111' ] [ 'super1', 'super111' ], 可以看到子類(lèi)的實(shí)例屬性皆來(lái)自于父類(lèi)的一個(gè)實(shí)例笑撞,即子類(lèi)共享了同一個(gè)實(shí)例
console.log(child11.reName === child12.reName) // true, 共享了父類(lèi)的方法

構(gòu)造函數(shù)繼承
缺點(diǎn): 父類(lèi)的方法沒(méi)有被共享,造成內(nèi)存浪費(fèi)

function Child2() {
  Parent1.call(this)
}

var child21 = new Child2()
var child22 = new Child2()
child21.reName()
console.log(child21.name, child22.name) // [ 'super1', 'super111' ] [ 'super1' ], 子實(shí)例的屬性都是相互獨(dú)立的
console.log(child21.reName === child22.reName) // false, 實(shí)例方法也是獨(dú)立的皮获,沒(méi)有共享同一個(gè)方法

組合繼承
缺點(diǎn): 父類(lèi)構(gòu)造函數(shù)被調(diào)用兩次,子類(lèi)實(shí)例的屬性存在兩份麻诀。造成內(nèi)存浪費(fèi)

function Parent3() {
  this.name = ['super3']
}
Parent3.prototype.reName = function() {
  this.name.push('super31')
}
function Child3() {
  Parent3.call(this) // 生成子類(lèi)的實(shí)例屬性(但是不包括父對(duì)象的方法)
}
Child3.prototype = new Parent3() // 繼承父類(lèi)的屬性和方法(副作用: 父類(lèi)的構(gòu)造函數(shù)被調(diào)用的多次献酗,且屬性也存在兩份造成了內(nèi)存浪費(fèi))
var child31 = new Child3()
var child32 = new Child3()
child31.reName()
console.log(child31.name, child32.name) // [ 'super3', 'super31' ] [ 'super3' ], 子類(lèi)實(shí)例不會(huì)相互影響
console.log(child31.reName === child32.reName) //true, 共享了父類(lèi)的方法

寄生繼承
完美:子類(lèi)都有各自的實(shí)例不會(huì)相互影響初家,且共享了父類(lèi)的方法

function Parent4() {
  this.name = ['super4']
}
Parent4.prototype.reName = function() {
  this.name.push('super41')
}
function Child4() {
  Parent4.call(this) // 生成子類(lèi)的實(shí)例屬性(但是不包括父對(duì)象的方法)
}
Child4.prototype = Object.create(Parent4.prototype) // 該方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象
var child41 = new Child4()
var child42 = new Child4()
child41.reName()
console.log(child41.name, child42.name) //[ 'super4','super41' ] [ 'super4' ], 子類(lèi)實(shí)例不會(huì)相互影響
console.log(child41.reName === child42.reName) //true, 共享了父類(lèi)的方法

ES6 class
類(lèi)似于寄生繼承

class Parent5 {
  constructor() {
    this.name = ['super5']
  }
  reName() {
    this.name.push('new 5')
  }
}

class Child5 extends Parent5 {
  constructor() {
    super()
  }
}

var child51 = new Child5()
var child52 = new Child5()
child51.reName()
console.log(child51.name, child52.name) // [ 'super5', 'new 5' ], 子類(lèi)實(shí)例不會(huì)相互影響
console.log(child51.reName === child52.reName) //true, 共享了父類(lèi)的方法
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末偎窘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子溜在,更是在濱河造成了極大的恐慌陌知,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掖肋,死亡現(xiàn)場(chǎng)離奇詭異仆葡,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)志笼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)沿盅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)把篓,“玉大人,你說(shuō)我怎么就攤上這事嗡呼≈郊螅” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵南窗,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我郎楼,道長(zhǎng)万伤,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任呜袁,我火速辦了婚禮敌买,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阶界。我一直安慰自己虹钮,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布膘融。 她就那樣靜靜地躺著芙粱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪氧映。 梳的紋絲不亂的頭發(fā)上春畔,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音岛都,去河邊找鬼律姨。 笑死,一個(gè)胖子當(dāng)著我的面吹牛臼疫,可吹牛的內(nèi)容都是我干的择份。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼烫堤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼荣赶!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起塔逃,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤讯壶,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后湾盗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體伏蚊,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年格粪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了躏吊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氛改。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖比伏,靈堂內(nèi)的尸體忽然破棺而出胜卤,到底是詐尸還是另有隱情,我是刑警寧澤赁项,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布葛躏,位于F島的核電站,受9級(jí)特大地震影響悠菜,放射性物質(zhì)發(fā)生泄漏舰攒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一悔醋、第九天 我趴在偏房一處隱蔽的房頂上張望摩窃。 院中可真熱鬧,春花似錦芬骄、人聲如沸猾愿。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蒂秘。三九已至,卻和暖如春宰僧,著一層夾襖步出監(jiān)牢的瞬間材彪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工琴儿, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留段化,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓造成,卻偏偏與公主長(zhǎng)得像显熏,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晒屎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

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