JavaScript中實(shí)現(xiàn)變量提升和函數(shù)提升的方法

小編給大家分享一下JavaScript中實(shí)現(xiàn)變量提升和函數(shù)提升的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

1. 變量提升

2. 函數(shù)提升

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

4. 最佳實(shí)踐

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

1. 變量提升

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

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

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

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

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

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

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

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

類似的，還有下面一個例子：

var foo = 3;

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

  console.log(foo); // 5
}

hoistVariable();

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

var foo = 3;

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

  foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

如果當(dāng)前作用域中聲明了多個同名變量，那么根據(jù)我們的推斷，它們的同一個標(biāo)識符會被提升至作用域頂部，其他部分按順序執(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ù)聲明整個地提升到了當(dāng)前作用域的頂部，預(yù)編譯之后的代碼邏輯如下：

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

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

hoistFunction();

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

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

  foo(); // output: 2

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

hoistFunction();

對于函數(shù)，除了使用上面的函數(shù)聲明，更多時候，我們會使用函數(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í)是將一個不帶名字的函數(shù)聲明賦值給了一個變量，而具名函數(shù)表達(dá)式，則是帶名字的函數(shù)賦值給一個變量，需要注意到是，這個函數(shù)名只能在此函數(shù)內(nèi)部使用。我們也看到了，其實(shí)函數(shù)表達(dá)式可以通過變量訪問，所以也存在變量提升同樣的效果。

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

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

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

  foo(); // 1

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

  foo(); // 1
}

hoistFunction();

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

因?yàn)镴avaScript中的函數(shù)是一等公民，函數(shù)聲明的優(yōu)先級最高，會被提升至當(dāng)前作用域最頂端，所以第一次調(diào)用時實(shí)際執(zhí)行了下面定義的函數(shù)聲明，然后第二次調(diào)用時，由于前面的函數(shù)表達(dá)式與之前的函數(shù)聲明同名，故將其覆蓋，以后的調(diào)用也將會打印同樣的結(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ù)和變量重名時，會如何執(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ù)提升，這個問題一直沒有明確的答案，不過最近讀到Dmitry Soshnikov之前的一篇文章時，多少了解了一些，下面是Dmitry Soshnikov早些年的twitter，他也對這個問題十分感興趣：

然后Jeremy Ashkenas想讓Brendan Eich聊聊這個話題：

最后，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)會調(diào)用到B函數(shù)，而B函數(shù)也會調(diào)用到A函數(shù)）：

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

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

這里簡單闡述一下相互遞歸，下面兩個函數(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)用時，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ì)時是有目的的。

至此，關(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，會變得更可靠，可維護(hù)性更高：

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

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

以上是JavaScript中實(shí)現(xiàn)變量提升和函數(shù)提升的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！