Javascript for in的缺陷总结


Posted in Javascript onFebruary 03, 2017

Javascript for in的缺陷总结

for in 语句用来列举对象的属性(成员),如下

var obj = { name:"jack",
   getName:function(){return this.name}
};
//输出name,getName  
for(var atr in obj) {
  alert(atr);
}

注意了吗,没有输出obj的toString,valueOf等内置属性(或称内置成员,隐藏属性和预定义属性)。即for in用来列举对象的显示成员(自定义成员)。

如果重写了内置属性呢,下面就重写obj的toString

var obj = {name:"jack",
   getName:function(){return this.name},
   toString:function(){return "I'm jack."}
}
for(var atr in obj) {
  alert(atr);
}

会输出什么呢?

1、IE6/7/8 下和没有重写toString一样,仍然只输出name,getName

2、IE9/Firefox/Chrome/Opera/Safari下则输出name,getName,toString 

如果给内置原型添加属性/方法,那么for in时也是可遍历的

Object.prototype.clone = function() {}
var obj = {
  name: 'jack',
  age: 33
}
// name, age, clone
for (var n in obj) {
  alert(n)
}

给Object.prototype添加了方法clone,for in时所有浏览器都显示了clone。

这或许还没什么,因为一般不建议去扩展内置构造器的原型,这也是Prototype.js走向没落的原因之一。jQuery和Underscore没有扩展自原型,前者在jQuery对象上做文章,后者索性将所有方法都挂在下划线上。

但有时我们为了兼容ES5或后续版本,会在不支持ES5的浏览器上(IE6/7/8)去扩展内置构造器的原型,这时for in在各浏览器中就不同了。如下

if (!Function.prototype.bind) {
  Function.prototype.bind = function(scope) {
    var fn = this
    return function () {
      fn.apply(scope, arguments)
    }
  }
}
function greet(name) { 
  alert(this.greet + ', ' + name)
}
for (var n in greet) {
  alert(n)
}

IE6/7/8输出了bind,其它浏览器则无。因为现代浏览器中bind是原生支持的,for in不到,IE6/7/8则是给Function.prototype添加了bind。

总结下:在跨浏览器的设计中,我们不能依赖于for in来获取对象的成员名称,一般使用hasOwnProperty来判断下。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
几种tab切换详解
Feb 03 #Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 #Javascript
You might like
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python实现内存监控系统
2021/03/07 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
tensorflow 查看梯度方式
2020/02/04 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
警察思想汇报
2014/01/04 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
市场营销工作计划书
2014/05/06 职场文书
先进员工获奖感言
2014/08/14 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
长江七号观后感
2015/06/11 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
导游词之山海关
2019/12/10 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
实操Python爬取觅知网素材图片示例
2021/11/27 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技