快捷導(dǎo)航

Javascript中3種實現(xiàn)繼承的方法和代碼實例

更新時間：2014年08月12日 10:55:38 投稿：junjie

這篇文章主要介紹了Javascript中3種實現(xiàn)繼承的方法和代碼實例,這3種方法分別為對象冒充、原型繼承、上二者的混合,需要的朋友可以參考下

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

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

Javascript中的繼承大約有三類：1.對象冒充；2.原型繼承；3.二者的混合。

一、對象冒充

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

原理很簡單，那我們怎么實現(xiàn)呢？下面就以代碼示例，實際的操作一下。

對象冒充實現(xiàn)方法一，我們最常用的新建對象的方法：

復(fù)制代碼代碼如下:

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);

 }

}

為了驗證以上的方法是否正確，你可以親自測試下，我將測試用的代碼寫在下面：

復(fù)制代碼代碼如下:

var objA = new classA('DK');

objA.alertName();//DK

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

objB.alertName();//DS

objB.alertAge();//20

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

對象冒充實現(xiàn)方法二，使用call方法：

復(fù)制代碼代碼如下:

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對象下面運行父類的構(gòu)造函數(shù)，實現(xiàn)了同樣的目的。另外與call方法相對于的則就是apply方法啦。

對象冒充實現(xiàn)方法三，使用apply方法：

復(fù)制代碼代碼如下:

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);

 }

}

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

二、原型繼承

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

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

代碼示例伺候：

復(fù)制代碼代碼如下:

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ù)。因為即使有構(gòu)造參數(shù)在實現(xiàn)原型繼承的時候你也無法傳遞=.=!

三、混合繼承

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

復(fù)制代碼代碼如下:

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);

}