Javascript for in的缺陷总结

发布时间 - 2026-01-10 22:50:18    点击率:

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  # for  # in的缺陷  # js  # in缺陷总结  # js字符串的各种格式的转换 ToString  # Format  # javascript 循环语句 while、do-while、for-in、for用法区别  # JavaScript中for..in循环陷阱介绍  # 在Linux上用forever实现Node.js项目自启动  # 关于js中for in的缺陷浅析  # JavaScript中for-in遍历方式示例介绍  # 得到form下的所有的input的js代码  # 为javascript添加String.Format方法  # js使用for循环与innerHTML获取选中tr下td值  # js在指定位置增加节点函数insertBefore()用法实例  # 重写  # 还没  # 则是  # 遍历  # 下划线  # 会在  # 希望能  # 写了  # 自定义  # 不支持  # 什么呢  # 挂在  # 原因之一  # 谢谢大家  # 中就  # 上做  # 或称  # 这也是  # 器中  # 器上 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 南京网站制作费用,南京远驱官方网站?  如何为不同团队 ID 动态生成多个非值班状态按钮  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  如何在IIS管理器中快速创建并配置网站?  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  Linux系统命令中screen命令详解  Java解压缩zip - 解压缩多个文件或文件夹实例  如何快速搭建FTP站点实现文件共享?  香港服务器选型指南:免备案配置与高效建站方案解析  iOS正则表达式验证手机号、邮箱、身份证号等  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  网站图片在线制作软件,怎么在图片上做链接?  Python并发异常传播_错误处理解析【教程】  EditPlus 正则表达式 实战(3)  Laravel如何使用Passport实现OAuth2?(完整配置步骤)  黑客入侵网站服务器的常见手法有哪些?  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel怎么在Blade中安全地输出原始HTML内容  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Python制作简易注册登录系统  如何快速上传自定义模板至建站之星?  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗?  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Python正则表达式进阶教程_复杂匹配与分组替换解析  MySQL查询结果复制到新表的方法(更新、插入)  湖南网站制作公司,湖南上善若水科技有限公司做什么的?  php打包exe后无法访问网络共享_共享权限设置方法【教程】  打造顶配客厅影院,这份100寸电视推荐名单请查收  浅谈Javascript中的Label语句  php 三元运算符实例详细介绍  如何在服务器上配置二级域名建站?  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?  如何在云服务器上快速搭建个人网站?  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  Android中AutoCompleteTextView自动提示  如何自己制作一个网站链接,如何制作一个企业网站,建设网站的基本步骤有哪些?  如何在云指建站中生成FTP站点?  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  JS弹性运动实现方法分析  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  Bootstrap整体框架之CSS12栅格系统  小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像  常州企业网站制作公司,全国继续教育网怎么登录?  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  怎么用AI帮你为初创公司进行市场定位分析?  如何快速打造个性化非模板自助建站?  网页制作模板网站推荐,网页设计海报之类的素材哪里好?  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  如何将凡科建站内容保存为本地文件?