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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
移动端js触摸事件详解
Sep 18 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
javascript中join方法实例讲解
Feb 21 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
日语求职信范文
2013/12/17 职场文书
工作时间上网检讨书
2014/02/03 职场文书
公司应聘求职信
2014/06/21 职场文书
结对共建协议书
2014/08/20 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python