Javascript中3種實(shí)現(xiàn)繼承的方法和代碼實(shí)例
來源:易賢網(wǎng) 閱讀:788 次 日期:2014-08-14 16:08:44
溫馨提示:易賢網(wǎng)小編為您整理了“Javascript中3種實(shí)現(xiàn)繼承的方法和代碼實(shí)例”,方便廣大網(wǎng)友查閱!

繼承是我們?cè)趯?shí)現(xiàn)面向?qū)ο缶幊痰臅r(shí)候很重要的一個(gè)手段。雖然我們講不能過度繼承,多利用組合代替繼承,但是繼承總是免不了的。這里要討論的就是Javascript中的繼承機(jī)制。

Javascript中實(shí)際上是沒有繼承的概念的,但是我們可以通過一些手段來模仿實(shí)現(xiàn)它。這種繼承實(shí)際上把一個(gè)對(duì)象復(fù)制到另外一個(gè)對(duì)象內(nèi)部。你需要注意的是所有的本地類和宿主類是不能作為基類被繼承的,主要是為了安全方面的考慮。

Javascript中的繼承大約有三類:1.對(duì)象冒充;2.原型繼承;3.二者的混合。

一、對(duì)象冒充

其實(shí)對(duì)象冒充是跟this關(guān)鍵字緊密聯(lián)系在一起的(所以說充分理解Javascript中的this關(guān)鍵字是多么的重要:P)。構(gòu)造函數(shù)使用this來給屬性和方法賦值,而構(gòu)造函數(shù)也可以看作為一個(gè)普通的函數(shù),所以我們就可以使我們的基類的構(gòu)造函數(shù)成為子類的構(gòu)造函數(shù),然后在子類的內(nèi)部調(diào)用這個(gè)函數(shù),那么子類就會(huì)得到父類的屬性和方法。

原理很簡單,那我們?cè)趺磳?shí)現(xiàn)呢?下面就以代碼示例,實(shí)際的操作一下。

對(duì)象冒充實(shí)現(xiàn)方法一,我們最常用的新建對(duì)象的方法:

代碼如下:

var classA = function(name){

this.name = name;

this.alertName = function(){

alert(this.name);

}

}

var classB = function(name,age){

this.myConstructor = classA;

this.myConstructor(name);

delete this.myConstructor;

this.age = age;

this.alertAge = function(){

alert(this.age);

}

}

為了驗(yàn)證以上的方法是否正確,你可以親自測(cè)試下,我將測(cè)試用的代碼寫在下面:

代碼如下:

var objA = new classA('DK');

objA.alertName();//DK

var objB = new classB('DS',20);

objB.alertName();//DS

objB.alertAge();//20

這就是所謂的對(duì)象冒充了,另外對(duì)象冒充還有另外兩種實(shí)現(xiàn)的方式,雖然它們的實(shí)現(xiàn)手段不一樣,但是它們的原理是一樣的。

對(duì)象冒充實(shí)現(xiàn)方法二,使用call方法:

代碼如下:

var classA = function(name){

this.name = name;

this.alertName = function(){

alert(this.name);

}

}

var classB = function(name,age){

classA.call(this,name);

this.age = age;

this.alertAge = function(){

alert(this.age);

}

}

通過代碼也能看出來,第一種方法中我們新建了函數(shù)指針指向父類,調(diào)用函數(shù),然后將指針刪除。而這里我們之間用call方法在this對(duì)象下面運(yùn)行父類的構(gòu)造函數(shù),實(shí)現(xiàn)了同樣的目的。另外與call方法相對(duì)于的則就是apply方法啦。

對(duì)象冒充實(shí)現(xiàn)方法三,使用apply方法:

代碼如下:

var classA = function(name){

this.name = name;

this.alertName = function(){

alert(this.name);

}

}

var classB = function(name,age){

classA.apply(this,new Array(name));

this.age = age;

this.alertAge = function(){

alert(this.age);

}

}

其實(shí)大家可以看到,apply方法跟call方法是非常類似的,只不過傳遞參數(shù)是略有不同罷了。

二、原型繼承

大家應(yīng)該對(duì)prototype對(duì)象有所了解,原型對(duì)象上的所有屬性和方法將被傳遞給類的所有實(shí)例,所有當(dāng)我們把父類的所有屬性和方法付給子類的prototype對(duì)象時(shí)也就相當(dāng)于實(shí)現(xiàn)了我們的繼承。

子類想獲得父類的所有屬性和方法,那我們將父類的一個(gè)實(shí)例直接付給子類的prototype對(duì)象,那我們的子類不就相當(dāng)于獲取了父類的所有對(duì)象和方法?

代碼示例伺候:

代碼如下:

var classA = function(){

this.name = 'DK';

this.alertName = function(){

alert(this.name);

}

}

var classB = function(name,age){

this.name = name;

this.age = age;

}

classB.prototype = new classA();

classB.prototype.alertAge = function(){

alert(this.age);

}

注意這里的父類的構(gòu)造函數(shù)需要確保沒有參數(shù)。因?yàn)榧词褂袠?gòu)造參數(shù)在實(shí)現(xiàn)原型繼承的時(shí)候你也無法傳遞=.=!

三、混合繼承

顧名思義,混合繼承就是前兩種方式的混合使用了。

代碼如下:

var classA = function(name){

this.name = name;

}

classA.prototype.alertName = function(){

alert(this.name);

}

var classB = function(name,age){

classA.call(this,name);

this.age = age;

}

classB.prototype = new classA();

classB.prototype.alertAge = function(){

alert(this.age);

}

使用對(duì)象冒充實(shí)現(xiàn)了向父類傳遞參數(shù),同時(shí)使用原型繼承實(shí)現(xiàn)了對(duì)公有方法的繼承。

說完了這三中繼承方式了,下面該說到問題的時(shí)候了。

你可能會(huì)不解,為什么有了對(duì)象冒充,有了原型繼承還要再弄出個(gè)什么混合繼承,對(duì),最重要的也就是這個(gè)問題。

1.如果你實(shí)際測(cè)試一下,你會(huì)發(fā)現(xiàn)通過對(duì)象冒充的方式實(shí)現(xiàn)的繼承,子類是無法訪問到父類的原型鏈上的方法的。

2.而用原型繼承,則會(huì)把所有的屬性變成共享的屬性,如果你同一個(gè)子類實(shí)現(xiàn)兩個(gè)實(shí)例,你會(huì)發(fā)現(xiàn)你的所有實(shí)例共享所有的屬性。

3.但是這肯定是不合適的了。所以就有了混合繼承的方式,讓屬性繼續(xù)保持私有,同時(shí)讓子類能夠訪問父類的原型鏈的方法。

你可以親自動(dòng)手試一下,在對(duì)象冒充繼承的時(shí)候,子類無法訪問父類的原型鏈方法,原型鏈繼承子類的所有實(shí)例共享所有父類屬性。這里我就不寫例子了。

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:Javascript中3種實(shí)現(xiàn)繼承的方法和代碼實(shí)例
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)