快捷導(dǎo)航

Javascript學(xué)習(xí)筆記之對象篇（四） : for in 循環(huán)

更新時(shí)間：2014年06月24日 09:12:10 投稿：hebedich

如同 in 運(yùn)算符一樣，使用 for in 循環(huán)遍歷對象屬性時(shí)，也將往上遍歷整個原型鏈。

先上范例：

// Poisoning Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
 console.log(i); // prints both bar and moo
}

這里我們要注意兩點(diǎn)，一是 for in 循環(huán)會忽略 enumerable 設(shè)置為 false 的屬性。例如一個數(shù)組的 length 屬性。第二是，由于 for in 會遍歷整個原型鏈，所以當(dāng)原型鏈過長時(shí)，會對性能造成影響。

enumerable 是個很陌生的詞匯，實(shí)際上，你很難在 javascript 中發(fā)現(xiàn)它的影子，而它實(shí)際上也是作者從 ruby 中借鑒而來的。創(chuàng)建 enumerable 的目的不是為了獨(dú)立使用，而是采用“混用”的方式，而 Prototype 中很多方法都混用了 enumerable，所以它可以說是 prototype 的奠基石。這里不做詳細(xì)介紹，詳細(xì)內(nèi)容可以參考 - Enumerable。
由于我們沒法改變 for in 循環(huán)本身的行為，所以我們只能采取其他方法來過濾掉那些不希望出現(xiàn)在循環(huán)內(nèi)的屬性，通過《Javascript學(xué)習(xí)筆記之對象篇（三） : hasOwnProperty》我們知道 hasOwnProperty 方法是可以做到這一點(diǎn)的。

使用 hasOwnProperty 過濾

仍然使用上個例子：

// Poisoning Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
 for(var i in foo) {
 if (foo.hasOwnProperty(i)) {
  console.log(i);
 }
 }

這是唯一正確的寫法，由于我們實(shí)用了 hasOwnProperty 方法，所以這次只輸出 moo。如果不適用 hasOwnProperty 方法，那么當(dāng) Object.prototype 擴(kuò)展時(shí)，就會出現(xiàn)錯誤。
現(xiàn)在很多框架都會選擇從 Object.prototype 擴(kuò)展方法，所以我們使用這些框架時(shí)，如果使用沒有用 hasOwnProperty 過濾的 for in 循環(huán)時(shí)就會遇到問題。

總結(jié)

建議養(yǎng)成 hasOwnProperty 過濾屬性的好習(xí)慣，不要對運(yùn)行環(huán)境做任何假設(shè)，也無論原生的原型對象是否被擴(kuò)展。

您可能感興趣的文章: