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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
php+js实现倒计时功能
Jun 02 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
python装饰器实例大详解
2017/10/25 Python
python学生信息管理系统
2018/03/13 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
医院后勤自我鉴定
2013/10/13 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
领导干部考核评语
2015/01/04 职场文书
2015年度党员个人总结
2015/02/14 职场文书
单位车辆管理制度
2015/08/05 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android