JavaScript 的物件可分三類:
- 內建的物件(如日期、數學等物件)
- 根據網頁的內容所建立的文件物件模型(Document Object Model ,簡稱 DOM)
- 使用者自訂的物件
本節將說明「使用者自訂的物件」。若要定義一個簡單物件,擁有數個欄位(或性質),可見下列範例:
上述範例的原始檔如下:
在上述範例中,我們使用 new Object() 來產生一個使用者自訂的物件,並設立此物件的三個性質,分別是 name, age, 以及 phone。此外,我們用到了一個函數 listProp() 來印出物件的所有性質,此函數是經有下列敘述來加入此網頁:
此函數的內容如下:
我們也可以使用「單列指定」的方式,來指定一個物件的所有性質,其格式如下:
newObj = {prop1:value1, prop2:value2, ...};
若使用此種方式來指定一個物件,上述範例可以改寫如下:
若要測試一個物件是否含有某個特定欄位,可以使用 in 運算子,例如:
上述範例的原始檔如下:
若要產生較複雜的自訂物件,包含定義此物件的性質和方法,首先就要定義此物件的「建構子」(Constructor,也就是用來創造物件的函數),其形式和一般 JavaScript 的函數非常類似。以下是一個簡單的範例:
上述範例的原始檔如下:
其中,我們利用函數 student 來定義一個物件範本,包含了三個性質:name、studentID、及 age。此外,此物件範本也包含了一個方法 display(),是由另一個函數 displayStudent() 所定義。在這兩個函數中,「this」代表所建構的物件。
此外,物件中亦可包含另一個物件,例如:
上述範例的原始檔如下:
其中我們使用 course() 和 student() 來建構「課程」和「學生」的物件,而「學生」物件中的 course 性質,則是指向由 course() 所產生的「課程」物件。
當物件的個數較多時,我們通常是將每一個物件放在陣列中,以便存取與管理。在下列的範例中,我們以陣列來存放每個月的開支列表,而每一筆經費本身就是一個物件,包含此經費的金額、說明等,因此,我們可以很方便地加入一筆開銷記錄,並列印出整體支出表,範例如下:
上述範例的原始檔如下:
JavaScript 程式設計與應用:用於網頁用戶端