<<Javascript Patterns>>阅读笔记 第2章 基本技巧(二)

关于for-in循环

循环数据时, 强烈不推荐使用for-in循环.因为当Array对象被扩展后, 再用for-in循环遍历数据会导致逻辑上的错误, 举例说明:

var arr = ['a', 'b', 'c'];
// 下标遍历
for(var i=0, len=arr.length; i<len; i++) {
    console.info(typeof i); // number
    console.info(i);
}
// for-in遍历
for(var i in arr) {
    console.info(typeof i); // string
    console.info(i);
}
console.log(arr.length); // 3

此时, for-in遍历数组时, i的类型为string, 已不再是数组的下标, 而是作为数组对象的key出现的(Javascript中数组也是对象).

若在遍历前加上以下代码, 则for-in循环将出现逻辑上的错误

if(typeof Array.prototype.len === 'undefined') {
    Array.prototype.len = function() {
        return this.length;
    };
}

即给数组添加原型方法len()

console.log(arr.length); // 输出仍为3

但for-in循环却同时将len输出出来了, 这说明for-in确实是将Array当成一个Object来遍历的, len作为对象的一个属性自然也会被遍历出来.

总之, 我们可以不乱在原型上添加方法, 不能保证别人不会, 所以最好是不要使用for-in循环数组.

当使用for-in遍历一个对象时, 一般与hasOwnProperty()一起使用, hasOwnProperty()用于过滤原型属性或原型方法, 举例说明:

// 定义一个person对象, 包含两个属性和一个方法
var person = {
    name: '张三',
    age: 28,
    say: function() {
        // ...
    }
}
// 在Object上扩展一个方法sleep()
if(typeof Object.prototype.sleep === 'undefined') {
    Object.prototype.sleep = function() {
        // ...
    }
}
// 使用hasOwnProperty()的for-in循环
for(var i in person) {
    if(person.hasOwnProperty(i)) {
        console.info(i);
    }
}
/*
控制台打印结果:
name
age
say
 */
// 不使用hasOwnProperty()的for-in循环
for(var i in person) {
    console.info(i);
}
/*
控制台打印结果:
name
age
say
sleep
 */

需要说明的是, 不使用hasOwnProperty()并没有错, 只是可能会对循环结果带来一些混乱, 如果自己的代码有足够信心, 可以不hawOwnProperty(), 还可以稍微提高循环速度.

不要增加内置的原型

给内置原型增加方法或属性是很强大的一个功能, 但正是由于它的强大, 往往会给维护带来巨大的成本. 此外, 如上面所述, 如果给扩展了内置原型, 在没有使用hasOwnProperty()的循环中会导致一些混乱.

如果, 一定要扩展原型, 那么要先检查自定义的属性或方法是否已经存在, 若不存在再进行扩展, 此外一定要用文档记录下来, 以便团队交流. 以下模式可以用来扩展原型:

if(typeof Object.prototype.myMethod === 'undefined') {
    Object.prototype.myMethod = function() {
        // ...
    }
}

避免使用隐匿的类型转换

Javascript存在隐匿的类型转换, 比如fasle == 0, “” == 0这类的比较语句都回返回true, 在一定程度上会引起混淆, 类型不清.

所以建议在比较比较语句中使用===和!==比较数值和类型

避免使用eval()

第一句话”eval()是魔鬼”

一般提前编写好的代码是不需要使用eval()的, 如果代码是在运行过程中动态生成的, 可能需要使用eval()让其转换为Javascript代码, 但有更好的方法来代替eval(), 此类情况多数出现在处理ajax返回值时, 例如:

// ajax请求返回一个字符串"name", 要给一个对象obj添加一个属性, 并以name作为属性名, '张三'作为属性值
var property = "name";
var obj = {
    age: 22
};
// 反模式, 不要使用
// eval('obj.' + property + '= "z3"');
// 推荐
obj[property] = '张三';
for(var i in obj) {
    console.info(i);
}

使用eval()也包含一些隐患, 有可能会执行一些被篡改过的代码.

同时, setInterval()和setTimeout()的调用与eval()有类似的问题

// 反模式
setTimeout(“myFunc()”, 1000);
setTimeout(“myFunc(2, 5, 7)”, 1000);
// 推荐
setTimeout(myFunc, 1000);
setTimeout(function(){
    myFunc(2, 5, 7);
}, 1000);

如果一定要使用eval(), 那么可以考虑是否可以用new Function()来代替eval().

因为使用new Function()代码将在一个局部函数空间中运行, 任何使用var定义的变量不会自动成为全局变量, 例如:

new Function("var p = 3; console.info(p);")(); // 3
console.info(p); // ReferenceError: p is not defined
eval("var p1 = 4; console.info(p1);"); // 4
console.info(p1); // 4

另一个防止自动成为全局变量的方法是将eval()封闭到一个立即执行函数中, 如:

(function(){
    eval('var num = 11; console.info(num);'); // 11
})();
console.info(num); // ReferenceError: p is not defined

new Function()和eval()的另一个区别是, eval()会影响到作用域链, 而new Function()对局部变量的影响比较小.

eval()可以访问和修改它外部作用域的变量, 而new Function()不能. 例子:

(function(){
    var num = 13;
    eval('var num = 20; console.info(num);'); // 20
    console.info(num); //20, 改变了num的值
})();
(function(){
    var num = 12;
    new Function('var num = 17; console.info(num);')(); // 17
    console.info(num); // 12
})();

使用parseInt()的数值约定

这个约定主要是为了解决ECMAScript新旧版本不一致的问题,

在ECMAScript早期的版本中, 0开头的字符串会被当成一个八进制数, 在ECMAScript5中发生了改变, 所以在使用parseInt()方法时, 最好不要忽略第二个参数(进制参数),

例如在处理日期字符串时:

var month = '07',
    date = '02';
month = parseInt(month, 10);
date = parseInt(date, 10);

另外, 如果是转换纯数字字符串, 例如'09', 那么使用Number('09')会更效率一些,

如果是非纯数字字符串, 例如'02 hello', 那么只有使用parseInt('02 hello')了, Number('02 hello')会返回NaN

编码约定

书中提到的编码约定, 都为了提高代码的可读性, 降低代码的维护成本,

包括缩进, 空间, 大括号, 命名规则, 空格的使用等.

其中, 要注意的一点是大括号的位置, 由于分号的插入机制, 会导致某些代码执行结果出人意料, 例如:

// 出人意料的返回结果
function func() {
    return
    {
        name: '鸣人'
    };
}
console.info(func()); // undefined;
// 以上写法相当于
function func1() {
    return undefined;
    {
        name: '鸣人'
    };
}
// 总之, 推荐将大括号放在前面语句的的同一行:
function func3() {
    return {
        name: '鸣人'
    };
}