第一篇文章中提到了變數的提升，所以今天就來介紹一下變數提升和函式提升。這個知識點可謂是老生常談了，不過其中有些細節方面博主很想借此機會，好好總結一下。

今天主要介紹以下幾點：

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早些年的twitter，他也對這個問題十分感興趣：

然後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,guest);};let guests = ['John','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

到此這篇關於JavaScript中變數提升和函式提升的詳解的文章就介紹到這了,更多相關JavaScript 變數提升和函式提升內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！