快捷導(dǎo)航

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

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

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

先上范例：

// 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)會(huì)忽略 enumerable 設(shè)置為 false 的屬性。例如一個(gè)數(shù)組的 length 屬性。第二是，由于 for in 會(huì)遍歷整個(gè)原型鏈，所以當(dāng)原型鏈過長(zhǎng)時(shí)，會(huì)對(duì)性能造成影響。

enumerable 是個(gè)很陌生的詞匯，實(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í)筆記之對(duì)象篇（三） : hasOwnProperty》我們知道 hasOwnProperty 方法是可以做到這一點(diǎn)的。

使用 hasOwnProperty 過濾

仍然使用上個(gè)例子：

// 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í)，就會(huì)出現(xiàn)錯(cuò)誤。
現(xiàn)在很多框架都會(huì)選擇從 Object.prototype 擴(kuò)展方法，所以我們使用這些框架時(shí)，如果使用沒有用 hasOwnProperty 過濾的 for in 循環(huán)時(shí)就會(huì)遇到問題。

總結(jié)

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

您可能感興趣的文章: