細說 Javascript 對象篇（四） : for in 循環

Kross 發布于2019-08-19 14:39 / 796人閱讀

摘要：第二是，由于會遍歷整個原型鏈，所以當原型鏈過長時，會對性能造成影響?？偨Y建議養成過濾屬性的好習慣，不要對運行環境做任何假設，也無論原生的原型對象是否被擴展。

如同 in 運算符一樣，使用 for in 循環遍歷對象屬性時，也將往上遍歷整個原型鏈。

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

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

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

enumerable 是個很陌生的詞匯，實際上，你很難在 javascript 中發現它的影子，而它實際上也是作者從 ruby 中借鑒而來的。創建 enumerable 的目的不是為了獨立使用，而是采用“混用”的方式，而 Prototype 中很多方法都混用了 enumerable，所以它可以說是 prototype 的奠基石。這里不做詳細介紹，詳細內容可以參考 - Enumerable。

由于我們沒法改變 for in 循環本身的行為，所以我們只能采取其他方法來過濾掉那些不希望出現在循環內的屬性，通過《細說 Javascript 對象篇（三） : hasOwnProperty》我們知道 hasOwnProperty 方法是可以做到這一點的。

使用 hasOwnProperty 過濾

仍然使用上個例子：

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

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

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

總結

建議養成 hasOwnProperty 過濾屬性的好習慣，不要對運行環境做任何假設，也無論原生的原型對象是否被擴展。

參考

http://bonsaiden.github.io/JavaScript-Garden/#object.forinloop

GPU云服務器云服務器 javascript for循環 for-in js js for-in in循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78049.html

細說 Javascript 數組篇（一） : 數組的遍歷和 length 屬性

摘要：遍歷為了達到最佳性能來遍歷一個數組，最好的方式就是使用經典的循環。盡管屬性是定義在數組本身的，但是在循環的每一次遍歷時仍然會有開銷。給屬性賦值一個更小的數將會截斷數組，如果賦值一個更大的數則不會截斷數組。盡管數組在 Javascript 中是對象，但是不建議使用 for in 循環來遍歷數組，實際上，有很多理由來阻止我們對數組使用 for in 循環。因為 for in 循環將會枚...

TigerChain 2019-08-21 12:17 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
細說 Javascript 函數篇（四） : ?arguments 對象

因為最近有博友反饋我的博文是直接翻譯的參考鏈接內的內容，所以我在這里要說明一下，以免引起不必要的誤會。首先，我很喜歡 segmentfault 的交流和學習的氛圍，所以我很愿意在這里跟各位 SFer 交流學習心得，相互學習，共同進步。第二，我做技術方面的工作不久，所以學習經歷也不是很長，但是我發現寫博客，總結自己的學習心得是個很好的學習習慣，至少對于我個人而言，我于此收益頗豐，所以我決定堅持一...

aristark 2019-08-21 12:15 評論0 收藏0