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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
js解决movebox移动问题
2016/03/29 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue实现移动端图片上传功能
2019/12/23 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python初步实现word2vec操作
2020/06/09 Python
python实现图片素描效果
2020/09/26 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
大学同学会活动方案
2014/08/20 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
安全教育培训心得体会
2016/01/15 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Python实现简单的猜单词
2021/06/15 Python