DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中的類(Class)詳細介紹
JavaScript中的類(Class)詳細介紹
編輯:關於JavaScript     

在JavaScript中,可以使用類(Class)來實現面向對象編程(Object Oriented Programming)。不過,JavaScript中的類與Java中的有所不同,其相應的定義和使用也不一樣。

JavaScript中類的定義

在JavaScript中,所有從同一個原型對象(prototype)處衍生出來的對象組成了一個類;也就是說,JavaScript中的類是一個對象集合的概念,如果兩個對象它們的prototype相同,那麼它們就屬於同一個類;JavaScript中的類甚至都不需要類名。以下面的代碼為例:

復制代碼 代碼如下:
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屬於同一個類(雖然這個類都沒有類名),它們從原型對象p處繼承了值為42的屬性x。

從這個例子中可以看到,原型對象的作用就相當於模板,可以由之衍生/創建出多個對象,其地位與Java語言中的類代碼(Class code)相同,是JavaScript中類定義的核心。以下這個例子中的原型對象就呈現出更像類代碼的樣子:


復制代碼 代碼如下:
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定義了一個值為1的property (INCREMENT_BY)和一個名為increment的函數;對象a和b從p這個模板處獲取了INCREMENT_BY和increment函數。當調用對象a或b的increment函數時,JavaScript會試圖獲取a或b的INCREMENT_BY值(this.INCREMENT_BY);由於INCREMENT_BY是從p中獲取的,因此其值都是1 — 從模板中獲取的,值都相同的變量,類似於Java中的靜態類變量(static variable),因此上面的例子中對INCREMENT_BY變量命名時使用了全大寫字符。

在上面的例子中,所有從模板p處創建出來的對象(屬於同一個類的這些對象),其屬性和行為都是一模一樣的。但實際上對於同一個類的不同對象,它們除了擁有類所定義的屬性/行為以外,往往具有一些自身所特有的屬性與行為。因此,如果需要將prototype這個模板當作類來使用的話,就必須對每一個從中衍生出來的對象進行一定的定制:


復制代碼 代碼如下:
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


在這個例子中,從模板p處創建出來的對象a和b擁有一個彼此間值不一定相等的變量custom_increment_by,而它們的increment()函數這個行為的最終結果則與custom_increment_by的值相關。一般來說,對新建對象進行定制化的工作往往放在統一的函數中進行:


復制代碼 代碼如下:
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


如此,便通過原型對象p和getIncrementalClassObject()函數完成了一個類的定義:可以通過調用getIncrementalClassObject()函數來獲取原型對象都是p的對象,而在調用getIncrementalClassObject()函數過程中可以對這些新建對象進行一定的定制化。值得注意的是,此時這個已經定義了的類還沒有類名,為了方便描述,姑且稱之為Incremental。

回顧getIncrementalClassObject()函數中所做的工作,可以看到從Incremental這個類中創建新的對象所經歷的過程如下:

1.創建一個空對象,並將其原型對象定義為p。
2.根據不同的參數值,對這個新建的空對象進行定制。
3.返回已經定制完成的新對象。

在JavaScript中,可以通過使用Constructor(構造函數)來快速地完成類的定義以及新對象的創建。

JavaScript中的Constructor(構造函數)

從上述Incremental類這個例子中可以看到,定義新的類需要兩部分代碼:創建原型對象作為模板、創建自定義函數對新對象進行初始化;而從類中創建新的對象則經歷了三個過程:指定新對象的原型對象、定制/初始化新對象、返回這個新對象。在JavaScript中,這一切都可以通過Constructor(構造函數)來完成。

JavaScript中的Constructor是一個函數(function),承擔對新對象進行初始化的職責;而這個Constructor函數的prototype則作為模板用於創建新對象。仍以上述Incremental類為例,用Constructor來重寫代碼後是這樣的:


復制代碼 代碼如下:
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

通過new關鍵詞,使用Constructor函數來創建新對象這一過程,其實際上經歷了以下幾個階段:

創建一個新的空對象。

1.將這個對象的原型對象指向constructor函數的prototype屬性。
2.將這個對象作為this參數,執行constructor函數。
3.這與之前的getIncrementalClassObject()函數中所做的工作是一樣的。

類名

在使用Constructor創建對象時,相應的對象也就有了“類名”,這可以從instanceof操作符的結果上得到驗證:
復制代碼 代碼如下:
console.log(a instanceof Incremental);//true
console.log(b instanceof Incremental);//true

不過,instanceof操作符並不判斷對象是否由Incremental這一構造函數所創建,instanceof操作符只判斷對象的原型對象是否為Incremental.prototype。當存在兩個prototype一樣的構造函數時,instanceof操作符將統一返回true,而不會區分用於創建對象的構造函數到底是哪個。
復制代碼 代碼如下:
function Incremental2(customIncrementByValue){
  this.custom_increment_by = customIncrementByValue + 3;
}
Incremental2.prototype = Incremental.prototype;
console.log(a instanceof Incremental2);//true

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved