JavaScript 提升

提升

JavaScript 在执行之前，会先进行编译。如下代码：

fn();
console.log(i);
var i = 1;
function fn() {
  console.log(i);
}

当执行到这段代码时，会进行两次声明。定义声明时在编译阶段进行，赋值声明会留在原地等待执行阶段。
实际代码执行顺序：

function fn() {
  console.log(i);
}
var i;
fn(); // undefined
console.log(i); // undefined
i = 1;

4.1 变量的提升

通过 var 关键字声明的变量会存在提升，ES6 新增的 let const 关键字声明的变量不会存在提升。

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

var a; // 编译
a = 2; // 执行
console.log(a); // 2（预想的 a 是 undefined 或者直接报错，但是由于变量声明的提升，声明会先进行）

4.2 函数表达式的提升

通过函数表达式声明的函数与变量的声明提升是一样的，但是函数表达式的声明提升，不会对函数进行引用（即该变量并没有进行赋值），
如下代码：

console.log(fn(1)); // TypeError, fn is not a function
var fn = function (a) {
  return a;
};

fn 存在声明的提升，但是在调用时 fn 未被赋值，此时的值是 undefined 所以如果被当作函数进行调用，就会报错。

上面的代码相当于：

var fn;
console.log(fn(1));
fn = function (a) {
  return a;
};

此处需要注意的是，对于具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用，如下：

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

4.3 函数声明的提升

使用关键字 function 声明的函数也存在提升，不过函数声明被置于执行环境顶部，即使调用函数的代码在声明函数之前也可以正确访问。

foo(); // 可以在函数声明前进行调用

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

4.4 提升的优先级

函数声明 > 函数表达式 = 变量

函数声明和变量声明都会被提升，但是函数声明的优先级最高。这里的优先级是指进行提升时函数会首先被提升，然后才是变量。

如果函数声明与变量声明的名称一致，那么变量的声明会被当作重复的声明被忽略。

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

对于两个相同的函数声明，后面的函数声明仍然会覆盖之前的函数声明：

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

函数的声明不会被条件判断所控制，如下代码不管条件判断是否成立，函数声明都会被提升(ES6 后引入了块级作用域，所以此处可能会报错：TypeError: foo is not a function)：

foo(); // "b"
var a = true;
if (a) {
  function foo() {
    console.log("a");
  }
} else {
  function foo() {
    console.log("b");
  }
}