今天主要介紹以下幾點：
變量提升
函數提升
爲什麼要進行提升
最佳實踐
那麼，我們就開始進入主題吧。
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;
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. 爲什麼要進行提升
函數提升就是爲了解決相互遞歸的問題，大體上可以解決像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這樣一來，問題就迎刃而解了。
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中的代碼，我們都需要遵循一點，先聲明，後使用。