Javascript学习笔记之 对象篇(四) : for in 循环


Posted in Javascript onJune 24, 2014

先上范例:

// 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 过滤属性的好习惯,不要对运行环境做任何假设,也无论原生的原型对象是否被扩展。

Javascript 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
深入探究node之Transform
Jul 20 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 #Javascript
js实现div闪烁原理及实现代码
Jun 24 #Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 #Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 #Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 #Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 #Javascript
a标签click和href执行顺序探讨
Jun 23 #Javascript
You might like
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python 实现堆排序算法代码
2012/06/05 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
信用社竞聘演讲稿
2014/05/16 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript