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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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
我的论坛源代码(九)
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php数组键值用法实例分析
2015/02/27 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
vue实现购物车加减
2020/05/30 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
人事专员的职责
2014/02/26 职场文书
授权委托书格式模板
2014/04/03 职场文书
化工见习报告范文
2014/10/31 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
如何写好开幕词?
2019/06/24 职场文书