javascript類式繼承新的嘗試
更新時(shí)間：2012年01月09日 16:35:53 作者：
研究javascript是很有意思的事情，以前我說過，在javascript中的繼承，在于維持prototype指向同一object就行了，確實(shí)這樣
我今天做的嘗試是，如何更它更像其他的語言一樣的使用繼承機(jī)制，多層繼承和更方面的調(diào)用父類的構(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需再刷新一下頁面才能執(zhí)行]
我的extend是這樣寫的:
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;
}
也許你會問，為什么不這樣寫:
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;
}
這樣看似沒有問題，只有一級繼承時(shí)會運(yùn)行的很好，但是，如果多級繼承時(shí)，就會造成死循環(huán)，因?yàn)椋?
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
這個(gè)方法會被一直覆蓋重寫掉，而造成死循環(huán)。
而我的做法是，用類的$supClass屬性指向它所繼承的父類構(gòu)造，在prototype中也有個(gè)$supClass方法,這個(gè)$supClass第一次必須要在類的構(gòu)造器中執(zhí)行，prototype.$supClass在執(zhí)行時(shí)，會通過arguments.callee.caller.$supClass來獲得類的$supClass，然后通過apply在this執(zhí)行。 這樣$subClass就能根據(jù)不同的來，來獲得類的父類構(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需再刷新一下頁面才能執(zhí)行]
我的extend是這樣寫的:
復(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;
}
也許你會問，為什么不這樣寫:
復(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;
}
這樣看似沒有問題，只有一級繼承時(shí)會運(yùn)行的很好，但是，如果多級繼承時(shí)，就會造成死循環(huán)，因?yàn)椋?
復(fù)制代碼 代碼如下:
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
這個(gè)方法會被一直覆蓋重寫掉，而造成死循環(huán)。
而我的做法是，用類的$supClass屬性指向它所繼承的父類構(gòu)造，在prototype中也有個(gè)$supClass方法,這個(gè)$supClass第一次必須要在類的構(gòu)造器中執(zhí)行，prototype.$supClass在執(zhí)行時(shí)，會通過arguments.callee.caller.$supClass來獲得類的$supClass，然后通過apply在this執(zhí)行。 這樣$subClass就能根據(jù)不同的來，來獲得類的父類構(gòu)造器并執(zhí)行。
相關(guān)文章
繼承,通俗地說,之前你寫過一些類,這些類中有一些是而你現(xiàn)在要寫的類的功能的子集或者基本相同,那么你不用完全重新寫一個(gè)新的類,你可以把之前寫的類拿過來使用.這樣的一種代碼重用過程就叫做繼承2011-05-05
這里用的是Ext core3.0，Ext中用Ext.extend來定義一個(gè)類（當(dāng)然它更多用來擴(kuò)展一個(gè)類），Ext整個(gè)框架各種控件如Panel，MessageBox等都是用Ext.extend方法來擴(kuò)展。這里僅僅用它來定義一個(gè)最簡單的類。2009-07-07
下面對代碼的封裝是比較常用的，也比較好理解，只有先掌握了這些，才能更深入的了解面向?qū)τ谝约癹son格式的定義方法。2010-04-04
javascript 混合的構(gòu)造函數(shù)和原型方式，動態(tài)原型方式
JS編程中最常用兩種對象類定義的方式。不管是利用下面2種方式的那一種，都可以達(dá)到相同的效果！2009-12-12
Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特權(quán)方法)
最近在網(wǎng)上盾一些JS面向?qū)ο蟮臇|西。把其他高手們總結(jié)的東西，加上自己的理解，總結(jié)一下2012-05-05
javascript 面向?qū)ο蟮腏avaScript類
這一節(jié)來說下緊接著的一個(gè)概念——類。雖然JavaScript中沒有class關(guān)鍵字，但作為開發(fā)人員我們一定要有這個(gè)思想。在C#中類可以分為實(shí)例類和靜態(tài)類，JavaScript亦然。2010-05-05
自從使用了jQuery以后，對它的鏈?zhǔn)讲僮骱苁且蕾?，以至于常常覺得其他庫不好用。。2010-04-04
這兩天幫同學(xué)做秒殺網(wǎng)，打算將前臺和后臺徹底分離，僅用ajax通信。這樣就免不了大量的使用javascript，于是發(fā)現(xiàn)，js果然是難學(xué)難用。2011-06-06
javascript中的類是用函數(shù)function表示的2010-05-05
繼承是面向?qū)ο笾斜炔豢缮俚奶匦裕玧avascript中并沒有繼承的概念機(jī)制，但我們可以自己來實(shí)現(xiàn)這種功能。2011-02-02