變量提升

變量提升是 JavaScript 在運行時的一種機制。

在代碼被執行前，JavaScript 會做一些準備工作，其中會準備一個執行上下文，也就是代碼的執行時的環境，如 綁定this、準備變量等。

變量提升這一特性就是在準備執行上下文時進行的，這一特性也是和執行上下文相關的最常在面試中出現的內容。

1. 表現

console.log(number); // 輸出：undefined

var number = 1;

console.log(number); // 輸出：1

這段代碼先輸出了 undefined 再輸出了 1。

說明 number 變量在第一行輸出之前就已經存在了，只不過沒有被賦值，因為如果變量不存在，訪問變量會拋出異常：ReferenceError: 變量 is not defined。

可是在第一次使用 number 之前并沒有聲明過變量，卻可以被訪問到，出現這個表現就是因為變量提升的特性。

在生成執行上下文階段，會把變量都收集起來，事先進行聲明，需要注意的是，這個特性只會聲明變量，而不會初始化，即變量的值都會是 undefined。

根據這個規則，上面這段代碼在執行時可以理解成是這樣的：

var number;

console.log(number);

number = 1;

console.log(number);

需要注意的是，如果沒有使用 var 關鍵字聲明變量，是不會進行提升處理的。

console.log(number);

number = 1;

console.log(number);

這樣就會拋出變量不存在的異常。

2. 函數提升

函數也會提升，函數的提升會把整個函數放到最前。

fn('咕咕咕');

function fn(str) {
  console.log(str);
}

這段代碼可以被正常執行，函數也能被正常調用，因為在生成執行上下文階段，整個函數會提升到最前面。

這個規則只對函數聲明的方式聲明的函數有效，如果使用的是函數表達式，那就會走變量提升的規則。

console.log(fn); // 輸出：undefined
fn('咕咕咕'); // 拋出異常 TypeError: fn is not a function

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

可以看到 fn 能被訪問到，已經聲明了，但不能作為函數調用，這說明 fn 走了變量提升的機制。

在執行上下文生成的階段，函數會比變量更早的進行提升，也就是說函數相比變量，更加靠前。

函數在調用時也會生成函數級別的執行上下文，這也就意味著提升這個特性也會在函數執行前發生。

3. 小結

在 ES6 中和提升相關的內容又有些許不同，let 和 const 這兩個新關鍵字對提升的表現也和 var 不同，具體可以參閱 ES6 中的相關內容。

現在和提升相關的內容更多的出現在面試題里，由于代碼檢查工具的介入，一些由于提升特性造成的 BUG 出現的越來越少。