JavaScript物件及其宣告方式

有寫過javascript的人對於這段javascript程式碼應該不陌生，

    var asd = document.getElementById('asd');
        asd.style.color = 'red';

這邊的"document"就是一個物件，"getElementById"是這個物件的方法（method），而style就是這個物件的屬性（property）；

那我們要怎麼製作一個物件呢？

主要有3種方式：

直接宣告的方式，是使用大括號{}來宣告。

    var object = {}

而大括號裡面的內容都是以冒號來宣告，舉例來說

    var object = {
      		color:'red'
       }

上面這個"color"就是"object"的屬性（property），而除了屬性以外，也可以宣告方法（method）

    var object = {
      	color:'red',
      	call:function(){
       	 	alert('asd');
       	 }
       }

這邊的"call"是就是"object"的方法（method）；另外要特別注意的是，"color"跟"call"之間適用逗號","隔開的喔。

使用函數建構子的時機在於要重複創造類似物件的時候，舉例來說，每輛車子大致上都有4顆輪胎、方向盤、雨刷及煞車，但是每台車都可以有自己的品牌跟顏色。例如，"甲"車，品牌為福特，顏色為白色，"乙"車，品牌為豐田，顏色為黑色，用程式語言表達的話就像是

    var 甲 = {
		品牌:'福特',
      		顏色:'白'
       }
       var 乙 = {
		品牌:'豐田',
      		顏色:'黑'
       }

這時候，就非常適合使用建構子了，而建構子的宣告跟一般javascript函式的宣告很像，以上面所提車子的例子為例

    function 車子(品牌,顏色) = {
	   this.品牌 = 品牌;
           this.顏色 = 顏色;            
       }

這邊有趣的是，雖然建構子長得很像函式，可是用來宣告物件的屬性卻是要加上"this"，且都是用分號";"隔開的喔。

那如何使用這個建構子來宣告物件呢?只要在建構子前加上"new"，並輸入相對應屬性即可。

    var 甲 = new 車子("福特","白色")
        var 乙 = new 車子("豐田","黑色")

如此，使用建構子就可以用來不斷創造同類別的物件，這就是為什麼以下要跟大家介紹類別(class)。

使用類別(class)

建構子與類別有異曲同工之妙，兩者皆可用來創造類似的物件，但是兩者語法也大不相同

    class 車子{
		constructor(品牌,顏色){
	  		 this.品牌 = 品牌;
     	                 this.顏色 = 顏色;  
           }
       }

宣告的方式則與建構子相同

    var 甲 = new 車子("福特","白色")
        var 乙 = new 車子("豐田","黑色")