Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 對象

JavaScript 對像是擁有屬性和方法的數據。


真實生活中的對象,屬性和方法

真實生活中,一輛汽車是一個對象。

對像有它的屬性,如重量和顏色等,方法有啟動停止等:

對象 屬性 方法

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

所有汽車都有這些屬性,但是每款車的屬性都不盡相同。

所有汽車都擁有這些方法,但是它們被執行的時間都不盡相同。


JavaScript 對象

在JavaScript中,幾乎所有的事物都是對象。

Note 在JavaScript 中,對像是非常重要的,當你理解了對象,就可以了解JavaScript 。

你已經學習了JavaScript 變量的賦值。

以下代碼為變量car設置值為"Fiat" :

var car = "Fiat" ;

對像也是一個變量,但對象可以包含多個值(多個變量)。

var car = {type: "Fiat" , model: 500 , color: "white" };

在以上實例中,3 個值("Fiat", 500, "white") 賦予變量car。

在以上實例中,3 個變量(type, model, color) 賦予變量car。

Note JavaScript 對像是變量的容器。


對象定義

你可以使用字符來定義和創建JavaScript 對象:

實例

var person = {firstName: "John" , lastName: "Doe" , age: 50 , eyeColor: "blue" };

嘗試一下»

定義JavaScript 對象可以跨越多行,空格跟換行不是必須的:

實例

var person = {
firstName: "John" ,
lastName: "Doe" ,
age: 50 ,
eyeColor: "blue"
};

嘗試一下»


對象屬性

可以說"JavaScript 對像是變量的容器"。

但是,我們通常認為"JavaScript 對像是鍵值對的容器"。

鍵值對通常寫法為name : value (鍵與值以冒號分割)。

鍵值對在JavaScript對象通常稱為對象屬性

Note JavaScript 對像是屬性變量的容器。

對象鍵值對的寫法類似於:

  • PHP 中的關聯數組
  • Python 中的字典
  • C 語言中的哈希表
  • Java 中的哈希映射
  • Ruby 和Perl 中的哈希表

訪問對象屬性

你可以通過兩種方式訪問對象屬性:

實例1

person.lastName;

嘗試一下»

實例2

person[ "lastName" ];

嘗試一下»


對象方法

對象的方法定義了一個函數,並作為對象的屬性存儲。

對象方法通過添加() 調用(作為一個函數)。

該實例訪問了person 對象的fullName() 方法:

實例

name = person.fullName();

嘗試一下»

如果你要訪問person 對象的fullName 屬性,它將作為一個定義函數的字符串返回:

實例

name = person.fullName;

嘗試一下»

Note JavaScript 對像是屬性和方法的容器。

在隨後的教程中你將學習到更多關於函數,屬性和方法的知識。


訪問對象方法

你可以使用以下語法創建對象方法:

methodName : function() { code lines }

你可以使用以下語法訪問對象方法:

objectName.methodName()

通常fullName() 是作為person 對象的一個方法, fullName 是作為一個屬性。

有多種方式可以創建,使用和修改JavaScript 對象。

同樣也有多種方式用來創建,使用和修改屬性和方法。

Note 在隨後的教程中,你將學習到更多關於對象的知識。


更多實例

創建JavaScript對象I

創建JavaScript對象II

訪問對象屬性I

訪問對象屬性II

函數屬性作為一個方法訪問

函數屬性作為一個屬性訪問