[JavaScript] JavaScript物件

[JavaScript] Object物件介紹。

物件

物件包含屬性及方法。若將物件比喻為一台車,那麼這台車的顏色、外觀、型號便為這個車物件的屬性,而車子的操作,如發動、剎車、轉彎便是這個車物件的方法。

物件:

屬性:
車.名稱=Lexus
車.型號=is200t
車.顏色=灰

方法:
車.發動()
車.轉彎()
車.剎車()

每台車(物件)都有自己的屬性,如不同的型號與顏色。而每台車都會有方法,如發動、轉彎與剎車,只是執行與否由每台車(物件)的操作來決定。

 

定義JavaScript物件

在JavaScript的變數中給值的方法如下:

<!DOCTYPE html>
<html>
<body>

    <p id="car"></p>

    <script>
        var car = "Lexus";
        document.getElementById("car").innerHTML = car;
    </script>

</body>
</html>

上面的程式中,宣告一個變數car並給予一個值"Lexus"

物件也有變數,不過物件可以包含多個值,如下面程式碼中指派多個name:value成對的值給變數car:

<!DOCTYPE html>
<html>
<body>

    <p id="car"></p>

    <script>
        var car = { name: "Lexus", model: "is200t", color: "灰" };
        document.getElementById("car").innerHTML = car.name + " " + car.model+","+car.color;
    </script>

</body>
</html>

var car = { name: "Lexus", model: "is200t", color: "灰" } 指派物件格式的資料給變數,定義變數為物件。

car.屬性 指出物件中屬性的值。除此之外也可以用物件名稱["屬性名稱"]的方式表達,如:

document.getElementById("car").innerHTML = car["name"] + " " + car["model"]+","+car["color"];

 

用for迴圈顯示物件屬性:

<!DOCTYPE html>
<html>
<body>
    <p id="car"></p>

    <script>
        var car = { name: "Lexus", model: "is200t", color: "灰" };
        var txt = "";
        var x;
        for(x in car){
            txt += car[x]+" ";
        }
        document.getElementById("car").innerHTML = txt;
    </script>
</body>
</html>

x變數 表示car物件中屬性的順序。

txt變數 存放每一個物件屬性。 

for迴圈裡的程式會將所有car物件的屬性執行一遍。

 

用new定義物件

下面的程式一樣會建立car物件與屬性:

<!DOCTYPE html>
<html>
<body>
    <p id="car"></p>

    <script>
        var car = new Object()
        car.name = "Lexus";
        car.model = "is200t";
        car.color = "灰";

        document.getElementById("car").innerHTML = car.name + " " + car.model + "," + car.color;
    </script>
</body>
</html>

在上面的例子中,一次只建立一個物件,需要再建立另一個車的物件時,就需要再new一個物件。

使用function宣告物件,並重複使用:

<!DOCTYPE html>
<html>
<body>
    <p id="car"></p>
    <p id="car2"></p>

    <script>
        function car(name, model, color) {
            this.name = name;
            this.model = model;
            this.color = color;
        }

        var Lexus = new car("Lexus", "is200t", "灰");
        var BMW = new car("BMW", "320i", "黑");

        document.getElementById("car").innerHTML = Lexus.name+" "+Lexus.model+","+Lexus.color;
        document.getElementById("car2").innerHTML = BMW.name + " " + BMW.model + "," + BMW.color;
    </script>
</body>
</html>

function car(name, model, color) 定義一個物件的function,並指定參數。

var Lexus = new car("Lexus", "is200t", "灰") new一個新的物件與參數。

this 表示該物件是JavaScript所擁有的。若this使用在function中,表示該物件是function所擁有。

在宣告物件時需要特別注意,避免選告物件為字串、數字、布林。這會讓程式碼變得複雜並降低執行速度。

var x = new String();        // Declares x as a 字串物件
var y = new Number();        // Declares y as a 數字物件
var z = new Boolean();       // Declares z as a 布林值物件

 

變更物件

物件是可以變更的,如以下程式碼:

<!DOCTYPE html>
<html>
<body>

    <p id="car"></p>

    <script>
        var car = { name: "Lexus", model: "is200t", color: "灰" };
        var myCar = car;
        myCar.color = "白";
        document.getElementById("car").innerHTML = car.name + " " + car.model + "," + car.color;
    </script>

</body>
</html>

先定義了一個car物件後。

var myCar = car 定義一個myCar物件指定為car物件。myCar物件並不是複製car物件,而是代表car物件。myCar與car都是同一個物件。

myCar.color = "白" 變更myCar物件的color屬性,也會跟著改變car的屬性。

 

新增、刪除物件屬性

物件中的屬性可以做新增與刪除:

<!DOCTYPE html>
<html>
<body>

    <p id="car"></p>

    <script>
        var car = { name: "Lexus", model: "is200t", color: "灰" };
        car.price = "180W";
        delete car.color;
        document.getElementById("car").innerHTML = car.name + " " + car.model + "," + car.color+","+car.price;
    </script>

</body>
</html>

car.price = "180W" 在car物件新增一個price屬性。

delete car.color 刪除car物件的color屬性。

在新增與刪除後,可以看到color屬性為undefined(未定義),與price屬性的顯示:

 

物件屬性

在JavaScript物件中,成對的name:value即為屬性。下面程式定義了car物件的name、model、coloe屬性:

var car = { name: "Lexus", model: "is200t", color: "灰" };

 

物件方法

方法可以在物件屬性中使用function定義,呼叫於物件裡的方法執行。

<!DOCTYPE html>
<html>
<body>

    <p id="car"></p>
    <p id="action"></p>

    <script>
        var car = {
            name: "Lexus", model: "is200t", color: "灰",
            Methods: function (action) {
                return car.name + action;
            }
        };

        document.getElementById("car").innerHTML = car.name + " " + car.model + "," + car.color;
        document.getElementById("action").innerHTML = car.Methods("發動");
    </script>

</body>
</html>

Methods: function ( ) { } 加入Methods屬性,並用function()定義該屬性為方法。

return car.name + action 表示該function回傳的內容。

car.Methods() 呼叫Methods方法。

 

 END 

回目錄