|
|
復制代碼 代碼如下:
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，并產生了正確的輸出，實際上的執行流程是在類B生成的對象中，不能直接得到方法print，于是在它的prototype屬性中查找對應的方法，這個方案的出發點很好，類B中存在就調用類B的，否則調用它的prototype屬性(類A)中的同名方法。然而有時候我們需要子類的方法調用父類同名的方法，比如類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， 但是很不幸，這樣寫的結果是系統會陷入死循環
因為在執行這個方法時,
復制代碼 代碼如下:
C.prototype.print = function()
{
this.prototype.print.call(this);
alert(this.v3);
}
將會循環的調用以下方法，直到堆棧溢出
復制代碼 代碼如下:
B.prototype.print = function()
{
this.prototype.print.call(this);
alert(this.v2);
}
正確的寫法此時應該變為
復制代碼 代碼如下:
B.prototype.print = function()
{
A.prototype.print.call(this);
alert(this.v3);
}
C.prototype.print = function()
{
B.prototype.print.call(this);
alert(this.v3);
}
但是在繼承關系發生了改變的情況下，需要改動相當多的對父類的引用，這也不是最佳的辦法，在實際應用中，可以考慮使用_super來代替父類的名稱，_this來代替自身的名稱，然后用一個標準的方法將他們替換成[super].prototype或者[this].prototype，從而沒有歧義的調用指定的方法，這才是Javascript的OOP的真正解決方案，相關的代碼如下：
復制代碼 代碼如下:
/*
在使用OOP繼承體系時, 首先要定義類, 最后執行extendsOf初始化類, 使用_super引用父類, 如, 使用_this引用本身的方法,
例如:
function Extend2()
{
_super();
}
Extend2.prototype.setValue = function(value)
{
_super.setValue(value);
alert("Extend2:" + value);
}
Extend2.extendsOf(Extend1);
類繼承樹的根為Object. 注意: 所有使用了轉義的成員函數都必須定義在extendsOf方法調用之前.
對象可以設定一個自動運行的初始化代碼, 以下劃線開頭, 名稱與對象名稱相同, 如
Object._Object = function() {...}
如果對象的初始化代碼不存在, 將自動尋找父對象的初始化代碼, 直到全部查找完畢
復制代碼 代碼如下:
Function.FRBlock = / *("([^"^//]|//")*"|'([^'^//]|//')*'|//([^//^//]|//.)*//) */;
Function.FRSpace = //s+/g;
Function.FRSign = / ?(^|;|:|<|>|/?|,|/.|//|/{|/}|/[|/]|/-|/+|/=|/(|/)|/*|/^|/%|/|) ?/g;
Function.FRRefer = /_(super|this)(/.[^(]+)?/(([^/)]*)/)/;
Function.prototype.FCompile = function(name)
{
//檢查是類的構造函數還是類的屬性, name參數為空表示是構造函數
if (name)
{
//類的屬性不是函數實現, 直接賦值到子類后退出
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 = "";
//進行調用轉義, 將_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函數不區分參數的差異, 構造函數不允許遞歸調用自身
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的調用, 不用編譯
window[cn].prototype[name] = this.prototype[name];
return;
}
else
{
//沒有對父類構造函數的調用時, 自動添加
b = this.FSuperClass.FClassName + ".apply(this,arguments);" + s;
}
//編譯結果賦值
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;
//編譯類的全部函數
this.FCompile();
for (var name in this.prototype)
{
this.FCompile(name);
}
var clazz = window[this.FClassName];
clazz.FSuperClass = superClass;
//復制父類中子類沒有實現的函數和屬性
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;
}
}
}
/*
內置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;
}
JavaScript技術：javascript 原型模式實現OOP的再研究，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
