我今天做的嘗試是，如何更它更像其他的語言一樣的使用繼承機制，多層繼承和更方面的調用父類的構造。
我希望達到的效果：
複製代碼 代碼如下:
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
執行個體：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> js繼承 </title> </head> <body> <script> 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 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 </script></body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
我的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;
}
這樣看似沒有問題，只有一級繼承時會啟動並執行很好，但是，如果多級繼承時，就會造成死迴圈，因為：
複製代碼 代碼如下:
subClass.prototype.$supClass = function(){
supClass.apply(this,arguments);
};
這個方法會被一直覆蓋重寫掉，而造成死迴圈。
而我的做法是，用類的$supClass屬性指向它所繼承的父類構造，在prototype中也有個$supClass方法,這個$supClass第一次必須要在類的構造器中執行，prototype.$supClass在執行時，會通過arguments.callee.caller.$supClass來獲得類的$supClass，然後通過apply在this執行。 這樣$subClass就能根據不同的來，來獲得類的父類構造器並執行。
