JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
借用構(gòu)造函數(shù)繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類(lèi)型構(gòu)造函數(shù),通過(guò)使用apply()和call()方法
function girlFriend(){
this.girls = ['chen','wang','zhu'];
}
function Person(){
girlFriend.call(this,20);
}
var wang = new Person();
var zhu = new Person();
wang.girls.push('zhang');
console.log(wang.girls); //(4) ["chen", "wang", "zhu", "zhang"]
console.log(zhu.girls); //(3) ["chen", "wang", "zhu"]
通過(guò)以上代碼,我們可以發(fā)現(xiàn),在原型鏈繼承中出現(xiàn)的問(wèn)題不再出現(xiàn)了,這個(gè)超類(lèi)不會(huì)被子類(lèi)所創(chuàng)建的實(shí)例共享了。
借用構(gòu)造函數(shù)繼承的優(yōu)勢(shì)是可以在子類(lèi)型構(gòu)造函數(shù)中向超類(lèi)型構(gòu)造函數(shù)傳遞參數(shù),例如以下代碼:
function SuperType(name){
this.name = name;
}
function SubType(){
SuperType.call(this,"nick");
this.age = 20;
}
var instance = new SubType();
console.log(instance.name); //nick
console.log(instance.age); //20
借用構(gòu)造函數(shù)繼承的問(wèn)題:用構(gòu)造函數(shù)繼承并不能繼承到超類(lèi)型原型中定義的方法,例如以下代碼,在girlFriends構(gòu)造函數(shù)的原型中添加sayHello方法:
girlFriend.prototype.sayHello = function(){
console.log('hello');
}
繼承它的子類(lèi)構(gòu)造函數(shù)的實(shí)例并不能調(diào)用到這個(gè)sayHello方法,返回的值是undefined
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)文本一鍵復(fù)制和長(zhǎng)按復(fù)制功能
本文主要內(nèi)容分三部分,第一部分是需求分析,第二部分是實(shí)現(xiàn)步驟,第三部分是問(wèn)題詳解,如果您只需要解決問(wèn)題,請(qǐng)閱讀第一、二部分即可,如果您有更多時(shí)間,進(jìn)一步學(xué)習(xí)問(wèn)題相關(guān)知識(shí)點(diǎn),請(qǐng)閱讀至第三部分2023-10-10
Ant Design Blazor 組件庫(kù)的路由復(fù)用多標(biāo)簽頁(yè)功能
在 Ant Design Blazor 組件庫(kù)中實(shí)現(xiàn)多標(biāo)簽頁(yè)組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs 組件的 ReuseTabs 組件,需要的朋友跟隨小編一起看看吧2021-07-07
JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
前端實(shí)現(xiàn)(excel)xlsx文件預(yù)覽的詳細(xì)步驟
excel的預(yù)覽庫(kù)有不少,也都很強(qiáng)大,但是能很簡(jiǎn)單實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)(excel)xlsx文件預(yù)覽的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
js 鍵盤(pán)記錄實(shí)現(xiàn)(兼容FireFox和IE)
用js實(shí)現(xiàn)鍵盤(pán)記錄,要關(guān)注瀏覽器的三種按鍵事件類(lèi)型,即keydown,keypress和keyup,它們分別對(duì)應(yīng)onkeydown、onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件,依次是keydown,keypress,然后是按鍵釋放時(shí)候的keyup。2010-02-02
javascript實(shí)現(xiàn)視頻彈幕效果(兩個(gè)版本)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)視頻彈幕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11
javascript中創(chuàng)建對(duì)象的三種常用方法
在javascript中創(chuàng)建對(duì)象的三種方法,腳本之家以前發(fā)布過(guò)有簡(jiǎn)單實(shí)例版的,大家可以參考下。2010-12-12
javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
為了達(dá)到某種特殊的效果我們需要用Javascript動(dòng)態(tài)的去更改某一個(gè)標(biāo)簽的Css屬性,如何動(dòng)態(tài)修改css樣式呢?面對(duì)這個(gè)問(wèn)題,小編帶領(lǐng)大家來(lái)解決javascript動(dòng)態(tài)修改css樣式,小伙伴們都快來(lái)學(xué)習(xí)吧2015-08-08

