《你不知道的JavaScript》-- 精读（四）

a = 2;
var a;
console.log(a); // 2
复制代码

console.log(a); // undefined
var a;
复制代码

变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

JavaScript会将var a = 2;看成两个声明: var a; 和 a = 2;第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地执行阶段。

所以上面的两个代码片段会以如下形式进行处理：

var a;
a = 2;
console.log(a);
复制代码

var a;
console.log(a);
复制代码

这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。 这个过程就叫做提升。

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

foo函数的声明（这个例子还包括实际函数的隐含值）被提升了，因此第一行中的调用可以正常执行。

每个作用域都会进行提升操作。

上面的代码实际上会被理解为下面的形式：

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

函数声明会被提升，但是函数表达式却不会被提升。

foo(); // 不是ReferenceError，而是TypeError!
var foo = function bar(){
    // ...
}
复制代码

这段程序中的变量标识符foo被提升并分配给所在作用域，因此foo不会导致ReferenceError。但是foo此时并没有赋值，foo()由于对undefined值进行函数调用而导致非法操作，因此抛出TypeError异常。

即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用。

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar(){
    // ...
}
复制代码

上面的代码片段经过提升后，实际上会被理解为以下形式：

var foo;
foo(); // TypeError
bar(); // ReferenceErro
foo = function(){
    var bar = ...self...
    // ...
}
复制代码

2.函数优先

函数声明和变量声明都会被提升。但是有一个细节是，函数首先被提升，然后才是变量。

foo(); // 1
var foo;
function foo(){
    console.log("1");
}
foo = function(){
    console.log(2);
}
复制代码

这个代码片段会被引擎理解为如下形式：

function foo(){
    console.log(1);
}
foo(); // 1
foo = function(){
    console.log(2);
}
复制代码

var foo尽管出现在function foo()...的声明之前，但它是重复的声明（因此被忽略了），因为函数声明会被提升到普通变量之前。

尽管重复的var声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。

foo(); //3
function foo(){
    console.log(1)
}
var foo = function(){
    console.log(2)
}
function foo(){
    console.log(3)
}
复制代码

总结

所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。