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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
js中日期的加减法
May 06 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
微信小程序删除处理详解
Aug 16 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
微信小程序实现多行文字滚动
Nov 18 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中一些字符串总结
2016/05/05 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
中软Java笔试题
2012/11/11 面试题
中专自我鉴定范文
2013/10/16 职场文书
成教自我鉴定
2013/10/27 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
公务员培的训心得体会
2014/09/01 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
质量负责人岗位职责
2015/02/15 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技