JS核心-(24)-物件-未定義的物件屬性預設值

前言

JavaScript 裡，如果去存取一個物件中沒有的屬性，會回傳undefined，這是物件取值的保護機制。

未定義的物件屬性預設值

如果我們用物件實字的方式產生了一個物件，那麼對這個物件查找不存在的屬性的時候，會回傳甚麼呢?

var family = {
    name: '小明家'
}

console.log(family); // {name: '小明家';}
console.log(family.a); // undefined

得到的是 undefined

如果我們又對一個不存在的屬性進行另一個屬性的賦值，又會發生甚麼事情呢?

var family = {
    name: '小明家'
}

family.a.b = 'c'; //Uncaught TypeError: Cannot set property 'b' of undefined

得到的是 Uncaught TypeError: Cannot set property 'b' of undefined

我們不能把 'b' 這個屬性設定在一個 undefined 的東西上，所以要避免這個問題有兩種方式：

方法一: 調整物件的結構

var family = {
    name: '小明家'
    a: {}
}

family.a.b = 'c';

方法二: 直接對要設定的值進行變化

var family = {
    name: '小明家'
}

family.a = {
    b: 'c'
}

回過頭來講解，文章一開始說到對物件查找不存在的屬性得到 undefined 的結果，而不是 not defined ，這是物件取值的保護機制，避免存取到不存在的屬性時產生錯誤，導致後續的程式碼無法繼續執行。

查找全域屬性

有時候查找的東西是屬於全域的變數的時候

var family = {
    name: '小明家'
}

family.a = {
    b: 'c'
}

console.log(a); // Uncaught ReferenceError: a is not defined
console.log(family);

我們可以看到 a is not defined ，但後面還有 console.log(family); 就不執行了!
這也是 javascript 的特性，只要一報紅色的錯誤，程式就會中斷，不繼續往下執行。

那麼為了迴避這個錯誤，可以利用剛剛提到的觀念

var family = {
    name: '小明家'
}

family.a = {
    b: 'c'
}

console.log(window.a); // 改為 window.a
console.log(family);

這樣修改以後，等同於在 window 這個物件中找尋不存在的屬性，這樣就只會回傳 undefined 而不會報錯囉~ console.log(family); 的程式碼也會繼續執行