第4章：提升

4.1 先有鸡还是先有蛋

• 分享两段代码，你认为会输出什么：

  //先赋值后声明，再引用
  a = 2;
  var a;
  console.log(a);
  

  //先引用，再声明变量
  console.log(a);
  var a = 2;
  

• 答案揭晓：第一段代码会输出2，而第二段代码会输出undefined

• 很多开发者会认为JavaScript代码是从上到下逐行执行的，但实际上并不完全是这样。

• 就好比先有鸡还是先有蛋，我们搞不清楚变量声明和赋值的先后问题。

4.2 编译器再度来袭

• 实际上不管是变量还是函数，所有的声明都会在代码被执行前首先被处理。
• 上面的第一段代码会这样进行处理：

//变量的声明语句被提升到最顶端
var a;
a = 2;
console.log(a);

• 上面的第二段代码会这样进行处理：

//只提升声明的语句，而赋值和引用的语句不会被提升
var a;
console.log(a);
a = 2;

• 这个将声明语句从原本位置“移动”到顶端的过程，叫做“提升”。
• 注意：如第二段代码所示，只有声明语句会被提升，而其他赋值/引用等运行逻辑的语句会留在原地。

4.3 函数优先

• 所有声明都会被提升，但如果函数和变量同名时，函数优先被提升，然后才是变量：

//运行foo函数，最终输出1
foo();

var foo;    //声明foo变量
//声明foo函数
function foo(){
    console.log(1);
}

//为foo变量赋值一个函数
foo = function(){
    console.log(2);
}

引擎会这样处理：

//函数声明先被提升到顶部，重复的var声明被忽略
function foo(){
    console.log(1);
}

//声明后紧接着就是调用语句
foo();

//赋值语句在调用语句之后
foo = function(){
    console.log(2);
}

• 变量提升的过程中，如果同名的函数声明，后者会覆盖前者。

// 输出3
foo();

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

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

function foo(){
    console.log(3);
}

• 变量提升的过程，不受条件判断的限制。

foo(); //输出 b

if(true){
    function foo(){
        console.log('a');
    }
}else{
    function foo(){
        console.log('b');
    }
}

4.4 小结

• 代码var a = 2;分为两个声明阶段，一个是编译阶段的变量声明，一个是执行阶段的赋值声明。
• 不管变量在作用域的什么位置，在代码被执行前都会先进行变量声明的处理。这个处理过程就像 把声明语句“移动”到作用域的顶端，我们称为“变量提升”。
• 只有声明语句会提示，而其他语句不会。
• 应当避免变量名的重复，否则会引发问题。