Javascript 存取物件屬性的方式

在取動態物件時會需要用到

JavaScript 有兩種方式可以用來存取物件屬性，假設我們有以下這個物件：

var myObject = {
   att1: '123',
   att2: '456',
   func1: function () {},
   func2: function () {}
}

第一種存取的方法是用 JavaScript 的物件屬性存取子「句點 (.) 」：

myObject.attr1;
myObject.attr2;
myObject.func1();
myObject.func2();

第二種方法是利用關聯索引來存取：

myObject['attr1'];
myObject['attr2'];
myObject['func1']();
myObject['func2']();

為什麼要有第二種方法呢？這就是今天的主題了，如果今天我要動態存取物件屬性要怎麼做呢？

---

動態存取

找出myObject 物件裡的各項屬性，可以用以下的方法

for (var attrName in myObject) {
    alert(attrName + ':' + 每個屬性的值);
}

這裡 attrName 會依序是 attr1, attr2, func1, func2 ，那麼我們怎麼抓到每個屬性的值呢？

那就是用第二種方法：

for (var attrName in myObject) {
    alert(attrName + ':' + myObject[attrName]);
}

在這裡 attrName 會自動轉型成字串，用來當做關聯索引的值，也讓我們能夠存取到 myObject 物件裡對應的資訊。

那為什麼不能用第一種方法呢？

for (var attrName in myObject) {
    alert(attrName + ':' + myObject.attrName); // myObject.attrName 可以嗎？
}

因為 JavaScript 規定在句點後面不能接上一個變數，所以如果我們用 myObject.attrName 的話，會被 JavaScript 解釋成要存取 myObject 的 attrName 屬性。

那可以用eval嗎？

for (var attrName in myObject) {
    alert(attrName + ':' + eval('myObject.' + attrName));
}

儘可能別用eval，因為他會拖慢速度，所以還是用第二種方式就好啦。