细说 Javascript 对象篇（四） : for in 循环

Kross 发布于2019-08-19 14:39 / 793人阅读

摘要：第二是，由于会遍历整个原型链，所以当原型链过长时，会对性能造成影响。总结建议养成过滤属性的好习惯，不要对运行环境做任何假设，也无论原生的原型对象是否被扩展。

如同 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循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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); 马上就要到七夕了，离年底老妈老爸...

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
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
细说 Javascript 函数篇（四） : arguments 对象

因为最近有博友反馈我的博文是直接翻译的参考链接内的内容，所以我在这里要说明一下，以免引起不必要的误会。首先，我很喜欢 segmentfault 的交流和学习的氛围，所以我很愿意在这里跟各位 SFer 交流学习心得，相互学习，共同进步。第二，我做技术方面的工作不久，所以学习经历也不是很长，但是我发现写博客，总结自己的学习心得是个很好的学习习惯，至少对于我个人而言，我于此收益颇丰，所以我决定坚持一...

aristark 2019-08-21 12:15 评论0 收藏0