關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?/h1>

來源：懂視網(wǎng) 責(zé)編：小采 時(shí)間：2020-11-27 20:55:42

關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?/h4>

關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?可以看看這個(gè)例子： 代碼如下: var a = 'global'; (function () { alert(a); var a = 'local'; })(); 大家第一眼看到這個(gè)例子覺得輸出結(jié)果是什么？global'？還是local'？其實(shí)都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?可以看看這個(gè)例子： 代碼如下: var a = 'global'; (function () { alert(a); var a = 'local'; })(); 大家第一眼看到這個(gè)例子覺得輸出結(jié)果是什么？global'？還是local'？其實(shí)都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講

可以看看這個(gè)例子：
代碼如下:
var a = 'global';
(function () {
alert(a);
var a = 'local';
})();

　　大家第一眼看到這個(gè)例子覺得輸出結(jié)果是什么？‘global'？還是‘local'？其實(shí)都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講這個(gè)東西的。
其實(shí)很簡單，看一看JavaScript運(yùn)行機(jī)制就會(huì)明白。我們可以把這種現(xiàn)象看做“預(yù)聲明”。但是如果稍微深究一下，會(huì)明白得更透徹。
　　這里其實(shí)涉及到對(duì)象屬性綁定機(jī)制。因?yàn)樗蠮avaScript函數(shù)都是一個(gè)對(duì)象。在函數(shù)里聲明的變量可以看做這個(gè)對(duì)象的“類似屬性”。對(duì)象屬性的綁定在語言里是有分“早綁定”和“晚綁定”之分的。

　　【早綁定】
是指在實(shí)例化對(duì)象之前定義其屬性和方法。解析程序時(shí)可以提前轉(zhuǎn)換為機(jī)器代碼。通常的強(qiáng)類型語言如C++，java等，都是早綁定機(jī)制的。而JavaScript不是強(qiáng)類型語言。它使用的是“晚綁定”機(jī)制。
　　【晚綁定】
是指在程序運(yùn)行前，無需檢查對(duì)象類型，只要檢查對(duì)象是否支持特性和方法即可。可以在綁定前對(duì)對(duì)象執(zhí)行大量操作而不受任何懲罰。
上面代碼出現(xiàn)的“預(yù)聲明”現(xiàn)象，我們大可用“晚綁定”機(jī)制來解釋。在函數(shù)的作用域中，所有變量都是“晚綁定”的。 即聲明是頂級(jí)的。所以上面的代碼和下面的一致：
代碼如下:
var a = 'global';
(function () {
var a;
alert(a);
a = 'local';
})();

在alert(a)之前只對(duì)a作了聲明而沒有賦值。所以結(jié)果可想而知。

　　RT:本文要說的是，在JavaScript里，我所知道的幾種定義類和對(duì)象的方式：
　　【直接量方式】
　　使用直接量構(gòu)建對(duì)象是最基礎(chǔ)的方式，但也有很多弊端。
代碼如下:
var Obj = new Object;
Obj.name = 'sun';
Obj.showName = function() {
alert('this.name');
}

我們構(gòu)建了一個(gè)對(duì)象Obj，它有一個(gè)屬性name，一個(gè)方法showName。但是如果我們要再構(gòu)建一個(gè)類似的對(duì)象呢？難道還要再重復(fù)一遍？
NO！，我們可以用一個(gè)返回特定類型對(duì)象的工廠函數(shù)來實(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ù)很多人是不把他當(dāng)做構(gòu)建對(duì)象的一種形式的。一部分原因是語義：即它并不像使用了運(yùn)算符new來構(gòu)建的那么正規(guī)。還有一個(gè)更大的原因，是因?yàn)檫@個(gè)工廠每次產(chǎn)出一個(gè)對(duì)象都會(huì)創(chuàng)建一個(gè)新函數(shù)showName(),即每個(gè)對(duì)象擁有不同的版本，但實(shí)際上他們共享的是同一個(gè)函數(shù)。
有些人把showName在工廠函數(shù)外定義，然后通過屬性指向該方法，可以避開這個(gè)問題：
代碼如下:
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()這個(gè)函數(shù)看起來不像對(duì)象的一個(gè)方法。
　　【構(gòu)造函數(shù)方式】
這種方式是為了解決上面工廠函數(shù)的第一個(gè)問題，即沒有new運(yùn)算符的問題。可是第二個(gè)問題它依然不能解決。我們來看看。
代碼如下:
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)新建一個(gè)對(duì)象了，因?yàn)閚ew運(yùn)算符執(zhí)行的時(shí)候會(huì)自動(dòng)創(chuàng)建一個(gè)對(duì)象，并且只有通過this才能訪問這個(gè)對(duì)象。所以我們可以直接通過this來對(duì)這個(gè)對(duì)象進(jìn)行賦值。而且不用再return，因?yàn)閠his指向默認(rèn)為構(gòu)造函數(shù)的返回值。
同時(shí)，用了new關(guān)鍵字來創(chuàng)建我們想要的對(duì)象是不是感覺更“正式”了。
可惜，它仍然不能解決會(huì)重復(fù)生成方法函數(shù)的問題，這個(gè)情況和工廠函數(shù)一樣。

　　【原型方式】
這種方式對(duì)比以上方式，有個(gè)很大的優(yōu)勢，就是它解決了方法函數(shù)會(huì)被生成多次的問題。它利用了對(duì)象的prototype屬性。我們依賴原型可以重寫對(duì)象實(shí)例。
代碼如下:
var Obj = function () {}
Obj.prototype.name = 'me';
Obj.prototype.showName = function () {
alert(this.name);
}
var obj1 = new Obj();
var obj2 = new Obj();

我們依賴原型對(duì)構(gòu)造函數(shù)進(jìn)行重寫，無論是屬性還是方法都是通過原型引用的方式給新建的對(duì)象，因此都只會(huì)被創(chuàng)建一次。可惜的是，這種方式存在兩個(gè)致命的問題：
1。沒辦法在構(gòu)建對(duì)象的時(shí)候就寫入想要的屬性，因?yàn)樵驮跇?gòu)造函數(shù)作用域外邊，沒辦法通過傳遞參數(shù)的方式在對(duì)象創(chuàng)建的時(shí)候就寫入屬性值。只能在對(duì)象創(chuàng)建完畢后對(duì)值進(jìn)行重寫。
2。致命問題在于當(dāng)屬性指向?qū)ο髸r(shí)，這個(gè)對(duì)象會(huì)被多個(gè)實(shí)例所共享。考慮下面的代碼：
代碼如下:
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

是的，當(dāng)flag屬性指向?qū)ο髸r(shí)，那么實(shí)例obj1和obj2都共享它，哪怕我們僅僅改變了obj1的flag屬性，但是它的改變?cè)趯?shí)例obj2中任然可見。
面對(duì)這個(gè)問題，讓我們不得不想是否應(yīng)該把【構(gòu)造函數(shù)方式】和【原型方式】結(jié)合起來，讓他們互補(bǔ)。。

　　【構(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)勢，是目前用的最多，也是副作用最少的方式。
不過，有些追求完美的家伙還不滿足，因?yàn)樵谝曈X上還沒達(dá)到他們的要求，因?yàn)橥ㄟ^原型來創(chuàng)建方法的過程在視覺上還是會(huì)讓人覺得它不太像實(shí)例的方法（尤其對(duì)于傳統(tǒng)OOP語言的開發(fā)者來說。）
所以，我們可以讓原型活動(dòng)起來，讓他也加入到構(gòu)造函數(shù)里面去，好讓這個(gè)構(gòu)造函數(shù)在視覺上更為統(tǒng)一。而這一系列的過程只需用一個(gè)判斷即可完成。
代碼如下:
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作為一個(gè)標(biāo)志來判斷是否已經(jīng)給原型創(chuàng)建了方法。如果是那么就不再執(zhí)行。這樣其實(shí)在本質(zhì)上是沒有任何變化的，方法仍是通過原型創(chuàng)建，唯一的區(qū)別在于這個(gè)構(gòu)造函數(shù)看起來“江山統(tǒng)一”了。
但是這種動(dòng)態(tài)原型的方式是有問題的，《JavaScript高級(jí)程序設(shè)計(jì)》里并沒有深究。創(chuàng)建第一個(gè)對(duì)象的時(shí)候會(huì)因?yàn)閜rototype在對(duì)象實(shí)例化之前沒來的及建起來，是根本無法訪問的。所以第一個(gè)對(duì)象是無法訪問原型方法的。同時(shí)這種方式在子類繼承中也會(huì)有問題。
關(guān)于解決方案，我會(huì)在下一文中說明。

其實(shí)就使用方便來說的話，個(gè)人覺得是沒必要做這個(gè)判斷的。。呵呵 ^_^

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?/h4>

關(guān)于JavaScript定義類和對(duì)象的幾種方式_js面向?qū)ο?可以看看這個(gè)例子： 代碼如下: var a = 'global'; (function () { alert(a); var a = 'local'; })(); 大家第一眼看到這個(gè)例子覺得輸出結(jié)果是什么？global'？還是local'？其實(shí)都不是，輸出的是undefined，不用迷惑，我的題外話就是為了講

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： 定義 種方法 js

• 熱門焦點(diǎn)