JavaScript变量提升

问题

有些朋友可能会觉得javascript的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下阅读代码会得到错误的结果，考虑以下代码：

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

console.log(a)应该输出什么呢？有些开发者觉得会输出undefined，因为var a在'a = 2'之后，变量a被重复定义了，但是没有被赋值，所以是'undefined'。但是结果输出是2。如下图所示：

我们再来考虑另一段代码，如下所示：

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

这段代码会输出什么样的结果呢？有些人可能会觉得输出ReferenceError。因为变量a在没有声明的情况下就被使用了。真实结果呢，如下图所示：输出的是undefined

为什么会这样呢？这就牵出了本文的主题：JavaScript声明提升

JavaScript代码的运行规则

在JavaScript代码运行之前其实是有一个编译阶段的。编译之后才是从上到下，一行一行解释执行。变量提升就发生在编译阶段，它把变量和函数的声明提升至作用域的顶端。（编译阶段的工作之一就是将变量与其作用域进行关联）。
所以对于代码var a =2;来说，编译器看到的是两行代码var a; a = 2;第一个语句是声明语句，在编译阶段处理。第二个语句是赋值语句，在运行阶段处理。
那么我们再回过头来看看问题中出现的代码：

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

应该这样来处理：

var a;            //编译阶段
a = 2;            //运行阶段
console.log(a);   //运行阶段

所以这段代码的最终输出的结果是2。

第二段代码：

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

应该这样来处理：

   var a;            //编译阶段
   console.log(a);   //运行阶段 
   a = 2;            //运行阶段

所以这段代码的最终输出结果是undefined。

变量提升需要注意两点：

1. 提升的部分只是变量声明，赋值语句和可执行的代码逻辑还保持在原地不动

2. 提升只是将变量声明提升到变量所在的变量范围的顶端，并不是提升到全局范围，说明如下：

foo();
function foo(){
    console.log(a); //会输出undefined
    var a = "2";
}
//变量提升之后的效果
function foo(){
    var a;
    console.log(a);
    a = "2";
}
foo();

函数声明会提升，但是函数表达式就不了。看如下代码：

foo();
var foo = function bar(){    //这是一个函数表达式，不再是函数声明。
    console.log("bar");
}

处理方式如下：

var foo;    
foo();    //TypeError，因为还没有赋值
bar();    //bar不可以在全局范围内引用
foo = function bar(){            
    console.log("bar");
}    

函数是一等公民

变量声明和函数声明都会得到变量提升，但函数声明会最先得到提升，然后是变量声明。
考虑如下代码：

foo();    //输出的结果为1
var foo;
function foo(){
    console.log(1);
}
foo = function(){
    console.log(2);
}   

处理方式如下：

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

注意：var foo;由于是重复声明变量，所以被编译优化去掉。

最后再来说明几种情况

对于函数声明来说，如果定义了相同的函数变量声明，后定义的声明会覆盖掉先前的声明，看如下代码：

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

JavaScript中是没有块级作用域的概念（ps：ES6中有改进了），看如下代码：

foo();    //输出结果为2
var a = true;
if(a){
    function foo(){
        console.log(1);
    }
}else{
    function foo(){
        console.log(2);
    }
}   

这段代码输出结果为2，if语句没有块级作用域的功能，所以函数声明都被提升到全局作用域中，又因为定义了两个foo，后来的定义覆盖了前边的定义，所以输出结果为2。

PS：ES5标准修改后，最后这个demo，在chrome中执行结果为

在IE10及以下为2,10以上报错