物件(Object)

構造：物件就是多種屬性的集合，裡面有屬性及值，其中屬性只能是字串，增加屬性利用,號。

前面說到除了七個primitive data type/primitive value(原始型/純值)外，其他都是物件。

var person = {
  name: 'Kuro',
  job: 'Front-end developer',
  sayName: function() {
    alert( this.name );
  },
};

屬性：name
值：'Kuro'

屬性：sayName
值：function

上面這種直接用{}建立物件的方法，稱為「物件實字 (Object literal)」。

• function也是Object，可以利用console.dir()，會發現function擁有跟物件一樣的格式內容。
• console.dir()可以用來展示JavaScript中指定對象的屬性，但是請勿再正式環境使用它。
  

讀取屬性：

利用.號或是[]號：

var person = {
  name: 'Kuro',
  job: 'Front-end developer',
  family: {
      mom:'Mary',
      dad:'Tom',
      },
  sayName: function() {
    alert( this.name );
  },
  100:'$100',
  '200':'$200',
};
var manager = name ;
console.log(person.name);         //'Kuro'
console.log(person.family.mom);   //'Mary'
console.log(person['name']);   //'Mary'
console.log(person[manager]);   //'Kuro'
console.log(person[100]);   //'$100'
console.log(person['200']);   //'$200'
console.log(person.'200');   //'$200'

執行物件裡面的函式:
person.sayName();
person['sayName']();

[]號：可以讀取變數，上面例子的變數為manager；可以讀取數字形式的值。

事後增加屬性：利用=號。

var person = {
  name: 'Kuro',
  job: 'Front-end developer',
  sayName: function() {
    alert( this.name );
  },
};
person.dog = '小狗';
console.log(person.dog);  //增加了dog屬性；值是'小狗'
person['cat'] = '小貓';
console.log(person.cat);  //增加了cat屬性；值是'小貓'


var girl = 'Mary';
girl.dad = 'Tom';
console.log(girl);  //'Mary'是字串，屬於primitive data type。

如需在純值建立屬性，可採用建構式的方式。

在陣列上也可新增：

• 如果讀取未定義的屬性，那該值會出現undefined錯誤訊息。
• 如果直接讀取未定義屬性的值，則會直接出現錯誤訊息如下圖，且會造成中斷效果，之後的程式碼都會無法運作。
  

解決之道：

        girl.dad = 'Dad';
        console.log(girl.dad);       //'Dad'
        girl.dad.name = 'Tom';
        console.log(girl.dad.name); //undefined(因為girl.dad = 'Dad'，只是在girl增加屬性dad並且設定值為'Dad'，並未建立第二層物件的屬性name)
        
        
        girl.dad = {
            name: 'TOM',
        };
        console.log(girl.dad);       //{name: 'TOM'}
        console.log(girl.dad.name);  //'TOM'
        

或是直接在原本的物件上新增：

• 實務上有時候會發生下圖情況，a是not defined的錯誤訊息，代表a根本"不存在"，並使之後的程式碼都無法執行。
  
• 此時可以利用console.log(window.a)，使window瀏覽器變成一個物件，a變成屬性，那就會出現undefined，且之後的程式碼都可以順利進行。
  

事後刪除屬性：利用delete即可。

var person = {
  name: 'Kuro',
  job: 'Front-end developer',
  sayName: function() {
    alert( this.name );
  },
};

delete person.name；
delete person['job']；

• 宣告的變數，無法用delete刪除。

參考文章：

1. JS var 變數的秘密：一文看懂 var、let、const 無宣告變數細節：https://tw.alphacamp.co/blog/javascript-var-let-const
2. 關於 delete 變數詭異行為與解釋問題：https://andyyou.github.io/2016/02/25/variable-delete-operate/