javascript 原型模式實現(xiàn)OOP的再研究

更新時間：2009年04月09日 18:15:13 作者：

目前網(wǎng)絡上有關(guān)javascript實現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下

function A() 
{ 
this.v1 = 10; 
} 
A.prototype.print = function() 
{ 
alert(this.v1); 
} 
function B() 
{ 
} 
B.prototype = new A(); 
new B().print(); 

運行這段代碼輸出是10，看起來好像是類B繼承了類A的方法print，并產(chǎn)生了正確的輸出，實際上的執(zhí)行流程是在類B生成的對象中，不能直接得到方法print，于是在它的prototype屬性中查找對應的方法，這個方案的出發(fā)點很好，類B中存在就調(diào)用類B的，否則調(diào)用它的prototype屬性(類A)中的同名方法。然而有時候我們需要子類的方法調(diào)用父類同名的方法，比如類B改為

復制代碼代碼如下:

function B() 
{ 
this.v2 = 15; 
} 
B.prototype = new A(); 
B.prototype.print = function() 
{ 
this.prototype.print.call(this); 
alert(this.v2); 
} 
new B().print(); 

其中，this.prototype.print就是類A對應的print方法，輸出是10和15，好像解決了問題，實際上不然，我們再繼承一層

復制代碼代碼如下:

function C() 
{ 
this.v3 = 20; 
} 
C.prototype = new B(); 
C.prototype.print = function() 
{ 
this.prototype.print.call(this); 
alert(this.v3); 
} 
new C().print(); 

我們期待的輸出依次是10, 15, 20，但是很不幸，這樣寫的結(jié)果是系統(tǒng)會陷入死循環(huán)
因為在執(zhí)行這個方法時,

復制代碼代碼如下:

C.prototype.print = function() 
{ 
this.prototype.print.call(this); 
alert(this.v3); 
} 

將會循環(huán)的調(diào)用以下方法，直到堆棧溢出

復制代碼代碼如下:

B.prototype.print = function() 
{ 
this.prototype.print.call(this); 
alert(this.v2); 
} 

正確的寫法此時應該變?yōu)?

復制代碼代碼如下:

B.prototype.print = function() 
{ 
A.prototype.print.call(this); 
alert(this.v3); 
} 
C.prototype.print = function() 
{ 
B.prototype.print.call(this); 
alert(this.v3); 
} 

但是在繼承關(guān)系發(fā)生了改變的情況下，需要改動相當多的對父類的引用，這也不是最佳的辦法，在實際應用中，可以考慮使用_super來代替父類的名稱，_this來代替自身的名稱，然后用一個標準的方法將他們替換成[super].prototype或者[this].prototype，從而沒有歧義的調(diào)用指定的方法，這才是javascript的OOP的真正解決方案，相關(guān)的代碼如下：

復制代碼代碼如下:

/* 
在使用OOP繼承體系時, 首先要定義類, 最后執(zhí)行extendsOf初始化類, 使用_super引用父類, 如, 使用_this引用本身的方法, 
例如: 
function Extend2() 
{ 
_super(); 
} 
Extend2.prototype.setValue = function(value) 
{ 
_super.setValue(value); 
alert("Extend2:" + value); 
} 
Extend2.extendsOf(Extend1); 

類繼承樹的根為Object. 注意: 所有使用了轉(zhuǎn)義的成員函數(shù)都必須定義在extendsOf方法調(diào)用之前.
對象可以設定一個自動運行的初始化代碼, 以下劃線開頭, 名稱與對象名稱相同, 如
Object._Object = function() {...}
如果對象的初始化代碼不存在, 將自動尋找父對象的初始化代碼, 直到全部查找完畢

復制代碼代碼如下:

Function.FRBlock = / *("([^"^\\]|\\")*"|'([^'^\\]|\\')*'|\/([^\/^\\]|\\.)*\/) */; 
Function.FRSpace = /\s+/g; 
Function.FRSign = / ?(^|;|:|<|>|\?|,|\.|\/|\{|\}|\[|\]|\-|\+|\=|\(|\)|\*|\^|\%|\|) ?/g; 
Function.FRRefer = /_(super|this)(\.[^(]+)?\(([^\)]*)\)/; 
Function.prototype.FCompile = function(name) 
{ 
//檢查是類的構(gòu)造函數(shù)還是類的屬性, name參數(shù)為空表示是構(gòu)造函數(shù) 
if (name) 
{ 
//類的屬性不是函數(shù)實現(xiàn), 直接賦值到子類后退出 
if (typeof this.prototype[name] != "function") 
{ 
window[this.FClassName].prototype[name] = this.prototype[name]; 
return; 
} 
var s = this.prototype[name].toString(); 
} 
else 
{ 
var s = this.toString(); 
} 
var b = ""; 
var r; 
//過濾空白字符 
while (r = Function.FRBlock.exec(s)) 
{ 
s = RegExp.rightContext; 
b += RegExp.leftContext.replace(Function.FRSpace, " ").replace(Function.FRSign, "$1") + r[1]; 
} 
b += s.replace(Function.FRSpace, " ").replace(Function.FRSign, "$1"); 
var i = b.indexOf("("); 
var j = b.indexOf(")", i); 
if (!name) 
{ 
this.FClassName = b.substring(9, i); 
} 
var cn = this.FClassName; 
var arg = b.substring(i + 1, j); 
s = b.substring(j + 2, b.length - 1); 
b = ""; 
//進行調(diào)用轉(zhuǎn)義, 將_super,_this替換為指定的方法 
for (var n = 0; r = Function.FRRefer.exec(s); n++) 
{ 
if (r[2]) 
{ 
if (!name && !n) 
{ 
b = this.FSuperClass.FClassName + ".apply(this,arguments);"; 
} 
r[2] = ".prototype" + r[2]; 
} 
else if (r[1] == "this") 
{ 
//JS函數(shù)不區(qū)分參數(shù)的差異, 構(gòu)造函數(shù)不允許遞歸調(diào)用自身 
throw "Constructor call mustn't be \"_this();\" in a constructor"; 
} 
else if (name || RegExp.leftContext) 
{ 
throw "Constructor call must be the first statement in a constructor"; 
} 
else 
{ 
r[2] = ""; 
} 
s = RegExp.rightContext; 
b += RegExp.leftContext + (r[1] == "this" ? cn : this.FSuperClass.FClassName) + r[2] + (r[3] ? ".call(this," + r[3] + ")" : ".apply(this,arguments)"); 
} 
if (n) 
{ 
b += s; 
} 
else if (name) 
{ 
//沒有針對_this,_super的調(diào)用, 不用編譯 
window[cn].prototype[name] = this.prototype[name]; 
return; 
} 
else 
{ 
//沒有對父類構(gòu)造函數(shù)的調(diào)用時, 自動添加 
b = this.FSuperClass.FClassName + ".apply(this,arguments);" + s; 
} 
//編譯結(jié)果賦值 
if (name) 
{ 
eval(cn + ".prototype." + name + "=function(" + arg + "){" + b + "}"); 
} 
else 
{ 
eval(cn + "=function(" + arg + "){" + b + ";if(this.constructor==" + cn + ")" + cn + "._" + cn + ".apply(this,arguments);}"); 
window[cn].FClassName = cn; 
} 
} 
Function.prototype.extendsOf = function(superClass) 
{ 
this.FSuperClass = superClass; 
//編譯類的全部函數(shù) 
this.FCompile(); 
for (var name in this.prototype) 
{ 
this.FCompile(name); 
} 
var clazz = window[this.FClassName]; 
clazz.FSuperClass = superClass; 
//復制父類中子類沒有實現(xiàn)的函數(shù)和屬性 
var prototype = clazz.prototype; 
for (var name in superClass.prototype) 
{ 
if (!prototype[name]) 
{ 
prototype[name] = superClass.prototype[name]; 
} 
} 
//復制初始化方法, 形式如Object._Object 
for (var c = this; ; c = c.FSuperClass) 
{ 
if (c["_" + c.FClassName]) 
{ 
clazz["_" + clazz.FClassName] = c["_" + c.FClassName]; 
return; 
} 
} 
} 
/* 
內(nèi)置Object類為OOP提供的支持 
*/ 
Object.FClassName = "Object"; 
Object._Object = Function.Instance; 
Object.prototype.instanceOf = function(clazz) 
{ 
for (var c = this.constructor; c; c = c.FSuperClass) 
{ 
if (c === clazz) 
{ 
return true; 
} 
} 
return false; 
} 