深入理解JavaScript系列(1):编写高质量JavaScript代码的基本(5)

来源:未知 责任编辑:责任编辑 发表时间:2014-02-02 17:48 点击:

这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。

for-in循环(for-in Loops)
for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

有个很重要的hasOwnProperty()方法,当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

思考下面一段代码:

// 对象var man = {   hands: 2,   legs: 2,   heads: 1};// 在代码的某个地方// 一个方法添加给了所有对象if (typeof Object.prototype.clone === "undefined") {   Object.prototype.clone = function () {};}复制代码

 

在这个例子中,我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方,在对象原型上增加了一个很有用的名叫 clone()的方法。此原型链是实时的,这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法,你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤,会导致clone()函数显示出来,在大多数情况下这是不希望出现的。

// 1.// for-in 循环for (var i in man) {   if (man.hasOwnProperty(i)) { // 过滤      console.log(i, ":", man[i]);   }}/* 控制台显示结果hands : 2legs : 2heads : 1*/// 2.// 反面例子:// for-in loop without checking hasOwnProperty()for (var i in man) {   console.log(i, ":", man[i]);}/*控制台显示结果hands : 2legs : 2heads : 1clone: function()*/复制代码

 

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是:

for (var i in man) {   if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤      console.log(i, ":", man[i]);   }}复制代码
 

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;for (i in man) {    if (hasOwn.call(man, i)) { // 过滤        console.log(i, ":", man[i]);    }}复制代码
 

严格来说,不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度,你可以跳过它以提高些许的循环速度。但是当你对当前对象内容(和其原型链)不确定的时候,添加hasOwnProperty()更加保险些。
格式化的变化(通不过JSLint)会直接忽略掉花括号,把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法(每个元素都有一个自己的属性”X”,使用”X”干点什么):

// 警告: 通不过JSLint检测var i, hasOwn = Object.prototype.hasOwnProperty;for (i in man) if (hasOwn.call(man, i)) { // 过滤    console.log(i, ":", man[i]);}复制代码

 

(不)扩展内置原型((Not) Augmenting Built-in Prototypes)
扩增构造函数的prototype属性是个很强大的增加功能的方法,但有时候它太强大了。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • Gb2312转utf-8编码的方法(vbs+js)
  • 如何使用Ajax技术开发Web应用程序(1)
  • js跳转路径问题
  • JavaScript模仿桌面窗口
  • 用js检测两个线段是否相交
  • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
  • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
  • 我是如何去了解jquery的(六),案例之幻灯片轮换
  • Jquery封装幻灯片效果
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1