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判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
护理专业的自荐信
2013/10/22 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
行政前台岗位职责
2013/12/04 职场文书
办理居住证介绍信
2014/01/15 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
《小小的船》教学反思
2016/02/18 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers