教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢(xún)/投訴熱線:400-618-4000

JavaScript中怎樣借用構(gòu)造函數(shù)繼承父類(lèi)屬性?

更新時(shí)間:2021年12月15日11時(shí)10分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

在ES6之前,JavaScript中并沒(méi)有extends繼承,如果要實(shí)現(xiàn)繼承的效果,可以通過(guò)構(gòu)造函數(shù)和原型對(duì)象來(lái)模擬實(shí)現(xiàn)。本節(jié)將會(huì)講解如何利用構(gòu)造函數(shù)和原型對(duì)象實(shí)現(xiàn)繼承。

在ES6中,繼承是通過(guò)定義兩個(gè)類(lèi),然后子類(lèi)用extends關(guān)鍵字繼承父類(lèi)。而在ES 6之前,只能用構(gòu)造函數(shù)來(lái)代替類(lèi),在子類(lèi)中利用call0方法將父類(lèi)的this指向子類(lèi)的this,這樣就可以實(shí)現(xiàn)子類(lèi)繼承父類(lèi)的屬性。為了使讀者更好地理解,下面我們通過(guò)代碼進(jìn)行演示。

如果沒(méi)有,再到Son原型對(duì)象中查找,如果仍然沒(méi)有,再到Father原型對(duì)象中查找,一沿著原型鏈找到最后。由于Father原型對(duì)象中有一個(gè)money()方法,所以通過(guò)Son實(shí)例對(duì)象就繼承了money()方法。

不能直接將父類(lèi)原型對(duì)象賦值給子類(lèi)原型對(duì)象,這樣會(huì)導(dǎo)致子類(lèi)無(wú)法擁有自己的方法,在子類(lèi)中添加的方法同時(shí)也會(huì)添加到父類(lèi)中。下面我們通過(guò)代碼演示這樣一種錯(cuò)誤的用法。

function Father() {}
Father.prototype.money = function() {
    console.log(100000),
};
function Son() {}
Son.prototype = Father.prototype;   //通過(guò)這種方式無(wú)法實(shí)現(xiàn)真正的繼承
Son.prototype.exam = function() {}; //為子類(lèi)增加方法的時(shí)候,會(huì)影響父類(lèi)
console.log(Father.prototype.exam);    //可以看到父類(lèi)也有了exam方法
真正的繼承是子類(lèi)可以擁有自己的方法,并且當(dāng)子類(lèi)和父類(lèi)的方法名相同時(shí),子類(lèi)方法可以覆蓋父類(lèi)方法。


多學(xué)一招:class語(yǔ)法的本質(zhì)

ES 6提供了class語(yǔ)法用來(lái)定義類(lèi),但即使沒(méi)有class語(yǔ)法,在JavaScript中可以用構(gòu)造函數(shù)和原型對(duì)象的語(yǔ)法來(lái)替代。那么,class語(yǔ)法定義的類(lèi)和構(gòu)造函數(shù)有沒(méi)有區(qū)別呢?下面我們通過(guò)代碼進(jìn)行測(cè)試。

class Person {}
console.log(Person.prototype);        //類(lèi)也有原型對(duì)象
Person.prototype.money = function() { //類(lèi)也可以增加方法
    console.log(100000);
};
new Person().money(); //輸出結(jié)果:100000



猜你喜歡:

ES6模塊化是什么?怎樣導(dǎo)入和執(zhí)行模塊中的代碼?

常見(jiàn)的js中的繼承方法有哪些?

什么是繼承?Java中如何聲明一個(gè)類(lèi)繼承另一個(gè)類(lèi)?

哪些css屬性可以繼承?哪些不可以繼承?

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!