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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
再谈javascript原型继承
Nov 10 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
AngularJs表单验证实例详解
May 30 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
2021年最新CPU天梯图
2021/03/04 数码科技
社区(php&&mysql)四
2006/10/09 PHP
基于php下载文件的详解
2013/06/02 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
用python生成1000个txt文件的方法
2018/10/25 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
pandas 数据类型转换的实现
2020/12/29 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
社区党员公开承诺书
2014/08/30 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
三十年同学聚会致辞
2015/07/28 职场文书