- 相關(guān)推薦
關(guān)于JavaScript中的類(lèi)Class詳細介紹
在JavaScript中，可以使用類(lèi)(Class)來(lái)實(shí)現面向對象編程(Object Oriented Programming)。不過(guò)，JavaScript中的類(lèi)與Java中的有所不同，其相應的定義和使用也不一樣。
JavaScript中類(lèi)的定義
在JavaScript中，所有從同一個(gè)原型對象(prototype)處衍生出來(lái)的對象組成了一個(gè)類(lèi)；也就是說(shuō)，JavaScript中的類(lèi)是一個(gè)對象集合的概念，如果兩個(gè)對象它們的prototype相同，那么它們就屬于同一個(gè)類(lèi)；JavaScript中的類(lèi)甚至都不需要類(lèi)名。以下面的代碼為例：
復制代碼 代碼如下:
var p = {x:42};
var a = Object.create(p);
var b = Object.create(p);
console.log(a === b);//false
console.log(Object.getPrototypeOf(a) === Object.getPrototypeOf(b));//true
在上述例子中，對象a和b擁有相同的原型對象(prototype) p，因此a和b屬于同一個(gè)類(lèi)(雖然這個(gè)類(lèi)都沒(méi)有類(lèi)名)，它們從原型對象p處繼承了值為42的屬性x。
從這個(gè)例子中可以看到，原型對象的作用就相當于模板，可以由之衍生/創(chuàng )建出多個(gè)對象，其地位與Java語(yǔ)言中的類(lèi)代碼(Class code)相同，是JavaScript中類(lèi)定義的核心。以下這個(gè)例子中的原型對象就呈現出更像類(lèi)代碼的樣子：
復制代碼 代碼如下:
var p = {
INCREMENT_BY : 1,
increment : function(x){
return x + this.INCREMENT_BY;
}
}
var a = Object.create(p);
var b = Object.create(p);
console.log(a.increment(7));//8
console.log(b.increment(9));//10
上述例子中，原型對象p定義了一個(gè)值為1的property (INCREMENT_BY)和一個(gè)名為increment的函數；對象a和b從p這個(gè)模板處獲取了INCREMENT_BY和increment函數。當調用對象a或b的increment函數時(shí)，JavaScript會(huì )試圖獲取a或b的INCREMENT_BY值(this.INCREMENT_BY)；由于INCREMENT_BY是從p中獲取的，因此其值都是1 — 從模板中獲取的，值都相同的變量，類(lèi)似于Java中的靜態(tài)類(lèi)變量(static variable)，因此上面的例子中對INCREMENT_BY變量命名時(shí)使用了全大寫(xiě)字符。
在上面的例子中，所有從模板p處創(chuàng )建出來(lái)的對象(屬于同一個(gè)類(lèi)的這些對象)，其屬性和行為都是一模一樣的。但實(shí)際上對于同一個(gè)類(lèi)的不同對象，它們除了擁有類(lèi)所定義的屬性/行為以外，往往具有一些自身所特有的屬性與行為。因此，如果需要將prototype這個(gè)模板當作類(lèi)來(lái)使用的話(huà)，就必須對每一個(gè)從中衍生出來(lái)的對象進(jìn)行一定的定制：
復制代碼 代碼如下:
var p = {
INCREMENT_BY : 1,
increment : function(x){
return x + this.INCREMENT_BY + this.custom_increment_by;
}
}
var a = Object.create(p);
var b = Object.create(p);
a.custom_increment_by = 0;
b.custom_increment_by = 1;
console.log(a.increment(7));//8
console.log(b.increment(9));//11
在這個(gè)例子中，從模板p處創(chuàng )建出來(lái)的對象a和b擁有一個(gè)彼此間值不一定相等的變量custom_increment_by，而它們的increment()函數這個(gè)行為的最終結果則與custom_increment_by的值相關(guān)。一般來(lái)說(shuō)，對新建對象進(jìn)行定制化的工作往往放在統一的函數中進(jìn)行：
復制代碼 代碼如下:
var p = {
INCREMENT_BY : 1,
increment : function(x){
return x + this.INCREMENT_BY + this.custom_increment_by;
}
}
function getIncrementalClassObject(customIncrementByValue){
var incrementalObj = Object.create(p);
incrementalObj.custom_increment_by = customIncrementByValue;
return incrementalObj;
}
var a = getIncrementalClassObject(0);
var b = getIncrementalClassObject(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11
如此，便通過(guò)原型對象p和getIncrementalClassObject()函數完成了一個(gè)類(lèi)的定義：可以通過(guò)調用getIncrementalClassObject()函數來(lái)獲取原型對象都是p的對象，而在調用getIncrementalClassObject()函數過(guò)程中可以對這些新建對象進(jìn)行一定的定制化。值得注意的是，此時(shí)這個(gè)已經(jīng)定義了的類(lèi)還沒(méi)有類(lèi)名，為了方便描述，姑且稱(chēng)之為Incremental。
回顧getIncrementalClassObject()函數中所做的工作，可以看到從Incremental這個(gè)類(lèi)中創(chuàng )建新的對象所經(jīng)歷的過(guò)程如下：
1.創(chuàng )建一個(gè)空對象，并將其原型對象定義為p。
2.根據不同的參數值，對這個(gè)新建的空對象進(jìn)行定制。
3.返回已經(jīng)定制完成的新對象。
在JavaScript中，可以通過(guò)使用Constructor(構造函數)來(lái)快速地完成類(lèi)的定義以及新對象的創(chuàng )建。
JavaScript中的Constructor(構造函數)
從上述Incremental類(lèi)這個(gè)例子中可以看到，定義新的類(lèi)需要兩部分代碼：創(chuàng )建原型對象作為模板、創(chuàng )建自定義函數對新對象進(jìn)行初始化；而從類(lèi)中創(chuàng )建新的對象則經(jīng)歷了三個(gè)過(guò)程：指定新對象的原型對象、定制/初始化新對象、返回這個(gè)新對象。在JavaScript中，這一切都可以通過(guò)Constructor(構造函數)來(lái)完成。
JavaScript中的Constructor是一個(gè)函數(function)，承擔對新對象進(jìn)行初始化的職責；而這個(gè)Constructor函數的prototype則作為模板用于創(chuàng )建新對象。仍以上述Incremental類(lèi)為例，用Constructor來(lái)重寫(xiě)代碼后是這樣的：
復制代碼 代碼如下:
function Incremental(customIncrementByValue){
this.custom_increment_by = customIncrementByValue;
}
Incremental.prototype = {
INCREMENT_BY : 1,
increment : function(x){
return x + this.INCREMENT_BY + this.custom_increment_by;
}
}
var a = new Incremental(0);
var b = new Incremental(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11
通過(guò)new關(guān)鍵詞，使用Constructor函數來(lái)創(chuàng )建新對象這一過(guò)程，其實(shí)際上經(jīng)歷了以下幾個(gè)階段：
創(chuàng )建一個(gè)新的空對象。
1.將這個(gè)對象的原型對象指向constructor函數的prototype屬性。
2.將這個(gè)對象作為this參數，執行constructor函數。
3.這與之前的getIncrementalClassObject()函數中所做的工作是一樣的。
類(lèi)名
在使用Constructor創(chuàng )建對象時(shí)，相應的對象也就有了“類(lèi)名”，這可以從instanceof操作符的結果上得到驗證：
復制代碼 代碼如下:
console.log(a instanceof Incremental);//true
console.log(b instanceof Incremental);//true
不過(guò)，instanceof操作符并不判斷對象是否由Incremental這一構造函數所創(chuàng )建，instanceof操作符只判斷對象的原型對象是否為Incremental.prototype。當存在兩個(gè)prototype一樣的構造函數時(shí)，instanceof操作符將統一返回true，而不會(huì )區分用于創(chuàng )建對象的構造函數到底是哪個(gè)。
復制代碼 代碼如下:
function Incremental2(customIncrementByValue){
this.custom_increment_by = customIncrementByValue + 3;
}
Incremental2.prototype = Incremental.prototype;
console.log(a instanceof Incremental2);//true
【JavaScript中的類(lèi)Class詳細介紹】相關(guān)文章：
perl- javascript中class的機制05-03
有關(guān)深入理解JavaScript中的并行處理的介紹10-14
JavaScript中的with關(guān)鍵字07-24
在Java中執行JavaScript代碼07-14
抽象語(yǔ)法樹(shù)在JavaScript中的應用08-18
JavaScript中的三種對象10-24
JavaScript數組常用方法介紹09-04
javascript克隆對象深度介紹07-25