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 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python字符串替换示例
2014/04/24 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
如何在pycharm中安装第三方包
2020/10/27 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
《识字五》教学反思
2014/03/01 职场文书
小学毕业演讲稿
2014/04/25 职场文书
关爱残疾人标语
2014/06/25 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
PHP命令行与定时任务
2021/04/01 PHP
MySQL 视图(View)原理解析
2021/05/19 MySQL
Redis 常见使用场景
2021/08/30 Redis
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python