[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>
