JavaScript 变量提升详解

要点

1. 引擎会 在解释 JavaScript 代码之前首先对其进行编译。
2. 编译阶段中的一部分工作就是找到所有的 声明，并用合适的作用域将它们关联起来。也正是词法作用域 的核心内容。
3. ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对 结果的操作是非法或不合理的。
4. var a = 2提升的是var a;而不会提升赋值操作 a=2，赋值操作将原地保留;

因此，正确的思考思路是

1. 包括变量和函数在内的所有声明都会在任何代码被执行前首先 被处理。
2. 当你看到var a =2;时，可能会认为这是一个声明。但JavaScript实际上会将其看成两个 声明:

 var a;
 a =2;

3. 第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在 原地等待执行阶段。

例子1

a = 2;
var a;
console.log( a );//输出2

因为：

var a;
a = 2; 
console.log( a ); // 2

例子2

console.log( a );
var a = 2; //输出undefined

因为

var a; 
console.log( a );
a = 2;

例子3

foo();
function foo() {
    console.log( a ); // undefined 
    var a = 2;
}

foo 函数的声明(这个例子还包括实际函数的隐含值)被提升了，因此第一行中的调用可以正常执行。 foo 是函数声明，函数声明会被提升，但是函数表达式却不会被提升。看下面例子4；

例子4

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() { // ...
};

因为

1. 这段程序中的变量标识符foo()被提升
2. 分配给所在作用域(在这里是全局作用域)
3. 因此 foo() 不会导致 ReferenceError
4. 但是 foo 此时并没有赋值;(如果它是一个函数声明而不 是函数表达式，那么就会赋值)
5. foo() 由于对 undefined 值进行函数调用而导致非法操作， 因此抛出 TypeError 异常

所以上面代码等同于：

var foo;
foo(); // TypeError
bar(); // ReferenceError
foo = function() {
    var bar = ...self... 
    // ...
}

优先级

后面的函数声明 > 函数声明 > 变量声明

foo(); // 1
var foo;
function foo() {
    console.log( 1 );
}
foo = function() { 
    console.log( 2 );
};

会输出 1 而不是 2 ! 等同于

function foo() { 
    console.log( 1 );
}
foo(); // 1
foo = function() { 
    console.log( 2 );
};

总结

要注意避免重复声明，特别是当普通的 var 声明和函数声明混合在一起的时候，否则会引 起很多危险的问题!