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 键盘事件的组合使用实现代码
May 04 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
使用webpack构建应用的方法步骤
Mar 04 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
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP函数积累总结
2019/03/19 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
用python制作游戏外挂
2018/01/04 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
党委书记岗位职责
2013/11/24 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
交通事故和解协议书
2015/01/27 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
安全教育主题班会教案
2015/08/12 职场文书
春节随笔
2015/08/15 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python