第一篇文章中提到了變量的提升，所以今天就來介紹一下變量提升和函數(shù)提升。這個(gè)知識(shí)點(diǎn)可謂是老生常談了，不過其中有些細(xì)節(jié)方面博主很想借此機(jī)會(huì)，好好總結(jié)一下。

今天主要介紹以下幾點(diǎn)：

1. 變量提升

2. 函數(shù)提升

3. 為什么要進(jìn)行提升

4. 最佳實(shí)踐

那么，我們就開始進(jìn)入主題吧。

1. 變量提升

通常JS引擎會(huì)在正式執(zhí)行之前先進(jìn)行一次預(yù)編譯，在這個(gè)過程中，首先將變量聲明及函數(shù)聲明提升至當(dāng)前作用域的頂端，然后進(jìn)行接下來的處理。(注：當(dāng)前流行的JS引擎大都對源碼進(jìn)行了編譯，由于引擎的不同，編譯形式也會(huì)有所差異，我們這里說的預(yù)編譯和提升其實(shí)是抽象出來的、易于理解的概念)

下面的代碼中，我們在函數(shù)中聲明了一個(gè)變量，不過這個(gè)變量聲明是在if語句塊中：

function hoistVariable() {
  if (!foo) {
    var foo = 5;
  }
   console.log(foo); // 5
}hoistVariable();

運(yùn)行代碼，我們會(huì)發(fā)現(xiàn)foo的值是5，初學(xué)者可能對此不甚理解，如果外層作用域也存在一個(gè)foo變量，就更加困惑了，該不會(huì)是打印外層作用域中的foo變量吧？答案是：不會(huì)，如果當(dāng)前作用域中存在此變量聲明，無論它在什么地方聲明，引用此變量時(shí)就會(huì)在當(dāng)前作用域中查找，不會(huì)去外層作用域了。

那么至于說打印結(jié)果，這要提到預(yù)編譯機(jī)制了，經(jīng)過一次預(yù)編譯之后，上面的代碼邏輯如下：

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  if (!foo) {
    foo = 5;
  }
  console.log(foo); // 5
}
hoistVariable();

是的，引擎將變量聲明提升到了函數(shù)頂部，初始值為undefined，自然，if語句塊就會(huì)被執(zhí)行，foo變量賦值為5，下面的打印也就是預(yù)期的結(jié)果了。

類似的，還有下面一個(gè)例子：

var foo = 3;

function hoistVariable() {
  var foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

foo || 5這個(gè)表達(dá)式的結(jié)果是5而不是3，雖然外層作用域有個(gè)foo變量，但函數(shù)內(nèi)是不會(huì)去引用的，因?yàn)轭A(yù)編譯之后的代碼邏輯是這樣的：

var foo = 3;

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

如果當(dāng)前作用域中聲明了多個(gè)同名變量，那么根據(jù)我們的推斷，它們的同一個(gè)標(biāo)識(shí)符會(huì)被提升至作用域頂部，其他部分按順序執(zhí)行，比如下面的代碼：

function hoistVariable() {
  var foo = 3;
   {
    var foo = 5;
  }
   console.log(foo); // 5
}
 hoistVariable();

由于JavaScript沒有塊作用域，只有全局作用域和函數(shù)作用域，所以預(yù)編譯之后的代碼邏輯為：

// 預(yù)編譯之后
function hoistVariable() {
  var foo;

  foo = 3;
  
  {
    foo = 5;
  }

  console.log(foo); // 5
}

hoistVariable();

2. 函數(shù)提升

相信大家對下面這段代碼都不陌生，實(shí)際開發(fā)當(dāng)中也很常見：

function hoistFunction() {
  foo(); // output: I am hoisted

  function foo() {
    console.log('I am hoisted');
  }
}

hoistFunction();

為什么函數(shù)可以在聲明之前就可以調(diào)用，并且跟變量聲明不同的是，它還能得到正確的結(jié)果，其實(shí)引擎是把函數(shù)聲明整個(gè)地提升到了當(dāng)前作用域的頂部，預(yù)編譯之后的代碼邏輯如下：

// 預(yù)編譯之后
function hoistFunction() {
  function foo() {
    console.log('I am hoisted');
  }

  foo(); // output: I am hoisted
}

hoistFunction();

相似的，如果在同一個(gè)作用域中存在多個(gè)同名函數(shù)聲明，后面出現(xiàn)的將會(huì)覆蓋前面的函數(shù)聲明：

function hoistFunction() {
  function foo() {
    console.log(1);
  }

  foo(); // output: 2

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

hoistFunction();

對于函數(shù)，除了使用上面的函數(shù)聲明，更多時(shí)候，我們會(huì)使用函數(shù)表達(dá)式，下面是函數(shù)聲明和函數(shù)表達(dá)式的對比：

// 函數(shù)聲明
function foo() {
  console.log('function declaration');
}

// 匿名函數(shù)表達(dá)式
var foo = function() {
  console.log('anonymous function expression');
};

// 具名函數(shù)表達(dá)式
var foo = function bar() {
  console.log('named function expression');
};

可以看到，匿名函數(shù)表達(dá)式，其實(shí)是將一個(gè)不帶名字的函數(shù)聲明賦值給了一個(gè)變量，而具名函數(shù)表達(dá)式，則是帶名字的函數(shù)賦值給一個(gè)變量，需要注意到是，這個(gè)函數(shù)名只能在此函數(shù)內(nèi)部使用。我們也看到了，其實(shí)函數(shù)表達(dá)式可以通過變量訪問，所以也存在變量提升同樣的效果。

那么當(dāng)函數(shù)聲明遇到函數(shù)表達(dá)式時(shí)，會(huì)有什么樣的結(jié)果呢，先看下面這段代碼：

function hoistFunction() {
  foo(); // 2

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

  foo(); // 1

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

  foo(); // 1
}

hoistFunction();

運(yùn)行后我們會(huì)發(fā)現(xiàn)，輸出的結(jié)果依次是2 1 1，為什么會(huì)有這樣的結(jié)果呢？

因?yàn)镴avaScript中的函數(shù)是一等公民，函數(shù)聲明的優(yōu)先級(jí)最高，會(huì)被提升至當(dāng)前作用域最頂端，所以第一次調(diào)用時(shí)實(shí)際執(zhí)行了下面定義的函數(shù)聲明，然后第二次調(diào)用時(shí)，由于前面的函數(shù)表達(dá)式與之前的函數(shù)聲明同名，故將其覆蓋，以后的調(diào)用也將會(huì)打印同樣的結(jié)果。上面的過程經(jīng)過預(yù)編譯之后，代碼邏輯如下：

// 預(yù)編譯之后
function hoistFunction() {
  var foo;

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

  foo(); // 2

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

  foo(); // 1

  foo(); // 1
}

hoistFunction();

我們也不難理解，下面的函數(shù)和變量重名時(shí)，會(huì)如何執(zhí)行：

var foo = 3;

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

  foo = 5;
  
  console.log(foo); // 5

  function foo() {}
}

hoistFunction();
console.log(foo);   // 3

我們可以看到，函數(shù)聲明被提升至作用域最頂端，然后被賦值為5，而外層的變量并沒有被覆蓋，經(jīng)過預(yù)編譯之后，上面代碼的邏輯是這樣的：

// 預(yù)編譯之后

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

所以，函數(shù)的優(yōu)先權(quán)是最高的，它永遠(yuǎn)被提升至作用域最頂部，然后才是函數(shù)表達(dá)式和變量按順序執(zhí)行，這一點(diǎn)要牢記。

3. 為什么要進(jìn)行提升

關(guān)于為什么進(jìn)行變量提升和函數(shù)提升，這個(gè)問題一直沒有明確的答案，不過最近讀到Dmitry Soshnikov之前的一篇文章時(shí)，多少了解了一些，下面是Dmitry Soshnikov早些年的twitter，他也對這個(gè)問題十分感興趣：

然后Jeremy Ashkenas想讓Brendan Eich聊聊這個(gè)話題：

最后，Brendan Eich給出了答案：

大致的意思就是：由于第一代JS虛擬機(jī)中的抽象紕漏導(dǎo)致的，編譯器將變量放到了棧槽內(nèi)并編入索引，然后在（當(dāng)前作用域的）入口處將變量名綁定到了棧槽內(nèi)的變量。（注：這里提到的抽象是計(jì)算機(jī)術(shù)語，是對內(nèi)部發(fā)生的更加復(fù)雜的事情的一種簡化。）

然后，Dmitry Soshnikov又提到了函數(shù)提升，他提到了相互遞歸（就是A函數(shù)內(nèi)會(huì)調(diào)用到B函數(shù)，而B函數(shù)也會(huì)調(diào)用到A函數(shù)）：

隨后Brendan Eich很熱心的又給出了答案：

Brendan Eich很確定的說，函數(shù)提升就是為了解決相互遞歸的問題，大體上可以解決像ML語言這樣自下而上的順序問題。

這里簡單闡述一下相互遞歸，下面兩個(gè)函數(shù)分別在自己的函數(shù)體內(nèi)調(diào)用了對方：

// 驗(yàn)證偶數(shù)
function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

console.log(isEven(2)); // true

// 驗(yàn)證奇數(shù)
function isOdd(n) {
  if (n === 0) {
    return false;
  }
  return isEven(n - 1);
}

如果沒有函數(shù)提升，而是按照自下而上的順序，當(dāng)isEven函數(shù)被調(diào)用時(shí)，isOdd函數(shù)還未聲明，所以當(dāng)isEven內(nèi)部無法調(diào)用isOdd函數(shù)。所以Brendan Eich設(shè)計(jì)了函數(shù)提升這一形式，將函數(shù)提升至當(dāng)前作用域的頂部：

// 驗(yàn)證偶數(shù)
function isEven(n) {
  if (n === 0) {
    return true;
  }
  return isOdd(n - 1);
}

// 驗(yàn)證奇數(shù)
function isOdd(n) {
  if (n === 0) {
    return false;
  }
  return isEven(n - 1);
}

console.log(isEven(2)); // true

這樣一來，問題就迎刃而解了。

最后，Brendan Eich還對變量提升和函數(shù)提升做了總結(jié)：

大概是說，變量提升是人為實(shí)現(xiàn)的問題，而函數(shù)提升在當(dāng)初設(shè)計(jì)時(shí)是有目的的。

至此，關(guān)于變量提升和函數(shù)提升，相信大家已經(jīng)明白其中的真相了。

4. 最佳實(shí)踐

理解變量提升和函數(shù)提升可以使我們更了解這門語言，更好地駕馭它，但是在開發(fā)中，我們不應(yīng)該使用這些技巧，而是要規(guī)范我們的代碼，做到可讀性和可維護(hù)性。

具體的做法是：無論變量還是函數(shù)，都必須先聲明后使用。下面舉了簡單的例子：

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);
}

如果對于新的項(xiàng)目，可以使用let替換var，會(huì)變得更可靠，可維護(hù)性更高：

值得一提的是，ES6中的class聲明也存在提升，不過它和let、const一樣，被約束和限制了，其規(guī)定，如果再聲明位置之前引用，則是不合法的，會(huì)拋出一個(gè)異常。

所以，無論是早期的代碼，還是ES6中的代碼，我們都需要遵循一點(diǎn)，先聲明，后使用。

本文完。

參考資料：

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

到此這篇關(guān)于JavaScript中變量提升和函數(shù)提升的詳解的文章就介紹到這了,更多相關(guān)JavaScript 變量提升和函數(shù)提升內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論