JavaScript 物件

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


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

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

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

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


JavaScript  物件

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

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


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

以下程式碼為變數為變數「Fiat」設定值為"Fiat" :

var car = "Fiat";

#對象也是一個變量,但物件可以包含多個值(多個變數)。

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

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

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

提示:JavaScript 物件是變數的容器。


物件定義

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

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(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中文网(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 物件是屬性變數的容器。


物件鍵值對的寫法類似:

  • #PHP 中的關聯陣列

  • Python 中的字典

  • C 語言中的雜湊表

  • Java 中的雜湊對應

  • Ruby 和Perl 中的雜湊表


#存取物件屬性

#你可以用兩種方式存取物件屬性:

方法一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(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>

執行程式嘗試


方法二

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> PHP中文网</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>

執行程式試試看


存取物件方法

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

methodName : function() { code lines }

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

objectName.methodName()

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

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

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



繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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>