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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
jQuery实现元素的插入
Feb 27 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
python中reduce()函数的使用方法示例
2017/09/29 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python中if有多个条件处理方法
2020/02/26 Python
python实现翻译word表格小程序
2020/02/27 Python
Python 图片处理库exifread详解
2021/02/25 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
网络宣传方案
2014/03/15 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书