JavaScript 物件

JavaScript 物件是擁有屬性和方法的資料。

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

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

物件有它的屬性，如重量和顏色等，方法有啟動停止等:

##屬性方法#car.start()所有汽車都有這些屬性，但是每款車的屬性都不盡相同。

#物件
	car.name = Fiat car.model = 500 ## car.weight = 850kg car.color = white	car.drive() ##car.brake () car.stop()

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

JavaScript 物件

在 JavaScript中，幾乎所有的事物都是物件。

在 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。

物件定義

你可以使用字元來定義和建立JavaScript 物件:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁.";
</script>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看在線實例

定義JavaScript 物件可以跨越多行，空格跟換行不是必須的：

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
</script>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

物件屬性

可以說"JavaScript 物件是變數的容器"。

但是，我們通常認為 "JavaScript 物件是鍵值對的容器"。

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

鍵值對在 JavaScript 物件通常稱為 物件屬性。

#JavaScript 物件是變數的容器。

	#JavaScript 物件是屬性變數的容器。

物件鍵值對的寫法類似於：

PHP 中的關聯數組
Python 中的字典
C 語言中的雜湊表
#Java 中的雜湊映射
Ruby 和Perl 中的雜湊表

存取物件屬性

你可以透過兩種方式存取物件屬性:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
</script>

</body>

運行實例»

#點擊"運行實例" 按鈕查看線上實例

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性: 
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

運行實例»

#點擊"運行實例" 按鈕查看線上實例

物件方法

物件的方法定義了一個函數，並作為物件的屬性儲存。

物件方法透過新增 () 呼叫 (作為一個函數)。

此實例存取了person 物件的fullName() 方法:

#實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

如果你要存取person 物件的fullName 屬性，它將作為定義函數的字串傳回：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName;
</script>
	
</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

#JavaScript 物件是屬性和方法的容器。

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

存取物件方法

你可以使用下列語法建立物件方法：

methodName : function() { code lines }

你可以使用以下語法存取物件方法：

objectName.methodName()

通常fullName () 是作為person 物件的一個方法， fullName 是作為一個屬性。

有多種方式可以創建，使用和修改 JavaScript 物件。

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

#在後續的教學中，你將學習到更多關於物件的知識。

######

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁.";
</script>

</body>
</html>

運行實例»點擊"運行實例"按鈕查看線上實例

#建立JavaScript 物件II

##實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
</script>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

存取物件屬性I

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
</script>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

##存取物件屬性II

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>phn.cn</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性: 
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

函數屬性作為一個方法存取

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

#運行實例»

##點擊"運行實例"按鈕查看線上實例
函數屬性作為一個屬性存取

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName;
</script>
	
</body>
</html>

##運行實例»

點擊"運行實例" 按鈕查看線上實例

← JavaScript 資料類型

JavaScript 函數 →

JavaScript 物件

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

物件定義

實例

實例

物件屬性

存取物件屬性

實例

實例

物件方法

#實例

實例

更多實例

實例

##運行實例»

PHP中文網