javascript類(lèi)式繼承新的嘗試
更新時(shí)間:2012年01月09日 16:35:53 作者:
研究javascript是很有意思的事情,以前我說(shuō)過(guò),在javascript中的繼承,在于維持prototype指向同一object就行了,確實(shí)這樣
我今天做的嘗試是,如何更它更像其他的語(yǔ)言一樣的使用繼承機(jī)制,多層繼承和更方面的調(diào)用父類(lèi)的構(gòu)造。
我希望達(dá)到的效果:
function A(){
alert('a');
}
function B(){
this.$supClass();
alert('b');
}
extend(B,A);
function C(){
this.$supClass();
alert('c');
}
extend(C,B);
var c = new C();
alert( c instanceof A ); //true
alert( c instanceof B ); //true
alert( c instanceof C ); //true
實(shí)例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
我的extend是這樣寫(xiě)的:
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
也許你會(huì)問(wèn),為什么不這樣寫(xiě):
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
subClass.prototype.constructor = subClass;
return subClass;
}
這樣看似沒(méi)有問(wèn)題,只有一級(jí)繼承時(shí)會(huì)運(yùn)行的很好,但是,如果多級(jí)繼承時(shí),就會(huì)造成死循環(huán),因?yàn)椋?
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
這個(gè)方法會(huì)被一直覆蓋重寫(xiě)掉,而造成死循環(huán)。
而我的做法是,用類(lèi)的$supClass屬性指向它所繼承的父類(lèi)構(gòu)造,在prototype中也有個(gè)$supClass方法,這個(gè)$supClass第一次必須要在類(lèi)的構(gòu)造器中執(zhí)行,prototype.$supClass在執(zhí)行時(shí),會(huì)通過(guò)arguments.callee.caller.$supClass來(lái)獲得類(lèi)的$supClass,然后通過(guò)apply在this執(zhí)行。 這樣$subClass就能根據(jù)不同的來(lái),來(lái)獲得類(lèi)的父類(lèi)構(gòu)造器并執(zhí)行。
我希望達(dá)到的效果:
復(fù)制代碼 代碼如下:
function A(){
alert('a');
}
function B(){
this.$supClass();
alert('b');
}
extend(B,A);
function C(){
this.$supClass();
alert('c');
}
extend(C,B);
var c = new C();
alert( c instanceof A ); //true
alert( c instanceof B ); //true
alert( c instanceof C ); //true
實(shí)例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
我的extend是這樣寫(xiě)的:
復(fù)制代碼 代碼如下:
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
也許你會(huì)問(wèn),為什么不這樣寫(xiě):
復(fù)制代碼 代碼如下:
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
subClass.prototype.constructor = subClass;
return subClass;
}
這樣看似沒(méi)有問(wèn)題,只有一級(jí)繼承時(shí)會(huì)運(yùn)行的很好,但是,如果多級(jí)繼承時(shí),就會(huì)造成死循環(huán),因?yàn)椋?
復(fù)制代碼 代碼如下:
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
這個(gè)方法會(huì)被一直覆蓋重寫(xiě)掉,而造成死循環(huán)。
而我的做法是,用類(lèi)的$supClass屬性指向它所繼承的父類(lèi)構(gòu)造,在prototype中也有個(gè)$supClass方法,這個(gè)$supClass第一次必須要在類(lèi)的構(gòu)造器中執(zhí)行,prototype.$supClass在執(zhí)行時(shí),會(huì)通過(guò)arguments.callee.caller.$supClass來(lái)獲得類(lèi)的$supClass,然后通過(guò)apply在this執(zhí)行。 這樣$subClass就能根據(jù)不同的來(lái),來(lái)獲得類(lèi)的父類(lèi)構(gòu)造器并執(zhí)行。
您可能感興趣的文章:
- JS繼承--原型鏈繼承和類(lèi)式繼承
- JavaScript類(lèi)和繼承 constructor屬性
- 淺談nodejs中的類(lèi)定義和繼承的套路
- JavaScript類(lèi)和繼承 this屬性使用說(shuō)明
- javascript類(lèi)繼承機(jī)制的原理分析
- JavaScript中的類(lèi)繼承
- js中實(shí)現(xiàn)多態(tài)采用和繼承類(lèi)似的方法
- js類(lèi)式繼承的具體實(shí)現(xiàn)方法
- JavaScript類(lèi)和繼承 prototype屬性
- JavaScript OOP類(lèi)與繼承
- JavaScript類(lèi)的繼承操作實(shí)例總結(jié)
相關(guān)文章
Javascript面向?qū)ο笤O(shè)計(jì)一 工廠模式
工廠模式抽象了創(chuàng)建具體對(duì)象的過(guò)程,但是在ECMAScript中無(wú)法創(chuàng)建類(lèi),所以就使用一種函數(shù)來(lái)封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)2011-12-12JavaScript面向?qū)ο?極簡(jiǎn)主義法minimalist approach)
荷蘭程序員 Gabor de Mooij 提出了一種比 Object.create ()更好的新方法,他稱(chēng)這種方法為極簡(jiǎn)主義法(minimalist approach)。這也是我推薦的方法2012-07-07js面向?qū)ο?多種創(chuàng)建對(duì)象方法小結(jié)
js面向?qū)ο?多種創(chuàng)建對(duì)象方法小結(jié),需要的朋友可以參考下2012-05-05JavaScript 面向?qū)ο缶幊蹋?) 定義類(lèi)
最近這一段時(shí)間事情太多了,沒(méi)有時(shí)間再繼續(xù)寫(xiě),幸好這兩天有點(diǎn)小閑,先小寫(xiě)一下JavaScript中面向?qū)ο笠恢型扑]的方法。2010-05-05JavaScript 基于原型的對(duì)象(創(chuàng)建、調(diào)用)
在我們寫(xiě)js代碼的時(shí)候,內(nèi)部對(duì)象是不可避免的要引用,但是光靠這些對(duì)象是不夠的,所以需要我們自己定義對(duì)象,這個(gè)時(shí)候通常用到的對(duì)象是第三種,即基于原型的對(duì)象,下面就如何創(chuàng)建自己的對(duì)象,定義對(duì)象的方法、屬性,調(diào)用對(duì)象給出詳細(xì)的說(shuō)明。2009-10-10JavaScript的單例模式 (singleton in Javascript)
JavaScript的單例模式 (singleton in Javascript)2010-06-06討論javascript(一)工廠方式 js面象對(duì)象的定義方法
看《javascript高級(jí)程序設(shè)計(jì)》有感2009-12-12