Javascript中的for in循环和hasOwnProperty结合使用


Posted in Javascript onJune 05, 2013

与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性。 小结 当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误。

与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性。

// 扩展 Object.prototype 
Object.prototype.bar = 1; 
var foo = {moo: 2}; 
for(var i in foo) { 
console.log(i); // 输出 bar 和 moo 
}

我们不可能改变 for in 循环的行为,当需要对循环体内某些属性进行过滤时,可以利用Object.prototype的hasOwnProperty方法来完成。

提示:因为 for in 循环总是遍历整个原型链,所以当遍历多继承的对象时效率较低。

使用 hasOwnProperty 进行过滤

// 仍旧针对上例的foo对象 
for (var i in foo) { 
if (foo.hasOwnProperty(i)) { 
console.log(i); 
} 
}

例子中因为使用了hasOwnProperty,最终输出moo;如果忽略 hasOwnProperty ,代码将会输出非预期结果,因为本地原型(如Object.prototype)已经被扩展了。

Prototype框架就是扩展Javascript原始对象的一个类库,并被广泛使用,其缺点也很明显,当框架引入后,如果不使用 hasOwnProperty 进行过滤判断,输出结果保证不是你想要的。

最佳实践

推荐在 for in 时,总是使用 hasOwnProperty 进行判断,没人可以保证运行的代码环境是否被污染过。

hasOwnProperty
为了检查某个对象是否拥有不在原型链上的自定义属性,就有必要用到 hasOwnProperty 方法,任何一个对象都具有该方法,它继承自 Object.prototype。

提示:我们无法完全检测某个属性是否是undefined,因为属性有可能存在,但其值为undefined。hasOwnProperty 是Javascript中唯一一个可以处理对象属性而不遍历原型链的方法。

// 扩展 Object.prototype 
Object.prototype.bar = 1; 
var foo = {goo: undefined}; foo.bar; // 1 
'bar' in foo; // true 
foo.hasOwnProperty('bar'); // false 
foo.hasOwnProperty('goo'); // true

只有 hasOwnProperty 给出了正确的预期结果,当遍历对象的属性时这是很有必要的,没有其它办法来排除定义在对象原型链上的属性。

hasOwnProperty 作为属性

Javascript 并没有保护 hasOwnProperty 为关键字或保留字,因此,如果某个对象拥有同名的属性,就有必要利用扩展的 hasOwnProperty 来获取正确结果。

var foo = { 
hasOwnProperty: function() { 
return false; 
}, 
bar: 'Here be dragons' 
}; 
foo.hasOwnProperty('bar'); // 总是返回 false 
// 使用另一个 hasOwnProperty 并将 this 设置为 foo 来调用它 
{}.hasOwnProperty.call(foo, 'bar'); // true

小结
当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误。

Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 #Javascript
jquery 面包屑导航 具体实现
Jun 05 #Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 #Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 #Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 #Javascript
Javascript自定义排序 node运行 实例
Jun 05 #Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 #Javascript
You might like
PHP基础之运算符的使用方法
2013/04/28 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
教师年度考核评语
2014/04/28 职场文书
三方协议书
2015/01/27 职场文书
资料员岗位职责
2015/02/10 职场文书
实施意见格式范本
2015/06/05 职场文书
欢送领导祝酒词
2015/08/12 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang