繼承是我們在實現面向對象編程的時候很重要的一個手段。雖然我們講不能過度繼承,多利用組合代替繼承,但是繼承總是免不了的。這裡要討論的就是Javascript中的繼承機制。
Javascript中實際上是沒有繼承的概念的,但是我們可以通過一些手段來模仿實現它。這種繼承實際上把一個對象復制到另外一個對象內部。你需要注意的是所有的本地類和宿主類是不能作為基類被繼承的,主要是為了安全方面的考慮。
Javascript中的繼承大約有三類:1.對象冒充;2.原型繼承;3.二者的混合。
一、對象冒充
其實對象冒充是跟this關鍵字緊密聯系在一起的(所以說充分理解Javascript中的this關鍵字是多麼的重要:P)。構造函數使用this來給屬性和方法賦值,而構造函數也可以看作為一個普通的函數,所以我們就可以使我們的基類的構造函數成為子類的構造函數,然後在子類的內部調用這個函數,那麼子類就會得到父類的屬性和方法。
原理很簡單,那我們怎麼實現呢?下面就以代碼示例,實際的操作一下。
對象冒充實現方法一,我們最常用的新建對象的方法:
復制代碼 代碼如下:
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);
}
}
為了驗證以上的方法是否正確,你可以親自測試下,我將測試用的代碼寫在下面:
復制代碼 代碼如下:
var objA = new classA('DK');
objA.alertName();//DK
var objB = new classB('DS',20);
objB.alertName();//DS
objB.alertAge();//20
這就是所謂的對象冒充了,另外對象冒充還有另外兩種實現的方式,雖然它們的實現手段不一樣,但是它們的原理是一樣的。
對象冒充實現方法二,使用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);
}
}
通過代碼也能看出來,第一種方法中我們新建了函數指針指向父類,調用函數,然後將指針刪除。而這裡我們之間用call方法在this對象下面運行父類的構造函數,實現了同樣的目的。另外與call方法相對於的則就是apply方法啦。
對象冒充實現方法三,使用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);
}
}
其實大家可以看到,apply方法跟call方法是非常類似的,只不過傳遞參數是略有不同罷了。
二、原型繼承
大家應該對prototype對象有所了解,原型對象上的所有屬性和方法將被傳遞給類的所有實例,所有當我們把父類的所有屬性和方法付給子類的prototype對象時也就相當於實現了我們的繼承。
子類想獲得父類的所有屬性和方法,那我們將父類的一個實例直接付給子類的prototype對象,那我們的子類不就相當於獲取了父類的所有對象和方法?
代碼示例伺候:
復制代碼 代碼如下:
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);
}
注意這裡的父類的構造函數需要確保沒有參數。因為即使有構造參數在實現原型繼承的時候你也無法傳遞=.=!
三、混合繼承
顧名思義,混合繼承就是前兩種方式的混合使用了。
復制代碼 代碼如下:
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);
}
使用對象冒充實現了向父類傳遞參數,同時使用原型繼承實現了對公有方法的繼承。
說完了這三中繼承方式了,下面該說到問題的時候了。
你可能會不解,為什麼有了對象冒充,有了原型繼承還要再弄出個什麼混合繼承,對,最重要的也就是這個問題。
1.如果你實際測試一下,你會發現通過對象冒充的方式實現的繼承,子類是無法訪問到父類的原型鏈上的方法的。
2.而用原型繼承,則會把所有的屬性變成共享的屬性,如果你同一個子類實現兩個實例,你會發現你的所有實例共享所有的屬性。
3.但是這肯定是不合適的了。所以就有了混合繼承的方式,讓屬性繼續保持私有,同時讓子類能夠訪問父類的原型鏈的方法。
你可以親自動手試一下,在對象冒充繼承的時候,子類無法訪問父類的原型鏈方法,原型鏈繼承子類的所有實例共享所有父類屬性。這裡我就不寫例子了。