快捷導(dǎo)航

JavaScript constructor和instanceof,JSOO中的一對歡喜冤家

更新時間：2009年05月25日 02:55:12 作者：

現(xiàn)在流行面向?qū)ο?JavaScript當(dāng)然要迎頭趕上. 有說法JavaScript就是徹頭徹尾的OO語言,但我覺得JavaScript實現(xiàn)面向?qū)ο蟮某绦蜻€是有諸多不便的.

至少每個嘗試JavaScriptOO的程序員都花費很多精力用在面向?qū)ο髾C制的模擬上而非業(yè)務(wù)本身.
這對Java,C++甚至Php的開發(fā)者來講都是難以想象的.
更糟糕的是模擬OO對于JavaScript高級程序員都有著邪惡的吸引.
因為干這個事兒超然于業(yè)務(wù)之上,有種創(chuàng)造新編程語言一般的快感,可以令I(lǐng)Q盡情揮灑.
正如前些年大家都想把自個網(wǎng)站的common.js寫成個框架一樣.直到Y(jié)UI,JQuery等等的強勢推出才稍有平息.
然而雖然各個框架都有對JavaScriptOO模擬,但還未到有誰誰誰可以一桶糨糊的時候吧.
或許江湖就不需要的霸主出現(xiàn),抑或大家只要等到JS2.0+就好了.
如果說可以new就是面向?qū)ο?那顯然JavaScript在這方面是非常不錯的.

復(fù)制代碼代碼如下:

function Person(name){ 
this.name = name; 
} 
var lenel = new person("lenel"); 
alert(lenel.constructor === Person); 
alert(lenel instanceof Person === true); 
alert(lenel instanceof Object === true);

到此為止,一切都很和諧.
對象的constructor正如字面上的意義指向構(gòu)造它的Person.
對象是構(gòu)造它的Person的一個實例(instance).
所有對象都是Object的實例,像極了Java.
JavaScript提供原型(prototype)的方式來實現(xiàn)方法拓展和繼承

復(fù)制代碼代碼如下:

Person.prototype.getName = function(){ 
return this.name 
};

這樣定義了之后所有對象都具有了getName的方法.
當(dāng)然也可以將寫在對象構(gòu)造時

復(fù)制代碼代碼如下:

function Person(name){ 
this.name = name; 
this.getName = function(){ 
return this.name; 
}; 
}

但是這種做法不僅是帶來額外性能損耗這點瑕疵,也不僅是帶來了可以訪問私有變量的特權(quán).
它與使用prototype的寫法還會其他有不同之處,不過這不是本文的重點.
接下來,我們想到繼承,很常見的寫法是這樣的.

復(fù)制代碼代碼如下:

function Stuff(name,id){ 
this.name = name; 
this.id = id; 
} 
Stuff.prototype = new Person(); 
var piupiu = new Stuff("piupiu","007"); 
alert(piupiu.getName());

非常好,繼承了getName方法;
考察下instanceof

復(fù)制代碼代碼如下:

alert(piupiu instanceof Stuff === true); 
alert(piupiu instanceof Person === true); 

非常好,說明了Stuff和Person是有關(guān)系的.piupiu是它倆的實例,非常Java.
接下來再考察下constructor

復(fù)制代碼代碼如下:

alert(piupiu.constructor === Stuff);//false 
test(piupiu.constructor === Person);//true

問題出現(xiàn)了明明new的Stuff為啥constructor卻是Person,
在這兒將道理也是強詞奪理,我們只好記住結(jié)論
結(jié)論:對象的constructor屬性并非指向其構(gòu)造器,而是指向其構(gòu)造器的prototype屬性的constructor屬性
文字功底太差,自己讀過都覺得沒說清楚
放在這里:
對象piupiu的constructor屬性指向的是其構(gòu)造器Stuff的prototype屬性的constructor屬性
因為Stuff.prototype = new Person();
所以Stuff.prototype.constructor === Person.
所以piupiu.consturctor === Person.
以上的結(jié)論不僅僅在對象繼承的時候才出現(xiàn),在定義對象時

復(fù)制代碼代碼如下:

function Student(name){ 
this.name = name; 
} 
Student.prototype = { 
getName:function(){ 
return this.name; 
}, 
setName:function(name){ 
this.name = name; 
} 
}

如果方法比較多,常常會這樣寫,看起來規(guī)矩一些.
其實這種寫法同樣犧牲了constructor

復(fù)制代碼代碼如下:

var moen = new Student("moen"); 
alert(moen.constructor === Student);//false 
alert(moen.constructor === Object);//true 

因為在{}相當(dāng)于new Object(),所以根據(jù)上面的結(jié)論prototype={}時,constructor變了.
保衛(wèi)constructor!繼承時我們用一個循環(huán)來把父類的方法copyto子類

復(fù)制代碼代碼如下:

function Stuff1(name,id){ 
this.name = name; 
this.id = id; 
} 
for(var fn in Person.prototype){ 
Stuff1.prototype[fn] = Person.prototype[fn]; 
} 
var piupiu1 = new Stuff1("piupiu1","008"); 
alert(piupiu1.getName() === "piupiu1"); 
alert(piupiu1.constructor === Stuff1); 

It works!當(dāng)我們興沖沖的把父類的方法都繼承下來的時候,我們卻丟失了父子關(guān)系.

復(fù)制代碼代碼如下:

alert(piupiu1 instanceof Stuff1 === true);//true 
alert(piupiu1 instanceof Person === true);//false 

顯然,我們沒有說過Stuff1是繼承至Person啊,只一個for循環(huán)能說明什么呢.
這好像是一對矛盾..顧此必失彼.
所以叻,深入使用對象的時候,甚至你一不小心,都會讓instantceof和constructor丟去字面的含義.
所以叻,在使用框架的時候,如果提供了繼承功能,如果不試不會知道你為了繼承放棄了哪個.
所以叻,模擬OO時就必須要提供替代這兩個字面含義的屬性或方法的實現(xiàn),而且必須讓使用者知道!
模擬OO絕對不只這個問題,在子類方法中調(diào)用父類的同名方法,這個OO語言常見的特性,
JavaScript實現(xiàn)起來也非常困難,大師們基本都有各自的一套,只不過有些用心去做了用起來相比之下更自然些,如Base庫.
當(dāng)然可以摒棄instanceof和constructor的使用,就當(dāng)不知道有這么一回兒事兒,活兒仍可繼續(xù),死不了人的.
但如果你不是單槍匹馬作戰(zhàn),那就通知你的Partner也摒棄這對冤家吧.
類似今天這點事兒,老鳥們都清楚的很,但如果不是團(tuán)隊中每個人都有統(tǒng)一的認(rèn)識,那就是隱患.
一個好玩兒的現(xiàn)象<<JavaScript高級程序設(shè)計>>強調(diào)instanceof,而<<精通JavaScript>>強調(diào)constructor.而各自對另一個一筆帶過或只字不提.怨念..甚深...

您可能感興趣的文章: