JavaScript 物件
現實生活中的物件
在現實生活中，物件是指：房子、汽車、人、動物或任何其他主體。
這是一個汽車物件的例子
| 汽車物件 | 屬性 | 方法 |
|---|---|---|
|
car.name = 菲亞特 car.model = 500 car.weight = 850kg car.color = 白色 |
car.start() car.drive() car.brake() car.stop() |
物件屬性
現實生活中的汽車具有屬性，例如重量和顏色
car.name = 菲亞特，car.model = 500，car.weight = 850kg，car.color = 白色。
汽車物件具有相同的屬性，但值因汽車而異。
物件方法
現實生活中的汽車具有方法，例如啟動和停止
car.start(), car.drive(), car.brake(), car.stop().
汽車物件具有相同的方法，但這些方法是在不同時間執行的。
JavaScript 變數
JavaScript 變數是資料值的容器。
此程式碼將簡單值 (Fiat) 賦給名為 car 的變數
JavaScript 物件
物件也是變數。但物件可以包含許多值。
此程式碼將許多值 (Fiat, 500, white) 賦給名為 car 的物件
JavaScript 物件定義
如何定義 JavaScript 物件
- 使用物件字面量
- 使用
new關鍵字 - 使用物件建構函式
JavaScript 物件字面量
物件字面量是花括號 {} 內的名稱:值對列表。
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
注意
名稱:值對也稱為鍵:值對。
物件字面量也稱為物件初始化器。
建立 JavaScript 物件
這些示例建立了一個具有 4 個屬性的 JavaScript 物件
示例
// 建立一個物件
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
自己動手試一試 »
空格和換行符不重要。物件初始化器可以跨多行
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
自己動手試一試 »
此示例建立了一個空的 JavaScript 物件，然後添加了 4 個屬性
// 建立一個物件
const person = {};
// 新增屬性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己動手試一試 »
使用 new 關鍵字
此示例使用 new Object() 建立了一個新的 JavaScript 物件，然後添加了 4 個屬性
示例
// 建立一個物件
const person = new Object();
// 新增屬性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己動手試一試 »
注意
上面的例子做的事情完全一樣。
但是，沒有必要使用 new Object()。
為了可讀性、簡單性和執行速度，請使用物件字面量方法。
物件屬性
JavaScript 物件中的命名值稱為屬性。
| 屬性 | 值 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
以名稱值對形式寫入的物件類似於
- PHP 中的關聯陣列
- Python 中的字典
- C 中的雜湊表
- Java 中的雜湊對映
- Ruby 和 Perl 中的雜湊
訪問物件屬性
您可以透過兩種方式訪問物件屬性
objectName.propertyName
objectName["propertyName"]
JavaScript 物件方法
方法是可以對物件執行的動作。
方法是作為屬性值儲存的函式定義。
| 屬性 | 屬性值 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
示例
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
自己動手試一試 »
在上面的示例中，this 指的是person 物件
this.firstName 表示 person 的 firstName 屬性。
this.lastName 表示 person 的 lastName 屬性。
在 JavaScript 中，物件為王。
如果你理解物件，你就理解 JavaScript。
物件是屬性和方法的容器。
屬性是命名值。
方法是作為屬性儲存的函式。
屬性可以是原始值、函式，甚至是其他物件。
在 JavaScript 中，幾乎“一切”都是物件。
- 物件就是物件
- 數學是物件
- 函式是物件
- 日期是物件
- 陣列是物件
- Map 是物件
- Set 是物件
除了原始值之外，所有 JavaScript 值都是物件。
JavaScript 原始值
原始值是沒有屬性或方法的值。
3.14 是一個原始值
原始資料型別是具有原始值的資料。
JavaScript 定義了 7 種原始資料型別
string數字booleannullundefinedsymbolbigint
不可變
原始值是不可變的（它們是硬編碼的，不能更改）。
如果 x = 3.14，您可以更改 x 的值，但不能更改 3.14 的值。
| 值 | 型別 | 註釋 |
|---|---|---|
| "Hello" | string | "Hello" 永遠是 "Hello" |
| 3.14 | 數字 | 3.14 永遠是 3.14 |
| true | boolean | true 永遠是 true |
| false | boolean | false 永遠是 false |
| null | null (物件) | null 永遠是 null |
| undefined | undefined | undefined 永遠是 undefined |
JavaScript 物件是可變的
物件是可變的：它們透過引用而不是透過值定址。
如果 person 是一個物件，則以下語句不會建立 person 的副本
const x = person;
物件 x 不是 person 的副本。物件 x 就是 person。
物件 x 和物件 person 共享相同的記憶體地址。
對 x 的任何更改也會更改 person
示例
//建立一個物件
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// 建立一個副本
const x = person;
// 同時更改兩者中的 Age
x.age = 10;
自己動手試一試 »
注意
您將在後續章節中學習更多關於物件的內容。
