JavaScript 变量提升详解-优快云博客

本文深入解析JavaScript中的词法作用域、变量与函数声明的提升机制，以及常见错误如ReferenceError与TypeError的产生原因。通过实例说明声明与赋值的区别，帮助开发者理解代码执行前的编译过程。

要点

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

因此，正确的思考思路是

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

 var a;
 a =2;
复制代码

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

例子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() { // ...
};

复制代码

因为

这段程序中的变量标识符foo()被提升
分配给所在作用域(在这里是全局作用域)
因此 foo() 不会导致 ReferenceError
但是 foo 此时并没有赋值;(如果它是一个函数声明而不是函数表达式，那么就会赋值)
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 声明和函数声明混合在一起的时候，否则会引起很多危险的问题!