JavaScript 繼承機(jī)制的實(shí)現(xiàn)(待續(xù))
更新時(shí)間:2010年05月18日 01:18:26 作者:
JavaScript繼承機(jī)制的實(shí)現(xiàn),后期會有一些補(bǔ)充。
1.對象冒充
原理:構(gòu)造函數(shù)使用this關(guān)鍵字給所有屬性和方法賦值(即采用類聲明的構(gòu)造函數(shù)方式)。
因?yàn)闃?gòu)造函數(shù)只是一個(gè)函數(shù),所以可使ClassA的構(gòu)造函數(shù)成為ClassB的方法,然后調(diào)用它。ClassB就會收到ClassA的構(gòu)造函數(shù)中定義的屬性和方法。
例如:
下面方式定義的ClassA和ClassB:
function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
};
}
function ClassB(sColor){
}
關(guān)鍵字this引用的是構(gòu)造函數(shù)當(dāng)前創(chuàng)建的對象。
不過在這個(gè)方法中國,this指向的是所屬的對象。這個(gè)原理把ClassA作為常規(guī)函數(shù)來建立繼承機(jī)制,而不是作為構(gòu)造行數(shù)。
如下使用構(gòu)造函數(shù)ClassB可以實(shí)現(xiàn)繼承機(jī)制:
function ClassB(sColor){
this.newMethod=ClassA;
this.newMethod(sColor);
delete this.newMethod;
}
這段代碼中,為(但我覺得這里應(yīng)該是"把")ClassA賦予了方法newMethod(記住函數(shù)名只是指向它的指針)。然后調(diào)用該方法,傳遞給它的是ClassB的構(gòu)造函數(shù)的參數(shù)sColor。最后一行代碼刪除了對ClassA的引用,這樣以后就不能再調(diào)用它。
所有的新屬性和新方法都必須刪除了新方法的代碼行后定義。否則,可能會覆蓋超類的相關(guān)屬性和方法:
function ClassB(sColor,sName){
this.newMethod=classA;
this.newMethod(sColor);
delete this.newMethod;
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
運(yùn)行下面的例子:
var objA=new ClassA("red");
var objB=new ClassB("blue","Nicholas");
objA.sayColor();//outputs "red"
objB.sayColor();//outputs "blue"
objB.sayName(); //outputs "Nicholas"
例如,如果存在兩個(gè)類ClassX和ClassY,ClassZ想繼承這兩個(gè)類,可以使用下面的代碼:
function ClassZ(){
this.newMethod=ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod=ClassY;
this.newMethod();
delete this.newMethod;
}
這里存在一個(gè)弊端,如果ClassX和ClassY具有同名的屬性或方法,ClassY具有高優(yōu)先級,因?yàn)樗鼜暮竺胬^承。除了這一點(diǎn)小問題外,用對象冒充實(shí)現(xiàn)多繼承機(jī)制輕而易舉。
由于這種繼承方式的流行,ECMAScript的第三版為Function對象加入了兩個(gè)新方法,即call()和apply()。
2.call()方法
call()方法與經(jīng)典的對象冒充方法最相似的方法。它的第一個(gè)參數(shù)用作this的對象。其他參數(shù)都直接傳遞給函數(shù)自身。例如:
function sayColor(sPrefix,sSuffix){
alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color="red";
//outputs "The color is red,a very nice color indeed."
sayColor.call(obj,"The color is ",", a very nice color indeed.")
在這個(gè)例子中,函數(shù)sayColor()在對象外定義,即使它不屬于任何對象,也可以引用關(guān)鍵字this。對象的obj的color屬性等于"red"。調(diào)用call()方法時(shí),第一個(gè)參數(shù)是obj,說明
應(yīng)該賦予sayColor()函數(shù)中的this關(guān)鍵字的值是obj。第二個(gè)和第三個(gè)參數(shù)是字符串。它們與sayColor()函數(shù)中的參數(shù)prefix和suffix匹配,最后生成消息"The color is red, a very nice color indeed."
要與繼承機(jī)制的對象冒充方法一起使用該方法,只需將前三行的賦值、調(diào)用和刪除代碼替換即可:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
Class.call(this,sColor);
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
這里,想讓ClassA中的關(guān)鍵字this等于新創(chuàng)建的ClassB對象,因此this是第一個(gè)參數(shù)。第二個(gè)參數(shù)sColor對兩個(gè)類來說都是唯一的參數(shù)。
3.apply()方法
apply()方法有兩個(gè)參數(shù),用作this的對象和要傳遞給函數(shù)的參數(shù)和數(shù)組。例如:
function sayColor(sPrefix,sSuffix){
alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color="red";
//outputs "The Color is red,a very nice color indeed."
sayColor.apply(obj,new Array("The Color is ",",a very nice color indeed."));
這個(gè)例子與前面的例子相同,只是現(xiàn)在調(diào)用的是apply()方法。調(diào)用apply()方法時(shí),第一個(gè)參數(shù)仍是obj,說明應(yīng)該賦予sayColor()中的this關(guān)鍵字值是obj。第二個(gè)參數(shù)是由兩個(gè)字符串組成的數(shù)組,與sayColor()的參數(shù)prefix和suffix匹配。生成的消息仍是
"The Color is red,a nice color indeed."
該方法也用于替換前三行的賦值、調(diào)用和刪除新方法的代碼:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,new Array(sColor));
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
同樣的,第一個(gè)參數(shù)仍是this。第二個(gè)參數(shù)是只有一個(gè)值color的數(shù)組??梢园袰lassB的整個(gè)arguments對象作為第二個(gè)參數(shù)傳遞給apply()方法:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,arguments);
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
當(dāng)然,只有超類中的參數(shù)順序與子類中的參數(shù)順序完全一致時(shí)才可以傳遞參數(shù)對象。如果不是,就必須創(chuàng)建一個(gè)單獨(dú)的數(shù)組,按照正確的順序放置參數(shù)。此外,還可以使用call()方法。
原理:構(gòu)造函數(shù)使用this關(guān)鍵字給所有屬性和方法賦值(即采用類聲明的構(gòu)造函數(shù)方式)。
因?yàn)闃?gòu)造函數(shù)只是一個(gè)函數(shù),所以可使ClassA的構(gòu)造函數(shù)成為ClassB的方法,然后調(diào)用它。ClassB就會收到ClassA的構(gòu)造函數(shù)中定義的屬性和方法。
例如:
下面方式定義的ClassA和ClassB:
復(fù)制代碼 代碼如下:
function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
};
}
function ClassB(sColor){
}
關(guān)鍵字this引用的是構(gòu)造函數(shù)當(dāng)前創(chuàng)建的對象。
不過在這個(gè)方法中國,this指向的是所屬的對象。這個(gè)原理把ClassA作為常規(guī)函數(shù)來建立繼承機(jī)制,而不是作為構(gòu)造行數(shù)。
如下使用構(gòu)造函數(shù)ClassB可以實(shí)現(xiàn)繼承機(jī)制:
復(fù)制代碼 代碼如下:
function ClassB(sColor){
this.newMethod=ClassA;
this.newMethod(sColor);
delete this.newMethod;
}
這段代碼中,為(但我覺得這里應(yīng)該是"把")ClassA賦予了方法newMethod(記住函數(shù)名只是指向它的指針)。然后調(diào)用該方法,傳遞給它的是ClassB的構(gòu)造函數(shù)的參數(shù)sColor。最后一行代碼刪除了對ClassA的引用,這樣以后就不能再調(diào)用它。
所有的新屬性和新方法都必須刪除了新方法的代碼行后定義。否則,可能會覆蓋超類的相關(guān)屬性和方法:
復(fù)制代碼 代碼如下:
function ClassB(sColor,sName){
this.newMethod=classA;
this.newMethod(sColor);
delete this.newMethod;
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
運(yùn)行下面的例子:
復(fù)制代碼 代碼如下:
var objA=new ClassA("red");
var objB=new ClassB("blue","Nicholas");
objA.sayColor();//outputs "red"
objB.sayColor();//outputs "blue"
objB.sayName(); //outputs "Nicholas"
例如,如果存在兩個(gè)類ClassX和ClassY,ClassZ想繼承這兩個(gè)類,可以使用下面的代碼:
復(fù)制代碼 代碼如下:
function ClassZ(){
this.newMethod=ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod=ClassY;
this.newMethod();
delete this.newMethod;
}
這里存在一個(gè)弊端,如果ClassX和ClassY具有同名的屬性或方法,ClassY具有高優(yōu)先級,因?yàn)樗鼜暮竺胬^承。除了這一點(diǎn)小問題外,用對象冒充實(shí)現(xiàn)多繼承機(jī)制輕而易舉。
由于這種繼承方式的流行,ECMAScript的第三版為Function對象加入了兩個(gè)新方法,即call()和apply()。
2.call()方法
call()方法與經(jīng)典的對象冒充方法最相似的方法。它的第一個(gè)參數(shù)用作this的對象。其他參數(shù)都直接傳遞給函數(shù)自身。例如:
復(fù)制代碼 代碼如下:
function sayColor(sPrefix,sSuffix){
alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color="red";
//outputs "The color is red,a very nice color indeed."
sayColor.call(obj,"The color is ",", a very nice color indeed.")
在這個(gè)例子中,函數(shù)sayColor()在對象外定義,即使它不屬于任何對象,也可以引用關(guān)鍵字this。對象的obj的color屬性等于"red"。調(diào)用call()方法時(shí),第一個(gè)參數(shù)是obj,說明
應(yīng)該賦予sayColor()函數(shù)中的this關(guān)鍵字的值是obj。第二個(gè)和第三個(gè)參數(shù)是字符串。它們與sayColor()函數(shù)中的參數(shù)prefix和suffix匹配,最后生成消息"The color is red, a very nice color indeed."
要與繼承機(jī)制的對象冒充方法一起使用該方法,只需將前三行的賦值、調(diào)用和刪除代碼替換即可:
復(fù)制代碼 代碼如下:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
Class.call(this,sColor);
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
這里,想讓ClassA中的關(guān)鍵字this等于新創(chuàng)建的ClassB對象,因此this是第一個(gè)參數(shù)。第二個(gè)參數(shù)sColor對兩個(gè)類來說都是唯一的參數(shù)。
3.apply()方法
apply()方法有兩個(gè)參數(shù),用作this的對象和要傳遞給函數(shù)的參數(shù)和數(shù)組。例如:
復(fù)制代碼 代碼如下:
function sayColor(sPrefix,sSuffix){
alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color="red";
//outputs "The Color is red,a very nice color indeed."
sayColor.apply(obj,new Array("The Color is ",",a very nice color indeed."));
這個(gè)例子與前面的例子相同,只是現(xiàn)在調(diào)用的是apply()方法。調(diào)用apply()方法時(shí),第一個(gè)參數(shù)仍是obj,說明應(yīng)該賦予sayColor()中的this關(guān)鍵字值是obj。第二個(gè)參數(shù)是由兩個(gè)字符串組成的數(shù)組,與sayColor()的參數(shù)prefix和suffix匹配。生成的消息仍是
"The Color is red,a nice color indeed."
該方法也用于替換前三行的賦值、調(diào)用和刪除新方法的代碼:
復(fù)制代碼 代碼如下:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,new Array(sColor));
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
同樣的,第一個(gè)參數(shù)仍是this。第二個(gè)參數(shù)是只有一個(gè)值color的數(shù)組??梢园袰lassB的整個(gè)arguments對象作為第二個(gè)參數(shù)傳遞給apply()方法:
復(fù)制代碼 代碼如下:
function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,arguments);
this.name=sName;
this.sayName=function(){
alert(this.name);
};
}
當(dāng)然,只有超類中的參數(shù)順序與子類中的參數(shù)順序完全一致時(shí)才可以傳遞參數(shù)對象。如果不是,就必須創(chuàng)建一個(gè)單獨(dú)的數(shù)組,按照正確的順序放置參數(shù)。此外,還可以使用call()方法。
您可能感興趣的文章:
- Javascript 繼承機(jī)制的實(shí)現(xiàn)
- javascript類繼承機(jī)制的原理分析
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之原型鏈(prototype chaining)的詳解
- Javascript繼承機(jī)制的設(shè)計(jì)思想分享
- 由JavaScript中call()方法引發(fā)的對面向?qū)ο罄^承機(jī)制call的思考
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
- Javascript繼承機(jī)制詳解
相關(guān)文章
JavaScript 常見對象類創(chuàng)建代碼與優(yōu)缺點(diǎn)分析
這幾種javascript類定義方式中,最常用的是雜合prototype/constructor 和 動態(tài)prototype方式。2009-12-12學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語,學(xué)習(xí)面向?qū)ο笤O(shè)計(jì)的朋友可以參考下。2010-11-11js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好,大家給予了回復(fù),感覺不錯(cuò),特分享給大家。2011-10-10JavaScript 構(gòu)造函數(shù) 面相對象學(xué)習(xí)必備知識
關(guān)于JavaScript構(gòu)造函數(shù),如今出現(xiàn)了很多JavaScript的框架,例如jQuery、Ext等等這些,這些將JavaScript作為一種面向?qū)ο蟮恼Z言進(jìn)行編程,那么JavaScript到底是怎么樣實(shí)現(xiàn)面向?qū)ο蟮囊恍┨卣鞯哪?,首先,我們來看看JavaScript怎么樣來定義一個(gè)構(gòu)造函數(shù)。2010-06-06

一實(shí)用的實(shí)現(xiàn)table排序的Javascript類庫
一實(shí)用的實(shí)現(xiàn)table排序的Javascript類庫...
2007-09-09