JavaScript 對象

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

在真實生活中，汽車是一個對象。

汽車有諸如車重和顏色等屬性，也有諸如啟動和停止的方法：

對象 屬性 方法

car.name = porsche

car.model = 911

car.length = 4499mm

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

所有汽車都擁有同樣的屬性，但屬性值因車而異。

所有汽車都擁有相同的方法，但是方法會在不同時間被執行。

JavaScript 對象

您之前已經學到，JavaScript 變量是數據值的容器。

這段代碼把一個單一值（porsche）賦給名為 car 的變量：

var car = "porsche";

親自試一試

對象也是變量。但是對象包含很多值。

這段代碼把多個值（porsche, 911, white）賦給名為 car 的變量：

var car = {type:"porsche", model:"911", color:"white"};

親自試一試

值以名稱:值對的方式來書寫（名稱和值由冒號分隔）。

JavaScript 對象是被命名值的容器。

對象屬性

（JavaScript 對象中的）名稱:值對被稱為屬性。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
屬性 屬性值
firstName Bill
lastName Gates
age 62
eyeColor blue

對象方法

對象也可以有方法。

方法是在對象上執行的動作。

方法以函數定義被存儲在屬性中。

屬性 屬性值
firstName Bill
lastName Gates
age 62
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

方法是作為屬性來存儲的函數。

實例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 關鍵詞

在函數定義中，this 引用該函數的“擁有者”。

在上面的例子中，this 指的是“擁有” fullName 函數的 person 對象。

換言之，this.firstName 的意思是 this 對象的 firstName 屬性。

請在 JS this 關鍵詞這一章學習更多有關 this 關鍵詞的知識。

對象定義

我們定義（創建）了一個 JavaScript 對象：

實例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

親自試一試

空格和折行都是允許的。對象定義可橫跨多行：

實例

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

親自試一試

訪問對象屬性

您能夠以兩種方式訪問屬性：

objectName.propertyName

或者

objectName["propertyName"]

例子 1

person.lastName;

親自試一試

例子 2

person["lastName"];

親自試一試

訪問對象方法

您能夠通過如下語法訪問對象方法：

objectName.methodName()

實例

name = person.fullName();

親自試一試

如果您不使用 () 訪問 fullName 方法，則將返回函數定義：

實例

name = person.fullName;

親自試一試

方法實際上是以屬性值的形式存儲的函數定義。

請不要把字符串、數值和布爾值聲明為對象！

如果通過關鍵詞 "new" 來聲明 JavaScript 變量，則該變量會被創建為對象：

var x = new String();        // 把 x 聲明為 String 對象
var y = new Number();        // 把 y 聲明為 Number 對象
var z = new Boolean();       //	把 z 聲明為 Boolean 對象

請避免字符串、數值或邏輯對象。他們會增加代碼的復雜性并降低執行速度。

您將在本教程的稍后章節學到更多有關對象的知識。

課外書

如需更多有關 JavaScript 對象的知識，請閱讀 JavaScript 高級教程中的相關內容：

ECMAScript 面向對象技術
本節簡要介紹了面向對象技術的術語、面向對象語言的要求以及對象的構成。
ECMAScript 對象應用
本節講解了如何聲明和實例化對象，如何引用和廢除對象，以及綁定的概念。
ECMAScript 對象類型
本節介紹了 ECMAScript 的三種類型：本地對象、內置對象和宿主對象，并提供了指向相關參考手冊的鏈接。
ECMAScript 對象作用域
本節講解了 ECMAScript 作用域以及 this 關鍵字。
ECMAScript 定義類或對象
本節詳細講解了創建 ECMAScript 對象或類的各種方式。
ECMAScript 修改對象
本節講解了如何通過創建新方法或重定義已有方法來修改對象。