如同 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://segmentfault.com/blog/stephenlee/1190000000480560

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

延伸阅读:

细说JavaScript对象(1):对象的使用和属性

细说JavaScript对象(2):原型对象

细说JavaScript对象(3):hasOwnProperty

细说JavaScript对象(4): for in 循环

细说JavaScript对象(4): for in 循环的更多相关文章

  1. 细说JavaScript对象(2):原型对象

    JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...

  2. 细说JavaScript对象(3):hasOwnProperty

    判断一个属性是定义在对象本身而不是继承自原型链,我们需要使用从 Object.prototype 继承而来的 hasOwnProperty 方法. hasOwnProperty 方法是 JavaScr ...

  3. 细说JavaScript对象(1):对象的使用和属性

    JavaScript 中的一切都可以视为对象,除了两个特例:null 和 undefined. false.toString(); // 'false' [1, 2, 3].toString(); / ...

  4. 10 JavaScript对象&类&for循环

    JavaScript对象 JavaScript中所有事物都是对象:字符串.数值.数组.函数.数学和正则表达式 JavaScript有些类型可以是字面量而非对象:如字符串.数值.布尔值 JavaScri ...

  5. 细说JavaScript单线程的一些事

    标签: JavaScript 单线程 首发地址:码农网<细说JavaScript单线程的一些事> 最近被同学问道 JavaScript 单线程的一些事,我竟回答不上.好吧,感觉自己的 Ja ...

  6. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  7. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  8. Javascript并发模型和事件循环

    Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...

  9. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

随机推荐

  1. 动态删边SPFA: [HNOI2014]道路堵塞

    [HNOI2014]道路堵塞 题目描述 $A$ 国有 $N$座城市,依次标为$1$到$N$.同时,在这$N$座城市间有$M$条单向道路,每条道路的长度是一个正整数.现在,$A$国交通部指定了一条从城市 ...

  2. js万年历

    首先,注意: 1.延迟执行     window.setTimeout(    ,     )     里面的时间是以毫秒计算的 2.间隔执行    window.setInterval(     , ...

  3. event.returnValue=false与event.preventDefault()

    event.preventDefault()方法是用于取消事件的默认行为,但此方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现. funct ...

  4. ocrosoft Contest1316 - 信奥编程之路~~~~~第三关 问题 E: IQ(iq)

    http://acm.ocrosoft.com/problem.php?cid=1316&pid=4 题目描述 根据世界某权威学会的一项调查,学信息学的学生IQ非常高.举个最好的例子,如果我们 ...

  5. Codeforces 165E Compatible Numbers(二进制+逆序枚举)

    E. Compatible Numbers time limit per test 4 seconds memory limit per test 256 megabytes input standa ...

  6. 基于WEB的机器人远程控制

    1.前进后退左转右转控制: 2.视频传输,为了保证视频的流畅性,选择相机支持格式中图像最小,帧率最低的:并对视频进行处理,将15帧处理成5帧,从而降低传输数据量: 3.地图显示及导航控制: 地图在三维 ...

  7. killer驱动

    因为老的killer驱动会导致内存泄漏,killer官网网速又有如翔一般,在这里发个安装包 https://pan.baidu.com/s/1YtUrrOR74ShyDDNjHUAXBw

  8. 用Java画QRCode二维码

    支付宝.微信扫码支付的二维码,第三方的类库QRCode.jar 还是很好用的.下面贴出来这个东东生成二维码的代码. 使用时注意包括图片地址.编码内容.图片属性等几个参数,支付宝的它们的扫码回调地址. ...

  9. hdu 6119 …&&百度之星 T6

    小小粉丝度度熊 Problem Description 度度熊喜欢着喵哈哈村的大明星——星星小姐. 为什么度度熊会喜欢星星小姐呢? 首先星星小姐笑起来非常动人,其次星星小姐唱歌也非常好听. 但这都不是 ...

  10. 阿里云服务器上使用apt-get install出现404 Not Found

    阿里云服务器上使用apt-get install出现404 Not Found 刚申请了的阿里云服务器,在其Ubuntu上用apt-get install安装软件时,会遇到 Failed to fet ...