關(guān)于JavaScript定義類和對象的幾種方式
更新時間：2010年11月09日 09:06:55 作者：
在說這個話題之前，我想先說幾句題外話：最近偶然碰到有朋友問我“hoisting”的問題。即在js里所有變量的聲明都是置頂?shù)?，而賦值則是在之后發(fā)生的。
可以看看這個例子：
var a = 'global';
(function () {
alert(a);
var a = 'local';
})();
大家第一眼看到這個例子覺得輸出結(jié)果是什么？‘global'？還是‘local'？其實都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講這個東西的。
其實很簡單，看一看JavaScript運行機制就會明白。我們可以把這種現(xiàn)象看做“預聲明”。但是如果稍微深究一下，會明白得更透徹。
這里其實涉及到對象屬性綁定機制。因為所有JavaScript函數(shù)都是一個對象。在函數(shù)里聲明的變量可以看做這個對象的“類似屬性”。對象屬性的綁定在語言里是有分“早綁定”和“晚綁定”之分的。
【早綁定】
是指在實例化對象之前定義其屬性和方法。解析程序時可以提前轉(zhuǎn)換為機器代碼。通常的強類型語言如C++，java等，都是早綁定機制的。而JavaScript不是強類型語言。它使用的是“晚綁定”機制。
【晚綁定】
是指在程序運行前，無需檢查對象類型，只要檢查對象是否支持特性和方法即可?？梢栽诮壎ㄇ皩ο髨?zhí)行大量操作而不受任何懲罰。
上面代碼出現(xiàn)的“預聲明”現(xiàn)象，我們大可用“晚綁定”機制來解釋。在函數(shù)的作用域中，所有變量都是“晚綁定”的。 即聲明是頂級的。所以上面的代碼和下面的一致：
var a = 'global';
(function () {
var a;
alert(a);
a = 'local';
})();
在alert(a)之前只對a作了聲明而沒有賦值。所以結(jié)果可想而知。
<!-- 題外話到此結(jié)束 -->
RT:本文要說的是，在JavaScript里，我所知道的幾種定義類和對象的方式：<! -- 聲明：以下內(nèi)容大部分來自《JavaScript高級程序設計》，只是個人敘述方式不同而已 -- >
【直接量方式】
使用直接量構(gòu)建對象是最基礎的方式，但也有很多弊端。
var Obj = new Object;
Obj.name = 'sun';
Obj.showName = function() {
alert('this.name');
}
我們構(gòu)建了一個對象Obj，它有一個屬性name，一個方法showName。但是如果我們要再構(gòu)建一個類似的對象呢？難道還要再重復一遍？
NO！，我們可以用一個返回特定類型對象的工廠函數(shù)來實現(xiàn)。就像工廠一樣，流水線的輸出我們要的特定類型結(jié)果。
【工廠方式】
function createObj(name) {
var tempObj = new Object;
tempObj.name = name;
tempObj.showName = function () {
alert(this.name);
};
return tempObj;
}
var obj1 = createObj('obj_one');
var obj2 = createObj('obj_two');
這種工廠函數(shù)很多人是不把他當做構(gòu)建對象的一種形式的。一部分原因是語義：即它并不像使用了運算符new來構(gòu)建的那么正規(guī)。還有一個更大的原因，是因為這個工廠每次產(chǎn)出一個對象都會創(chuàng)建一個新函數(shù)showName(),即每個對象擁有不同的版本，但實際上他們共享的是同一個函數(shù)。
有些人把showName在工廠函數(shù)外定義，然后通過屬性指向該方法，可以避開這個問題：
function showName () {
alert(this.name);
}
function createObj(name) {
var tempObj = new Object;
tempObj.name = name;
tempObj.showName = showName;
return tempObj;
}
var obj1 = createObj('obj_one');
var obj2 = createObj('obj_two');
可惜的是，這種方式讓showName()這個函數(shù)看起來不像對象的一個方法。
【構(gòu)造函數(shù)方式】
這種方式是為了解決上面工廠函數(shù)的第一個問題，即沒有new運算符的問題?？墒堑诙€問題它依然不能解決。我們來看看。
function Obj(name) {
this.name = name;
this.showName = function () {
alert(this.name);
}
}
var obj1 = new Obj('obj_one');
var obj2 = new Obj('obj_two');
它的好處是不用在構(gòu)造函數(shù)內(nèi)新建一個對象了，因為new運算符執(zhí)行的時候會自動創(chuàng)建一個對象，并且只有通過this才能訪問這個對象。所以我們可以直接通過this來對這個對象進行賦值。而且不用再return，因為this指向默認為構(gòu)造函數(shù)的返回值。
同時，用了new關(guān)鍵字來創(chuàng)建我們想要的對象是不是感覺更“正式”了。
可惜，它仍然不能解決會重復生成方法函數(shù)的問題，這個情況和工廠函數(shù)一樣。
【原型方式】
這種方式對比以上方式，有個很大的優(yōu)勢，就是它解決了方法函數(shù)會被生成多次的問題。它利用了對象的prototype屬性。我們依賴原型可以重寫對象實例。
var Obj = function () {}
Obj.prototype.name = 'me';
Obj.prototype.showName = function () {
alert(this.name);
}
var obj1 = new Obj();
var obj2 = new Obj();
我們依賴原型對構(gòu)造函數(shù)進行重寫，無論是屬性還是方法都是通過原型引用的方式給新建的對象，因此都只會被創(chuàng)建一次。可惜的是，這種方式存在兩個致命的問題：
1。沒辦法在構(gòu)建對象的時候就寫入想要的屬性，因為原型在構(gòu)造函數(shù)作用域外邊，沒辦法通過傳遞參數(shù)的方式在對象創(chuàng)建的時候就寫入屬性值。只能在對象創(chuàng)建完畢后對值進行重寫。
2。致命問題在于當屬性指向?qū)ο髸r，這個對象會被多個實例所共享?？紤]下面的代碼：
var Obj = function () {}
Obj.prototype.name = 'me';
Obj.prototype.flag = new Array('A', 'B');
Obj.prototype.showName = function () {
alert(this.name);
}
var obj1 = new Obj();
var obj2 = new Obj();
obj1.flag.push('C');
alert(obj1.flag); // A,B,C
alert(obj2.flag); //A,B,C
是的，當flag屬性指向?qū)ο髸r，那么實例obj1和obj2都共享它，哪怕我們僅僅改變了obj1的flag屬性，但是它的改變在實例obj2中任然可見。
面對這個問題，讓我們不得不想是否應該把【構(gòu)造函數(shù)方式】和【原型方式】結(jié)合起來，讓他們互補。。。
【構(gòu)造函數(shù)和原型混合方式】
我們讓屬性用構(gòu)造函數(shù)方式創(chuàng)建，方法用原型方式創(chuàng)建即可：
var Obj = function (name) {
this.name = name;
this.flag = new Array('A', 'B');
}
Obj.prototype = {
showName : function () {
alert(this.name);
}
}
var obj1 = new Obj();
var obj2 = new Obj();
obj1.flag.push('C');
alert(obj1.flag); // A,B,C
alert(obj2.flag); //A,B
這種方式有效地結(jié)合了原型和構(gòu)造函數(shù)的優(yōu)勢，是目前用的最多，也是副作用最少的方式。
不過，有些追求完美的家伙還不滿足，因為在視覺上還沒達到他們的要求，因為通過原型來創(chuàng)建方法的過程在視覺上還是會讓人覺得它不太像實例的方法（尤其對于傳統(tǒng)OOP語言的開發(fā)者來說。）
所以，我們可以讓原型活動起來，讓他也加入到構(gòu)造函數(shù)里面去，好讓這個構(gòu)造函數(shù)在視覺上更為統(tǒng)一。而這一系列的過程只需用一個判斷即可完成。
var Obj = function (name) {
this.name = name;
this.flag = new Array('A', 'B');
if (typeof Obj._init == 'undefined') {
Obj.prototype = {
showName : function () {
alert(this.name);
}
};
Obj._init = true;
}
}
如上，用_init作為一個標志來判斷是否已經(jīng)給原型創(chuàng)建了方法。如果是那么就不再執(zhí)行。這樣其實在本質(zhì)上是沒有任何變化的，方法仍是通過原型創(chuàng)建，唯一的區(qū)別在于這個構(gòu)造函數(shù)看起來“江山統(tǒng)一”了。
但是這種動態(tài)原型的方式是有問題的，《JavaScript高級程序設計》里并沒有深究。創(chuàng)建第一個對象的時候會因為prototype在對象實例化之前沒來的及建起來，是根本無法訪問的。所以第一個對象是無法訪問原型方法的。同時這種方式在子類繼承中也會有問題。
關(guān)于解決方案，我會在下一文中說明。
其實就使用方便來說的話，個人覺得是沒必要做這個判斷的。。。呵呵 ^_^
復制代碼 代碼如下:
var a = 'global';
(function () {
alert(a);
var a = 'local';
})();
大家第一眼看到這個例子覺得輸出結(jié)果是什么？‘global'？還是‘local'？其實都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講這個東西的。
其實很簡單，看一看JavaScript運行機制就會明白。我們可以把這種現(xiàn)象看做“預聲明”。但是如果稍微深究一下，會明白得更透徹。
這里其實涉及到對象屬性綁定機制。因為所有JavaScript函數(shù)都是一個對象。在函數(shù)里聲明的變量可以看做這個對象的“類似屬性”。對象屬性的綁定在語言里是有分“早綁定”和“晚綁定”之分的。
【早綁定】
是指在實例化對象之前定義其屬性和方法。解析程序時可以提前轉(zhuǎn)換為機器代碼。通常的強類型語言如C++，java等，都是早綁定機制的。而JavaScript不是強類型語言。它使用的是“晚綁定”機制。
【晚綁定】
是指在程序運行前，無需檢查對象類型，只要檢查對象是否支持特性和方法即可?？梢栽诮壎ㄇ皩ο髨?zhí)行大量操作而不受任何懲罰。
上面代碼出現(xiàn)的“預聲明”現(xiàn)象，我們大可用“晚綁定”機制來解釋。在函數(shù)的作用域中，所有變量都是“晚綁定”的。 即聲明是頂級的。所以上面的代碼和下面的一致：
復制代碼 代碼如下:
var a = 'global';
(function () {
var a;
alert(a);
a = 'local';
})();
在alert(a)之前只對a作了聲明而沒有賦值。所以結(jié)果可想而知。
<!-- 題外話到此結(jié)束 -->
RT:本文要說的是，在JavaScript里，我所知道的幾種定義類和對象的方式：<! -- 聲明：以下內(nèi)容大部分來自《JavaScript高級程序設計》，只是個人敘述方式不同而已 -- >
【直接量方式】
使用直接量構(gòu)建對象是最基礎的方式，但也有很多弊端。
復制代碼 代碼如下:
var Obj = new Object;
Obj.name = 'sun';
Obj.showName = function() {
alert('this.name');
}
我們構(gòu)建了一個對象Obj，它有一個屬性name，一個方法showName。但是如果我們要再構(gòu)建一個類似的對象呢？難道還要再重復一遍？
NO！，我們可以用一個返回特定類型對象的工廠函數(shù)來實現(xiàn)。就像工廠一樣，流水線的輸出我們要的特定類型結(jié)果。
【工廠方式】
復制代碼 代碼如下:
function createObj(name) {
var tempObj = new Object;
tempObj.name = name;
tempObj.showName = function () {
alert(this.name);
};
return tempObj;
}
var obj1 = createObj('obj_one');
var obj2 = createObj('obj_two');
這種工廠函數(shù)很多人是不把他當做構(gòu)建對象的一種形式的。一部分原因是語義：即它并不像使用了運算符new來構(gòu)建的那么正規(guī)。還有一個更大的原因，是因為這個工廠每次產(chǎn)出一個對象都會創(chuàng)建一個新函數(shù)showName(),即每個對象擁有不同的版本，但實際上他們共享的是同一個函數(shù)。
有些人把showName在工廠函數(shù)外定義，然后通過屬性指向該方法，可以避開這個問題：
復制代碼 代碼如下:
function showName () {
alert(this.name);
}
function createObj(name) {
var tempObj = new Object;
tempObj.name = name;
tempObj.showName = showName;
return tempObj;
}
var obj1 = createObj('obj_one');
var obj2 = createObj('obj_two');
可惜的是，這種方式讓showName()這個函數(shù)看起來不像對象的一個方法。
【構(gòu)造函數(shù)方式】
這種方式是為了解決上面工廠函數(shù)的第一個問題，即沒有new運算符的問題?？墒堑诙€問題它依然不能解決。我們來看看。
復制代碼 代碼如下:
function Obj(name) {
this.name = name;
this.showName = function () {
alert(this.name);
}
}
var obj1 = new Obj('obj_one');
var obj2 = new Obj('obj_two');
它的好處是不用在構(gòu)造函數(shù)內(nèi)新建一個對象了，因為new運算符執(zhí)行的時候會自動創(chuàng)建一個對象，并且只有通過this才能訪問這個對象。所以我們可以直接通過this來對這個對象進行賦值。而且不用再return，因為this指向默認為構(gòu)造函數(shù)的返回值。
同時，用了new關(guān)鍵字來創(chuàng)建我們想要的對象是不是感覺更“正式”了。
可惜，它仍然不能解決會重復生成方法函數(shù)的問題，這個情況和工廠函數(shù)一樣。
【原型方式】
這種方式對比以上方式，有個很大的優(yōu)勢，就是它解決了方法函數(shù)會被生成多次的問題。它利用了對象的prototype屬性。我們依賴原型可以重寫對象實例。
復制代碼 代碼如下:
var Obj = function () {}
Obj.prototype.name = 'me';
Obj.prototype.showName = function () {
alert(this.name);
}
var obj1 = new Obj();
var obj2 = new Obj();
我們依賴原型對構(gòu)造函數(shù)進行重寫，無論是屬性還是方法都是通過原型引用的方式給新建的對象，因此都只會被創(chuàng)建一次。可惜的是，這種方式存在兩個致命的問題：
1。沒辦法在構(gòu)建對象的時候就寫入想要的屬性，因為原型在構(gòu)造函數(shù)作用域外邊，沒辦法通過傳遞參數(shù)的方式在對象創(chuàng)建的時候就寫入屬性值。只能在對象創(chuàng)建完畢后對值進行重寫。
2。致命問題在于當屬性指向?qū)ο髸r，這個對象會被多個實例所共享?？紤]下面的代碼：
復制代碼 代碼如下:
var Obj = function () {}
Obj.prototype.name = 'me';
Obj.prototype.flag = new Array('A', 'B');
Obj.prototype.showName = function () {
alert(this.name);
}
var obj1 = new Obj();
var obj2 = new Obj();
obj1.flag.push('C');
alert(obj1.flag); // A,B,C
alert(obj2.flag); //A,B,C
是的，當flag屬性指向?qū)ο髸r，那么實例obj1和obj2都共享它，哪怕我們僅僅改變了obj1的flag屬性，但是它的改變在實例obj2中任然可見。
面對這個問題，讓我們不得不想是否應該把【構(gòu)造函數(shù)方式】和【原型方式】結(jié)合起來，讓他們互補。。。
【構(gòu)造函數(shù)和原型混合方式】
我們讓屬性用構(gòu)造函數(shù)方式創(chuàng)建，方法用原型方式創(chuàng)建即可：
復制代碼 代碼如下:
var Obj = function (name) {
this.name = name;
this.flag = new Array('A', 'B');
}
Obj.prototype = {
showName : function () {
alert(this.name);
}
}
var obj1 = new Obj();
var obj2 = new Obj();
obj1.flag.push('C');
alert(obj1.flag); // A,B,C
alert(obj2.flag); //A,B
這種方式有效地結(jié)合了原型和構(gòu)造函數(shù)的優(yōu)勢，是目前用的最多，也是副作用最少的方式。
不過，有些追求完美的家伙還不滿足，因為在視覺上還沒達到他們的要求，因為通過原型來創(chuàng)建方法的過程在視覺上還是會讓人覺得它不太像實例的方法（尤其對于傳統(tǒng)OOP語言的開發(fā)者來說。）
所以，我們可以讓原型活動起來，讓他也加入到構(gòu)造函數(shù)里面去，好讓這個構(gòu)造函數(shù)在視覺上更為統(tǒng)一。而這一系列的過程只需用一個判斷即可完成。
復制代碼 代碼如下:
var Obj = function (name) {
this.name = name;
this.flag = new Array('A', 'B');
if (typeof Obj._init == 'undefined') {
Obj.prototype = {
showName : function () {
alert(this.name);
}
};
Obj._init = true;
}
}
如上，用_init作為一個標志來判斷是否已經(jīng)給原型創(chuàng)建了方法。如果是那么就不再執(zhí)行。這樣其實在本質(zhì)上是沒有任何變化的，方法仍是通過原型創(chuàng)建，唯一的區(qū)別在于這個構(gòu)造函數(shù)看起來“江山統(tǒng)一”了。
但是這種動態(tài)原型的方式是有問題的，《JavaScript高級程序設計》里并沒有深究。創(chuàng)建第一個對象的時候會因為prototype在對象實例化之前沒來的及建起來，是根本無法訪問的。所以第一個對象是無法訪問原型方法的。同時這種方式在子類繼承中也會有問題。
關(guān)于解決方案，我會在下一文中說明。
其實就使用方便來說的話，個人覺得是沒必要做這個判斷的。。。呵呵 ^_^
相關(guān)文章
dojo最新是1.3.1了，記得07年時還是0.4。文檔也漸漸多了起來，用dojo的也慢慢多了。dojo還發(fā)布了core版，壓縮后只有27kb。2009-07-07
繼承,通俗地說,之前你寫過一些類,這些類中有一些是而你現(xiàn)在要寫的類的功能的子集或者基本相同,那么你不用完全重新寫一個新的類,你可以把之前寫的類拿過來使用.這樣的一種代碼重用過程就叫做繼承2011-05-05
最近這一段時間事情太多了，沒有時間再繼續(xù)寫，幸好這兩天有點小閑，先小寫一下JavaScript中面向?qū)ο笠恢型扑]的方法。2010-05-05
javascript復制對象使用說明，需要的朋友可以參考下。2011-06-06
圍繞面向?qū)ο蟮膸状箨P(guān)鍵字：封裝 ，繼承 ，多態(tài) ，展開JavaScript面向?qū)ο?/div> 2009-03-03
工廠模式 初級開發(fā)者可能會這樣定義對象2009-03-03
我說過，我要寫一個JS的框架，我知道有人會從心底BS我，但是：你繼續(xù)BS吧！我還是要寫我的JOBJ。2008-03-03
JavaScript 創(chuàng)建對象和構(gòu)造類實現(xiàn)代碼
JavaScript學習筆記:創(chuàng)建對象和構(gòu)造類.2009-07-07
前一些天做項目的時候?qū)懥艘粋€通用的OO By Class Cookie今天把它放上來給大家分享下！2010-09-09
下面對代碼的封裝是比較常用的，也比較好理解，只有先掌握了這些，才能更深入的了解面向?qū)τ谝约癹son格式的定義方法。2010-04-04最新評論