JavaScript系列文章：變量提升和函數提升
今天介紹一下變量提升和函數提升。這個知識點可謂是老生常談了，不過其中有些細節方面博主很想借此機會，好好總結一下。
今天主要介紹以下幾點：
1. 變量提升
2. 函數提升
3. 為什么要進行提升
4. 最佳實踐
那么，我們就開始進入主題吧。
1. 變量提升
通常JS引擎會在正式執行之前先進行一次預編譯，在這個過程中，首先將變量聲明及函數聲明提升至當前作用域的頂端，然后進行接下來的處理。(注：當前流行的JS引擎大都對源碼進行了編譯，由于引擎的不同，編譯形式也會有所差異，我們這里說的預編譯和提升其實是抽象出來的、易于理解的概念)
下面的代碼中，我們在函數中聲明了一個變量，不過這個變量聲明是在if語句塊中：
function hoistVariable() {
if (!foo) {
var foo = 5;
}
console.log(foo); // 5
}
hoistVariable();
運行代碼，我們會發現foo的值是5，初學者可能對此不甚理解，如果外層作用域也存在一個foo變量，就更加困惑了，該不會是打印外層作用域中的foo變量吧？答案是：不會，如果當前作用域中存在此變量聲明，無論它在什么地方聲明，引用此變量時就會在當前作用域中查找，不會去外層作用域了。
那么至于說打印結果，這要提到預編譯機制了，經過一次預編譯之后，上面的代碼邏輯如下：
//預編譯之后
function hoistVariable() {
var foo;
if (!foo) {
foo = 5;
}
console.log(foo); // 5
}
hoistVariable();
是的，引擎將變量聲明提升到了函數頂部，初始值為undefined，自然，if語句塊就會被執行，foo變量賦值為5，下面的打印也就是預期的結果了。
類似的，還有下面一個例子：
var foo = 3;
function hoistVariable() {
var foo = foo || 5;
console.log(foo); // 5
}
hoistVariable();
foo || 5這個表達式的結果是5而不是3，雖然外層作用域有個foo變量，但函數內是不會去引用的，因為預編譯之后的代碼邏輯是這樣的：
var foo = 3;
//預編譯之后
function hoistVariable() {
var foo;
foo = foo || 5;
console.log(foo); // 5
}
hoistVariable();
如果當前作用域中聲明了多個同名變量，那么根據我們的推斷，它們的同一個標識符會被提升至作用域頂部，其他部分按順序執行，比如下面的代碼：
function hoistVariable() {
var foo = 3;
{
var foo = 5;
}
console.log(foo); // 5
}
hoistVariable();
由于JavaScript沒有塊作用域，只有全局作用域和函數作用域，所以預編譯之后的代碼邏輯為：
//預編譯之后
function hoistVariable() {
var foo;
foo = 3;
{
foo = 5;
}
console.log(foo); // 5
}
hoistVariable();
2. 函數提升
相信大家對下面這段代碼都不陌生，實際開發當中也很常見：
function hoistFunction() {
foo(); // output: I am hoisted
function foo() {
console.log('I am hoisted');
}
}
hoistFunction();
為什么函數可以在聲明之前就可以調用，并且跟變量聲明不同的是，它還能得到正確的結果，其實引擎是把函數聲明整個地提升到了當前作用域的頂部，預編譯之后的代碼邏輯如下：
//預編譯之后
function hoistFunction() {
function foo() {
console.log('I am hoisted');
}
foo(); // output: I am hoisted
}
hoistFunction();
相似的，如果在同一個作用域中存在多個同名函數聲明，后面出現的將會覆蓋前面的函數聲明：
function hoistFunction() {
function foo() {
console.log(1);
}
foo(); // output: 2
function foo() {
console.log(2);
}
}
hoistFunction();
對于函數，除了使用上面的函數聲明，更多時候，我們會使用函數表達式，下面是函數聲明和函數表達式的對比：
//函數聲明
function foo() {
console.log('function declaration');
}
//匿名函數表達式
var foo = function() {
console.log('anonymous function expression');
};
//具名函數表達式
var foo = function bar() {
console.log('named function expression');
};
可以看到，匿名函數表達式，其實是將一個不帶名字的函數聲明賦值給了一個變量，而具名函數表達式，則是帶名字的函數賦值給一個變量，需要注意到是，這個函數名只能在此函數內部使用。我們也看到了，其實函數表達式可以通過變量訪問，所以也存在變量提升同樣的效果。
那么當函數聲明遇到函數表達式時，會有什么樣的結果呢，先看下面這段代碼：
function hoistFunction() {
foo(); // 2
var foo = function() {
console.log(1);
};
foo(); // 1
function foo() {
console.log(2);
}
foo(); // 1
}
hoistFunction();
運行后我們會發現，輸出的結果依次是2 1 1，為什么會有這樣的結果呢？
因為JavaScript中的函數是一等公民，函數聲明的優先級最高，會被提升至當前作用域最頂端，所以第一次調用時實際執行了下面定義的函數聲明，然后第二次調用時，由于前面的函數表達式與之前的函數聲明同名，故將其覆蓋，以后的調用也將會打印同樣的結果。上面的過程經過預編譯之后，代碼邏輯如下：
//預編譯之后
function hoistFunction() {
var foo;
foo = function foo() {
console.log(2);
}
foo(); // 2
foo = function() {
console.log(1);
};
foo(); // 1
foo(); // 1
}
hoistFunction();
我們也不難理解，下面的函數和變量重名時，會如何執行：
var foo = 3;
function hoistFunction() {
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
function foo() {}
}
hoistFunction();
console.log(foo); // 3
我們可以看到，函數聲明被提升至作用域最頂端，然后被賦值為5，而外層的變量并沒有被覆蓋，經過預編譯之后，上面代碼的邏輯是這樣的：
//預編譯之后
var foo = 3;
function hoistFunction() {
var foo;
foo = function foo() {};
console.log(foo); // function foo() {}
foo = 5;
console.log(foo); // 5
}
hoistFunction();
console.log(foo); // 3
所以，函數的優先權是最高的，它永遠被提升至作用域最頂部，然后才是函數表達式和變量按順序執行，這一點要牢記。
3. 為什么要進行提升
關于為什么進行變量提升和函數提升，這個問題一直沒有明確的答案，不過最近讀到 Dmitry Soshnikov之前的一篇文章時 ，多少了解了一些，下面是Dmitry Soshnikov早些年的推ter，他也對這個問題十分感興趣：
然后Jeremy Ashkenas想讓Brendan Eich聊聊這個話題：
最后，Brendan Eich給出了答案：
大致的意思就是：由于第一代JS虛擬機中的抽象紕漏導致的，編譯器將變量放到了棧槽內并編入索引，然后在（當前作用域的）入口處將 變量名 綁定到了 棧槽內 的變量。（注：這里提到的抽象是計算機術語，是對內部發生的更加復雜的事情的一種簡化。）
然后，Dmitry Soshnikov又提到了函數提升，他提到了相互遞歸（就是A函數內會調用到B函數，而B函數也會調用到A函數）：
隨后Brendan Eich很熱心的又給出了答案：
Brendan Eich很確定的說，函數提升就是為了解決相互遞歸的問題，大體上可以解決像ML語言這樣自下而上的順序問題。
這里簡單闡述一下相互遞歸，下面兩個函數分別在自己的函數體內調用了對方：
//驗證偶數
function isEven(n) {
if (n === 0) {
return true;
}
return isOdd(n - 1);
}
console.log(isEven(2)); // true
//驗證奇數
function isOdd(n) {
if (n === 0) {
return false;
}
return isEven(n - 1);
}
如果沒有函數提升，而是按照自下而上的順序，當isEven函數被調用時，isOdd函數還未聲明，所以當isEven內部無法調用isOdd函數。所以Brendan Eich設計了函數提升這一形式，將函數提升至當前作用域的頂部：
//驗證偶數
function isEven(n) {
if (n == 0) {
return true;
}
return isOdd(n - 1);
}
//驗證奇數
function isOdd(n) {
if (n == 0) {
return false;
}
return isEven(n - 1);
}
console.log(isEven(2)); // true
這樣一來，問題就迎刃而解了。
最后，Brendan Eich還對變量提升和函數提升做了總結：
大概是說，變量提升是人為實現的問題，而函數提升在當初設計時是有目的的。
至此，關于變量提升和函數提升，相信大家已經明白其中的真相了。
4. 最佳實踐
理解變量提升和函數提升可以使我們更了解這門語言，更好地駕馭它，但是在開發中，我們不應該使用這些技巧，而是要規范我們的代碼，做到可讀性和可維護性。
具體的做法是：無論變量還是函數，都必須先聲明后使用。下面舉了簡單的例子：
var name = 'Scott';
var sayHello = function(guest) {
console.log(name, 'says hello to', guest);
};
var i;
var guest;
var guests = ['John', 'Tom', 'Jack'];
for (i = 0; i < guests.length; i++) {
guest = guests[i];
//do something on guest
sayHello(guest);
}
如果對于新的項目，可以使用let替換var，會變得更可靠，可維護性更高：
let name = 'Scott';
let sayHello = function(guest) {
console.log(name, 'says hello to', guest);
};
let guests = ['John', 'Tom', 'Jack'];
for (let i = 0; i < guests.length; i++) {
let guest = guests[i];
//do something on guest
sayHello(guest);
}
值得一提的是，ES6中的class聲明也存在提升，不過它和let、const一樣，被約束和限制了，其規定，如果再聲明位置之前引用，則是不合法的，會拋出一個異常。
所以，無論是早期的代碼，還是ES6中的代碼，我們都需要遵循一點，先聲明，后使用。
參考資料：
http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/
https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/
http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting
來自：http://www.cnblogs.com/liuhe688/p/5891273.html