Javascript繼承機(jī)制詳解
學(xué)完了Javascript類和對(duì)象的創(chuàng)建之后,現(xiàn)在總結(jié)一下Javascript繼承機(jī)制的實(shí)現(xiàn)。Javascript并不像Java那樣對(duì)繼承機(jī)制有嚴(yán)格明確的定義,它的實(shí)現(xiàn)方式正如它的變量的使用方式那樣也是十分寬松的,你可以設(shè)計(jì)自己的方法“模仿”繼承機(jī)制的實(shí)現(xiàn)。有以下幾種方法:
1、對(duì)象冒充
<script type="text/javascript">
function classA(str){
this.str=str;
this.printstr=function(){
document.write(this.str);
document.write("<br>");
}
this.getstr=function(){
return this.str;
}
}
function classB(name,str){
//下面這兩句代碼相當(dāng)于將classA代碼體中的內(nèi)容搬到這里
this.newMethod1=classA;
this.newMethod1(str);
//注意,這里的寫法
delete this.newMethod1;
//新的方法和屬性的定義須在刪除了newMethod之后定義,因?yàn)榭赡芨采w超類的屬性和方法。
this.name=name;
this.sayName=function(){
document.write(this.name);
document.write("<br>");
}
}
var a=new classB("Amy","helloworld");
a.printstr();
alert(a.getstr());
a.sayName();
</script>
function定義的代碼塊就相當(dāng)于一個(gè)類,你可以用而且它有this關(guān)鍵字,你可以用this為它添加屬性和方法,上述代碼中有以下兩句:
this.newMethod1=classA;
this.newMethod1(str);
classB中定義了newMethod1變量,它是一個(gè)引用,指向了classA,并且還調(diào)用了classA,這兩句代碼的作用等同于直接將classA代碼塊中的內(nèi)容直接復(fù)制到這里,這樣創(chuàng)建的classB對(duì)像當(dāng)然具有classA的屬性和方法了。對(duì)象冒充還可以實(shí)現(xiàn)多繼承,如下:
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
不過,classY會(huì)覆蓋classX中同名的屬性和方法,如果設(shè)計(jì)沒問題的話,classz也不應(yīng)該繼承具有相同屬性和方法的不同類。
2、利用call()方法
<script type="text/javascript">
function classA(str){
this.str=str;
this.printstr=function(){
document.write(this.str);
document.write("<br>");
}
this.getstr=function(){
return this.str;
}
}
function classB(name,str){
//利用call方法實(shí)現(xiàn)繼承
classA.call(this,str);
this.name=name;
this.sayName=function(){
document.write(this.name);
document.write("<br>");
}
}
var a=new classB("Amy","helloworld");
a.printstr();
alert(a.getstr());
a.sayName();
</script>
call()方法中第一個(gè)參數(shù)傳遞一個(gè)對(duì)象,這里的this指的是當(dāng)前對(duì)象,后面的參數(shù)(可能有多個(gè))是指?jìng)鬟f給調(diào)用call()方法的類(函數(shù))所需要的參數(shù),classA.call()也是相當(dāng)于直接將classA代碼塊中的內(nèi)容直接復(fù)制到這里,classB的對(duì)象同樣可以直接使用classB中的變量和方法。
3、原型鏈
<script type="text/javascript">
function cA(){};
cA.prototype.name="John";
cA.prototype.sayName=function(){
document.write(this.name);
document.write("<br>");
}
function cB(){};
cB.prototype=new cA();
cB.prototype.age=23;
cB.prototype.sayAge=function(){
document.write(this.age);
document.write("<br>");
}
var objB=new cB();
objB.sayAge();
objB.sayName();
document.write("is objB the instance of cA "+(objB instanceof cA));
document.write("<br>");
document.write("is objB the instance of cB "+(objB instanceof cB));
document.write("<br>");
</script>
這里對(duì)類的定義要用prototype關(guān)鍵字,定義function時(shí)不帶有參數(shù),prototype后面的變量或方法相當(dāng)于java中被static修飾后的屬性和方法,是屬于所有對(duì)象的,這里有個(gè)特殊之處:cB.prototype=new cA();該句話相當(dāng)于將cA對(duì)象內(nèi)容復(fù)制給cB,cB還可以追加自己的屬性和方法。
4、混合方法
<script type="text/javascript">
function cA(name){
this.name=name;
};
cA.prototype.sayName=function(){
document.write(this.name);
document.write("<br>");
}
function cB(name,age){
cA.call(this,name);
this.age=age;
};
cB.prototype=new cA();
cB.prototype.sayAge=function(){
document.write(this.age);
document.write("<br>");
}
var objB=new cB("Alan",27);
objB.sayName();
objB.sayAge();
document.write("is objB the instance of cA "+(objB instanceof cA));
document.write("<br>");
document.write("is objB the instance of cB "+(objB instanceof cB));
document.write("<br>");
</script>
這里可以將屬性封裝在類體內(nèi),而方法利用原型方式定義,個(gè)人感覺,這是一個(gè)很好的設(shè)計(jì)方法,利用prototype定義的函數(shù)可以為多個(gè)對(duì)象重用,這里需要注意兩點(diǎn):cB類體內(nèi)有cA.call(this,name);同時(shí)還要將cB原型賦為cB對(duì)象,即:cB.prototype=new cA();cA.call(this,name)同樣相當(dāng)于將cA類塊內(nèi)的代碼復(fù)制于此,后面一句話又將cA的方法添加給cB,同時(shí)cB還可以追加自己的屬性和方法。
以上是本次對(duì)Javascript繼承機(jī)制的總結(jié),不足之處望各位指正批評(píng)。
- Javascript 繼承機(jī)制的實(shí)現(xiàn)
- javascript類繼承機(jī)制的原理分析
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之原型鏈(prototype chaining)的詳解
- Javascript繼承機(jī)制的設(shè)計(jì)思想分享
- 由JavaScript中call()方法引發(fā)的對(duì)面向?qū)ο罄^承機(jī)制call的思考
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解
- JavaScript 繼承機(jī)制的實(shí)現(xiàn)(待續(xù))
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
相關(guān)文章
Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn),復(fù)制節(jié)點(diǎn),插入節(jié)點(diǎn), 刪除節(jié)點(diǎn),替換節(jié)點(diǎn),查找節(jié)點(diǎn),獲取屬性等。。。2008-07-07
parentElement,srcElement的使用小結(jié)
本篇文章主要是對(duì)parentElement,srcElement的使用進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01
關(guān)于IE BUG與字符串截取substr的解決辦法
本篇文章小編為大家介紹一下,關(guān)于IE BUG與字符串截取substr的解決辦法,有需要的朋友可以參考一下2013-04-04

