对象

JavaScript 中所有变量都可以当作对象使用，除了两个例外 null 和 undefined。

false.toString(); // false
[1, 2, 3].toString(); // "1,2,3"

funciton Fun(){}
Fun.num = 1;
Fun.num; // 1

一个常见的误解是数字的字面值不能当作对象使用。这是因为JavaScript解析器的一个错误，他试图将点操作符解析为浮点数字字面值的一部分。

7.toString(); // SyntaxError

有一些变通的方法可以让数字的字面值看起来像对象。

7..toString(); // 第二个点可以正常解析
7 .toString(); // 注意点前面的空格
(7).toString(); // 7 先被计算

对象作为数据类型

JavaScript的对象可以作为哈希表使用，主要用来保存命名的键与值的对应关系。

使用对象的字面语法 {} 可以创建一个简单对象。这个新创建的对象从 Object.prototype 继承下面，没有任何自定义属性。

var obj = {} // 一个空对象

// 一个对象，拥有12的自定义属性'test'
var obj2 = {
    test: 12
}

访问属性

有两种方式来访问对象的属性，点操作符或者中括号操作符。

var obj = {
    name: 'kitten'
}
obj.name; // kitten
obj[name]; // kitten

var name = 'name'
obj[name]; // kitten

两种语法是等价的，但是中括号操作符在下面两种情况下依然有效

动态设置属性
属性名不是一个有效的变量名(比如：属性名中包含空格，或者属性名是 JS 的关键词)

删除属性

删除属性的唯一方法是使用 delete 操作符；设置属性为 undefined 或者 null 并不能真正的删除属性，而仅仅是移除了属性和值的关联。

var obj = {
    a: 1,
    b: 2,
    c: 3
};
obj.a = undefined;
obj.b = null;
delete obj.c;
for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

上面的输出结果有 a undefined 和 b null ，只有 c 被真正的删除了，所以从输出结果中消失。

属性名的语法

var test = {
    'case': 'I am a keyword so I must be notated as a string',
    delete: 'I am a keyword too so me' // 出错：SyntaxError
}

对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计，上面的第二种声明方式在 ECMAScript 5 之前会抛出 SyntaxError 的错误。这个错误的原因是 delete 是 JavaScript 语言的一个关键词；因此为了在更低版本的 JavaScript 引擎下也能正常运行，必须使用字符串字面值声明方式。

原型

JavaScript 不包含传统的类继承模型，而是使用 prototype 原型模型。

由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言，所以理解两种继承模式的差异是需要一定时间的。第一个不同之处在于 JavaScript 使用 原型链 的继承方式。

function Fun() {
    this.value  = 97;
}
Fun.prorotype = {
    method: function() {}
};
function Demo() {}

// 设置Demo的prototype属性为Fun的示例对象
Demo.prototype = new Fun();
Demo.prototype.fun = 'Hello啊';

// 修正Demo.prototype.constructor 为 Demo 本身
Demo.prototype.constructor = Demo;
var test = new Demo(); // 创建一个Demo的一个新实例

// 原型链
test [Demo的示例]
    Demo.prototype [Fun的实例]
        { fun: 'Hello啊' }
        Foo.prototype
            { method: ...}
                Object.prototype
                    {toString:... /* etc. */}

上面的例子中，test 对象从 Demo.prototype 和 Fun.prototype 继承下来；因此，它能访问 Fun 的原型方法 method。同时，它也能够访问那个定义在原型上的 Fun 实例属性 value。需要注意的是 new Demo() 不会创造出一个新的 Fun 实例，而是重复使用它原型上的那个实例；因此，所有的 Demo 实例都会共享相同的 value 属性。

属性查找

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。

到查找到达原型链的顶部，也就是 Object.prototype 但是仍然没有找到指定的属性，就会返回 undefined。

原型属性

当原型属性用来创建原型链时，可以把任何类型的值赋给它（prototype）。然而将原子类型赋给 prototype 的操作将会被忽略。

function Fun() {}
Fun.prototype = 1; // 无效

而将对象赋值给 prototype，正如上面的例子所示，将会动态的创建原型链。

性能

如果一个属性在原型链的上端，则对于查找时间将带来不利影响。特别的，试图获取一个不存在的属性将会遍历整个原型链。

并且，当使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问。

扩展内置类型的原型

一个错误特性被经常使用，那就是扩展 Object.prototype 或者其他内置类型的原型对象。

这样会破坏封装。虽然它被广泛的应用到一些 JavaScript 类库中比如P rototype ,但是我不认为为内置类型添加一些非标准的函数是个好主意。

扩展内置类型的唯一理由是为了和新的 JavaScript 保持一致，比如 Array.forEach。

总结

在写复杂的 JavaScript 应用之前，充分理解原型链继承的工作方式是每个 JavaScript 程序员必修的功课。要提防原型链过长带来的性能问题，并知道如何通过缩短原型链来提高性能。更进一步，绝对不要扩展内置类型的原型，除非是为了和新的 JavaScript 引擎兼容。

hasOwnProperty 函数

为了判断一个对象是否包含自定义属性而不是原型链上的属性，我们需要使用继承自 Object.prototype 的 hasOwnProperty 方法。

hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

// 修改Object.prototype
Object.prototype.value = 1
var obj = {
    s: undefined
};
obj.value; // 1
's' in obj; // true

obj.hasOwnProperty('s'); // true
obj.hasOwnProperty('value'); // false

只有 hasOwnProperty 可以给出正确和期望的结果，这在遍历对象的属性时会很有用。没有其它方法可以用来排除原型链上的属性，而不是定义在对象自身上的属性。

hasOwnProperty 作为属性

JavaScript 不会保护 hasOwnProperty 被非法占用，因此如果一个对象碰巧存在这个属性，就需要使用外部的 hasOwnProperty 函数来获取正确的结果。

var obj = {
    hasOwnProperty: function() {
        return false;
    },
    str: 'Here be dragons'
};

obj.hasOwnProperty('str'); // 总是返回 false

// 使用其它对象的 hasOwnProperty，并将其上下文设置为obj
({}).hasOwnProperty.call(obj, 'str'); // true

结论

当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。同时在使用 for in loop 遍历对象时，推荐总是使用 hasOwnProperty 方法，这将会避免原型对象扩展带来的干扰。

for in 循环

和 in 操作符一样，for in 循环同样在查找对象属性时遍历原型链上的所有属性。

// 修改 Object.prototype
Object.prototype.value = 1;

var obj = {num: 2};
for(var i in obj) {
    console.log(i); // 输出两个属性：value 和 num
}

由于不可能改变 for in 自身的行为，因此有必要过滤出那些不希望出现在循环体中的属性，这可以通过 Object.prototype 原型上的 hasOwnProperty 函数来完成。

使用 hasOwnProperty 过滤

// obj 变量是上例中的
for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i);
    }
}

这个版本的代码是唯一正确的写法。由于我们使用了 hasOwnProperty，所以这次只输出 num。如果不使用 hasOwnProperty，则这段代码在原生对象原型（比如 Object.prototype）被扩展时可能会出错。

总结

推荐总是使用 hasOwnProperty。不要对代码运行的环境做任何假设，不要假设原生对象是否已经被扩展了。

函数f(x)

函数声明与表达式

函数是JavaScript中的一等对象，这意味着可以把函数像其它值一样传递。一个常见的用法是把匿名函数作为回调函数传递到异步函数中。

函数声明

function fun() {}

上面的方法会在执行前被解析(hoisted)，因此它存在于当前上下文的任意一个地方，即使在函数定义体的上面被调用也是对的。

fun(); // 正常运行，因为fun在代码运行前已经被创建
function fun() {}

函数赋值表达式

var fun = function() {};

这个例子把一个匿名的函数赋值给变量 fun。

fun; // 'undefined'
fun(); // 出错：TypeError
var fun = function() {};

由于 var 定义了一个声明语句，对变量 fun 的解析是在代码运行之前，因此 fun 变量在代码运行时已经被定义过了。

但是由于赋值语句只在运行时执行，因此在相应代码执行之前， fun 的值缺省为 undefined。

命名函数的赋值表达式

另外一个特殊的情况是将命名函数赋值给一个变量。

var demo = function fun() {
    fun(); // 正常运行
}
fun(); // 出错：ReferenceError

fun 函数声明外是不可见的，这是因为我们已经把函数赋值给了 demo；然而在 fun 内部依然可见。这是由于 JavaScript 的命名处理所致，函数名在函数内总是可见的。

注意:在IE8及IE8以下版本浏览器bar在外部也是可见的，是因为浏览器对命名函数赋值表达式进行了错误的解析，解析成两个函数 demo 和 fun

this 的工作原理

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。在五种不同的情况下，this 指向的各不相同。

全局范围内

this;

当在全部范围内使用 this，它将会指向全局对象。

函数调用

fun();

这里 this 也会指向全局对象。(浏览器中运行的 JavaScript 脚本，这个全局对象是 window。)

ES5 注意: 在严格模式下（strict mode），不存在全局变量。这种情况下 this 将会是 undefined。

方法调用

test.foo();

这个例子中，this 指向 test 对象。

调用构造函数

new foo();

如果函数倾向于和 new 关键词一块使用，则我们称这个函数是构造函数。在函数内部，this 指向新创建的对象。

显式的设置 this

function fun(a, b, c) {}

var obj = {};
fun.apply(obj, [1, 2, 3]); // 数组将会被扩展，如下所示
fun.call(obj, 1, 2, 3); // 传递到fun的参数是：a = 1, b = 2, c = 3

常见误解

尽管大部分的情况都说的过去,但是直接调用函数时，this 指向全局对象。被认为是JavaScript语言另一个错误设计的地方，因为它从来就没有实际的用途。

Fun.method = function() {
    function test() {
        // this 将会被设置为全局对象（浏览器环境中也就是 window 对象）
    }
    test();
}

一个常见的误解是 test 中的 this 将会指向 Fun 对象，实际上不是这样子的。

为了在 test 中获取对 Fun 对象的引用，我们需要在 method 函数内部创建一个局部变量指向 Fun 对象。

Fun.method = function() {
    var _this = this;
    function test() {
        // 使用 _this 来指向 Fun 对象
    }
    test();
}

_this 只是我们随意起的名字，不过这个名字被广泛的用来指向外部的 this 对象。在闭包一节，我们可以看到 _this 可以作为参数传递。

方法的赋值表达式

另一个看起来奇怪的地方是函数别名，也就是将一个方法赋值给一个变量。

var test = someObject.methodTest;
test();

上例中，test 就像一个普通的函数被调用；因此，函数内的 this 将不再被指向到 someObject 对象。

虽然 this 的晚绑定特性似乎并不友好，但这确实是基于原型继承赖以生存的土壤。

function Fun() {}
Fun.prototype.method = function() {};

function Test() {}
Test.prototype = Foo.prototype;

new Test().method();

当 method 被调用时，this 将会指向 Test 的实例对象。

闭包和引用

闭包是 JavaScript 一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是 JavaScript 中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数。

模拟私有变量

function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var obj = Counter(4);
obj.increment();
obj.get(); // 5

这里，Counter 函数返回两个闭包，函数 increment 和函数 get。这两个函数都维持着对外部作用域 Counter 的引用，因此总可以访问此作用域内定义的变量 count.

为什么不可以在外部访问私有变量

因为 JavaScript 中不可以对作用域进行引用或赋值，因此没有办法在外部访问 count 变量。唯一的途径就是通过那两个闭包。

var obj = new Counter(4);
obj.hack = function() {
    count = 1337;
};

上面的代码不会改变定义在 Counter 作用域中的 count 变量的值，因为 foo.hack 没有定义在那个作用域内。它将会创建或者覆盖全局变量 count。

循环中的闭包

一个常见的错误出现在循环中使用闭包，假设我们需要在每次循环中调用循环序号

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的代码不会输出数字 0 到 9，而是会输出数字 10 十次。

当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for循环已经结束， i 的值被修改成了 10.

为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。

避免引用错误

为了正确的获得循环序号，最好使用 匿名包装器（其实就是我们通常说的自执行匿名函数）。

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。

当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是不会被循环改变的。

有另一个方法完成同样的工作，那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

当然，使用ES6中的let关键字是十分方便的，因为 let 关键字所在的代码块内有效，而且有暂时性死区的约束。

for(let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

arguments 对象

JavaScript 中每个函数内都能访问一个特别变量 arguments。这个变量维护着所有传递到这个函数中的参数列表。

arguments 变量不是一个数组（Array）。尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承，实际上它是一个对象（Object）。

因此，无法对 arguments 变量使用标准的数组方法，比如 push, pop 或者 slice。虽然使用 for 循环遍历也是可以的，但是为了更好的使用数组方法，最好把它转化为一个真正的数组。

转化为数组

下面的代码将会创建一个新的数组，包含所有 arguments 对象中的元素。

Array.prototype.slice.call(arguments);

这个转化比较慢，在性能不好的代码中不推荐这种做法。

使用ES6提供的Array.from()将arguments 变量这种伪数组转化为数组也是十分方便的。

Array.from(arguments);

传递参数

下面是将参数从一个函数传递到另一个函数的推荐做法。

function fun() {
    demo.apply(null, arguments);
}
function demo(a, b, c) {
    // 干活
}

另一个技巧是同时使用 call 和 apply，创建一个快速的解绑定包装器。

function Fun() {}

Fun.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// 创建一个解绑定的 "method"
// 输入参数为: this, arg1, arg2...argN
Fun.method = function() {

    // 结果: Fun.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Fun.prototype.method, arguments);
};

上面的 Fun.method 函数和下面代码的效果是一样的:

Fun.method = function() {
    var args = Array.prototype.slice.call(arguments);
    Fun.prototype.method.apply(args[0], args.slice(1));
};

自动更新

arguments 对象为其内部属性以及函数形式参数创建 getter 和 setter 方法。

因此，改变形参的值会影响到 arguments 对象的值，反之亦然。

function fun(a, b, c) {
    arguments[0] = 2;
    a; // 2                                                           

    b = 4;
    arguments[1]; // 4

    var d = c;
    d = 9;
    c; // 3
}
fun(1, 2, 3);

性能真相

不管它是否有被使用，arguments 对象总会被创建，除了两个特殊情况 - 作为局部变量声明和作为形式参数。

arguments 的 getters 和 setters 方法总会被创建；因此使用 arguments 对性能不会有什么影响。除非是需要对 arguments 对象的属性进行多次访问。

在 MDC 中对 strict mode 模式下 arguments 的描述有助于我们的理解，请看下面代码：

// 阐述在 ES5 的严格模式下 `arguments` 的特性
function f(a) {
  "use strict";
  a = 42;
  return [a, arguments[0]];
}
var pair = f(17);
console.assert(pair[0] === 42);
console.assert(pair[1] === 17);

然而，的确有一种情况会显著的影响现代 JavaScript 引擎的性能。这就是使用 arguments.callee。

function fun() {
    arguments.callee; // do something with this function object
    arguments.callee.caller; // and the calling function object
}

function bigLoop() {
    for(var i = 0; i < 100000; i++) {
        fun(); // Would normally be inlined...
    }
}

上面代码中，fun 不再是一个单纯的内联函数 inlining（译者注：这里指的是解析器可以做内联处理），因为它需要知道它自己和它的调用者。这不仅抵消了内联函数带来的性能提升，而且破坏了封装，因此现在函数可能要依赖于特定的上下文。

因此强烈建议大家不要使用 arguments.callee 和它的属性。

构造函数

JavaScript 中的构造函数和其它语言中的构造函数是不同的。通过 new 关键字方式调用的函数都被认为是构造函数。

在构造函数内部 - 也就是被调用的函数内 - this 指向新创建的对象 Object。这个 新创建 的对象的 prototype 被指向到构造函数的 prototype。

如果被调用的函数没有显式的 return 表达式，则隐式的会返回 this 对象 - 也就是新创建的对象。

function Fun() {
    this.bla = 1;
}

Fun.prototype.test = function() {
    console.log(this.bla);
};

var test = new Fun();

上面代码把 Fun 作为构造函数调用，并设置新创建对象的 prototype 为 Fun.prototype。

显式的 return 表达式将会影响返回结果，但仅限于返回的是一个对象。

function Demo() {
    return 2;
}
new Demo(); // 返回新创建的对象

function Test() {
    this.value = 2;

    return {
        foo: 1
    };
}
new Test(); // 返回的对象

new Demo() 返回的是新创建的对象，而不是数字的字面值 2。因此 new Demo().constructor === Demo，但是如果返回的是数字对象，结果就不同了，如下所示

function Demo() {
    return new Number(2);
}
new Demo().constructor === Number

这里得到的 new Test()是函数返回的对象，而不是通过new关键字新创建的对象，因此：

(new Test()).value === undefined
(new Test()).foo === 1

如果 new 被遗漏了，则函数不会返回新创建的对象。

function Fun() {
    this.bla = 1; // 获取设置全局参数
}
Fun(); // undefined

虽然上例在有些情况下也能正常运行，但是由于 JavaScript 中 this 的工作原理，这里的 this 指向全局对象。

作用域与命名空间

尽管 JavaScript 支持一对花括号创建的代码段，但是并不支持块级作用域；而仅仅支持函数作用域。

function test() { // 一个作用域
    for(var i = 0; i < 10; i++) { // 不是一个作用域
        // count
    }
    console.log(i); // 10
}

如果 return 对象的左括号和 return 不在一行上就会出错。

// 下面输出 undefined
function add(a, b) {
    return 
        a + b;
}
console.log(add(1, 2));

JavaScript 中没有显式的命名空间定义，这就意味着所有对象都定义在一个全局共享的命名空间下面。

每次引用一个变量，JavaScript 会向上遍历整个作用域直到找到这个变量为止。如果到达全局作用域但是这个变量仍未找到，则会抛出 ReferenceError 异常。

隐式的全局变量

// 脚本 A
foo = '42';

// 脚本 B
var foo = '42'

上面两段脚本效果不同。脚本 A 在全局作用域内定义了变量 foo，而脚本 B 在当前作用域内定义变量 foo。

再次强调，上面的效果完全不同，不使用 var 声明变量将会导致隐式的全局变量产生。

// 全局作用域
var foo = 42;
function test() {
    // 局部作用域
    foo = 21;
}
test();
foo; // 21

在函数 test 内不使用 var 关键字声明 foo 变量将会覆盖外部的同名变量。起初这看起来并不是大问题，但是当有成千上万行代码时，不使用 var 声明变量将会带来难以跟踪的 BUG。

// 全局作用域
var items = [/* 数组 */];
for(var i = 0; i < 10; i++) {
    subLoop();
}

function subLoop() {
    // subLoop 函数作用域
    for(i = 0; i < 10; i++) { // 没有使用 var 声明变量
        // 干活
    }
}

外部循环在第一次调用 subLoop 之后就会终止，因为 subLoop 覆盖了全局变量 i。在第二个 for 循环中使用 var 声明变量可以避免这种错误。声明变量时绝对不要遗漏 var 关键字，除非这就是期望的影响外部作用域的行为。

局部变量

JavaScript 中局部变量只可能通过两种方式声明，一个是作为函数参数，另一个是通过 var 关键字声明。

// 全局变量
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
    // 函数 test 内的局部作用域
    i = 5;

    var foo = 3;
    bar = 4;
}
test(10);

变量声明提升（Hoisting）

JavaScript 会提升变量声明。这意味着 var 表达式和 function 声明都将会被提升到当前作用域的顶部。

Demo();
var Demo = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}

上面代码在运行之前将会被转化。JavaScript 将会把 var 表达式和 function 声明提升到当前作用域的顶部。

// var 表达式被移动到这里
var bar, someValue; // 缺省值是 'undefined'

// 函数声明也会提升
function test(data) {
    var goo, i, e; // 没有块级作用域，这些变量被移动到函数顶部
    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

bar(); // 出错：TypeError，因为 bar 依然是 'undefined'
someValue = 42; // 赋值语句不会被提升规则（hoisting）影响
bar = function() {};

test();

没有块级作用域不仅导致 var 表达式被从循环内移到外部，而且使一些 if 表达式更难看懂。

在原来代码中，if 表达式看起来修改了全局变量 goo，实际上在提升规则被应用后，却是在修改局部变量。

如果没有提升规则（hoisting）的知识，下面的代码看起来会抛出异常 ReferenceError。

// 检查 SomeImportantThing 是否已经被初始化
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}

实际上，上面的代码正常运行，因为 var 表达式会被提升到全局作用域的顶部。

var SomeImportantThing;

// 其它一些代码，可能会初始化 SomeImportantThing，也可能不会

// 检查是否已经被初始化
if (!SomeImportantThing) {
    SomeImportantThing = {};
}

名称解析顺序

JavaScript 中的所有作用域，包括全局作用域，都有一个特别的名称 this 指向当前对象。

函数作用域内也有默认的变量 arguments，其中包含了传递到函数中的参数。

比如，当访问函数内的 obj 变量时，JavaScript 会按照下面顺序查找：

当前作用域内是否有 var obj 的定义。
函数形式参数是否有使用 obj 名称的。
函数自身是否叫做 obj。
回溯到上一级作用域，然后从 1 重新开始。

命名空间

只有一个全局作用域导致的常见错误是命名冲突。在 JavaScript中，这可以通过匿名包装器轻松解决。

(function() {
    // 函数创建一个命名空间

    window.foo = function() {
        // 对外公开的函数，创建了闭包
    };

})(); // 立即执行此匿名函数

匿名函数被认为是表达式；因此为了可调用性，它们首先会被执行。

( // 小括号内的函数首先被执行
function() {}
) // 并且返回函数对象
() // 调用上面的执行结果，也就是函数对象

有一些其他的调用函数表达式的方法，比如下面的两种方式语法不同，但是效果一模一样。

// 另外两种方式
+function(){}();
(function(){}());

结论

推荐使用匿名包装器（也就是自执行的匿名函数）来创建命名空间。这样不仅可以防止命名冲突，而且有利于程序的模块化。另外，使用全局变量被认为是不好的习惯。这样的代码容易产生错误并且维护成本较高。

数组

数组遍历与属性

虽然在 JavaScript 中数组是对象，但是没有好的理由去使用 for in 循环遍历数组。相反，有一些好的理由不去使用 for in 遍历数组。

由于 for in 循环会枚举原型链上的所有属性，唯一过滤这些属性的方式是使用 hasOwnProperty 函数，因此会比普通的 for 循环慢上好多倍。

遍历

为了达到遍历数组的最佳性能，推荐使用经典的 for 循环。

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

上面代码有一个处理，就是通过 l = list.length 来缓存数组的长度。

虽然 length 是数组的一个属性，但是在每次循环中访问它还是有性能开销。可能最新的 JavaScript 引擎在这点上做了优化，但是我们没法保证自己的代码是否运行在这些最近的引擎之上。

实际上，不使用缓存数组长度的方式比缓存版本要慢很多。

length 属性

length 属性的 getter 方式会简单的返回数组的长度，而 setter 方式会截断数组。

var arr = [1, 2, 3, 4, 5, 6];
arr.length = 3;
arr; // [1, 2, 3]

arr.length = 6;
arr; // [1, 2, 3]

在 Firebug 中查看此时 foo 的值是： [1, 2, 3, undefined, undefined, undefined] 但是这个结果并不准确，如果你在 Chrome 的控制台查看 foo 的结果，你会发现是这样的： [1, 2, 3] 因为在 JavaScript 中 undefined 是一个变量，注意是变量不是关键字，因此上面两个结果的意义是完全不相同的。

// 为了验证，我们来执行下面代码，看序号 5 是否存在于 foo 中。
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 false
foo[5] = undefined;
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 true

为 length 设置一个更小的值会截断数组，但是增大 length 属性值不会对数组产生影响。

结论

为了更好的性能，推荐使用普通的 for 循环并缓存数组的 length 属性。使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。

Array 构造函数

由于 Array 的构造函数在如何处理参数时有点模棱两可，因此总是推荐使用数组的字面语法 - [] - 来创建数组。

[1, 2, 3]; // 结果: [1, 2, 3]
new Array(1, 2, 3); // 结果: [1, 2, 3]

[3]; // 结果: [3]
new Array(3); // 结果: [] 
new Array('3') // 结果: ['3']

// 译者注：因此下面的代码将会使人很迷惑
new Array(3, 4, 5); // 结果: [3, 4, 5] 
new Array(3) // 结果: []，此数组长度为 3

由于只有一个参数传递到构造函数中（译者注：指的是 new Array(3); 这种调用方式），并且这个参数是数字，构造函数会返回一个 length 属性被设置为此参数的空数组。需要特别注意的是，此时只有 length 属性被设置，真正的数组并没有生成。

var arr = new Array(3);
arr[1]; // undefined
1 in arr; // false, 数组还没有生成

这种优先于设置数组长度属性的做法只在少数几种情况下有用，比如需要循环字符串，可以避免 for 循环的麻烦。

new Array(count + 1).join(stringToRepeat);

结论

应该尽量避免使用数组构造函数创建新数组。推荐使用数组的字面语法。它们更加短小和简洁，因此增加了代码的可读性。

其它

setTimeout 和 setInterval

由于 JavaScript 是异步的，可以使用 setTimeout 和 setInterval 来计划执行函数。

function fun() {}
var id = setTimeout(fun, 1000); // 返回一个大于零的数字

当 setTimeout 被调用时，它会返回一个 ID 标识并且计划在将来大约 1000 毫秒后调用 fun 函数。 fun 函数只会被执行一次。

基于 JavaScript 引擎的计时策略，以及本质上的单线程运行方式，所以其它代码的运行可能会阻塞此线程。因此没法确保函数会在 setTimeout 指定的时刻被调用。

作为第一个参数的函数将会在全局作用域中执行，因此函数内的 this 将会指向这个全局对象。

function Fun() {
    this.value = 42;
    this.method = function() {
        // this 指向全局对象
        console.log(this.value); // 输出：undefined
    };
    setTimeout(this.method, 500);
}
new Fun();

setInterval 的堆调用

setTimeout 只会执行回调函数一次，不过 setInterval 正如名字会每隔 X 毫秒执行函数一次。但是却不鼓励使用这个函数。

当回调函数的执行被阻塞时，setInterval 仍然会发布更多的回调指令。在很小的定时间隔情况下，这会导致回调函数被堆积起来。

function fun(){
    // 阻塞执行 1 秒
}
setInterval(fun, 100);

上面代码中，fun 会执行一次随后被阻塞了一秒钟。

在 fun 被阻塞的时候，setInterval 仍然在组织将来对回调函数的调用。因此，当第一次fun函数调用结束时，已经有10次函数调用在等待执行。

处理可能的阻塞调用

最简单也是最容易控制的方案，是在回调函数内部使用 setTimeout 函数。

function fun(){
    // 阻塞执行 1 秒
    setTimeout(fun, 100);
}
fun();

这样不仅封装了 setTimeout 回调函数，而且阻止了调用指令的堆积，可以有更多的控制。fun函数现在可以控制是否继续执行还是终止执行。

手工清空定时器

可以通过将定时时产生的 ID 标识传递给clearTimeout或者clearInterval函数来清除定时，至于使用哪个函数取决于调用的时候使用的是 setTimeout 还是 setInterval。

var id = setTimeout(fun, 1000);
clearTimeout(id);

清除所有定时器

由于没有内置的清除所有定时器的方法，可以采用一种暴力的方式来达到这一目的。

// 清空"所有"的定时器
for(var i = 1; i < 1000; i++) {
    clearTimeout(i);
}

可能还有些定时器不会在上面代码中被清除（如果定时器调用时返回的 ID 值大于 1000），因此我们可以事先保存所有的定时器 ID，然后一把清除。

隐藏使用 eval

setTimeout 和 setInterval 也接受第一个参数为字符串的情况。这个特性绝对不要使用，因为它在内部使用了 eval。

function foo() {
    // 将会被调用
}

function bar() {
    function foo() {
        // 不会被调用
    }
    setTimeout('foo()', 1000);
}
bar()

由于 eval 在这种情况下不是被直接调用，因此传递到setTimeout的字符串会自全局作用域中执行；因此，上面的回调函数使用的不是定义在 bar 作用域中的局部变量 foo。

建议不要在调用定时器函数时，为了向回调函数传递参数而使用字符串的形式。

function foo(a, b, c) {}

// 不要这样做
setTimeout('foo(1,2, 3)', 1000)

// 可以使用匿名函数完成相同功能
setTimeout(function() {
    foo(1, 2, 3);
}, 1000)

结论

绝对不要使用字符串作为 setTimeout或者setInterval的第一个参数，这么写的代码明显质量很差。当需要向回调函数传递参数时，可以创建一个匿名函数，在函数内执行真实的回调函数。

另外，应该避免使用 setInterval，因为它的定时执行不会被 JavaScript 阻塞。

JavaScript的小秘密

对象