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 IFrame 强制刷新代码
Jul 23 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
element多个表单校验的实现
May 27 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 数组遍历顺序理解
2009/09/09 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js面向对象编程总结
2017/02/16 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python中setuptools的作用是什么
2020/06/19 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
车间核算员岗位职责
2014/07/01 职场文书
作风建设年活动总结
2014/08/27 职场文书
财务务虚会发言材料
2014/10/20 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
最感人的道歉情书
2015/05/12 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
MySQL笔记 —SQL运算符
2022/01/18 MySQL