摘要：請注意，就變量生命周期而言，聲明階段與變量聲明是不同的概念。提升在生命周期中無效的原因如上所述，提升是變量在作用域頂部的耦合聲明和初始化階段。然而，生命周期分離聲明和初始化階段。解耦消除了的提升期限。

為了保證的可讀性，本文采用意譯而非直譯。

提升是將變量或函數(shù)定義移動到作用域頭部的過程，通常是 var 聲明的變量和函數(shù)聲明function fun() {...}。

當(dāng) ES6 引入let(以及與let類似聲明的const和class)聲明時，許多開發(fā)人員都使用提升定義來描述如何訪問變量。但是在對這個問題進(jìn)行了更多的探討之后，令我驚訝的是提升并不是描述let變量的初始化和可用性的正確術(shù)語。

ES6 為let提供了一個不同的和改進(jìn)的機(jī)制。它要求更嚴(yán)格的變量聲明,在定義之前不能使用，從而提高代碼質(zhì)量。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

有時候我們會在zuo內(nèi)作用域內(nèi)看到一個奇怪的變量var varname和函數(shù)函數(shù)function funName() {...} 聲明：

// var hoisting
num;     // => undefined
var num;
num = 10;
num;     // => 10
// function hoisting
getPi;   // => function getPi() {...}
getPi(); // => 3.14
function getPi() {
  return 3.14;
}

變量num在聲明var num之前被訪問，因此它被賦值為undefined。fucntion getPi(){…}在文件末尾定義。但是，可以在聲明getPi()之前調(diào)用該函數(shù)，因為它被提升到作用域的頂部。

事實(shí)證明，先使用然后聲明變量或函數(shù)的可能性會造成混淆。假設(shè)您滾動一個大文件，突然看到一個未聲明的變量，它到底是如何出現(xiàn)在這里的，以及它在哪里定義的？

當(dāng)然，一個熟練的JavaScript開發(fā)人員不會這樣編寫代碼。但是在成千上萬的JavaScript中，GitHub repos是很有可能處理這樣的代碼的。

即使查看上面給出的代碼示例，也很難理解代碼中的聲明流。

當(dāng)然，首先要聲明再使用。let 鼓勵咱們使用這種方法處理變量。

當(dāng)引擎處理變量時，它們的生命周期由以下階段組成：

聲明階段(Declaration phase)是在作用域中注冊一個變量。

初始化階段(Initialization phase)是分配內(nèi)存并為作用域中的變量創(chuàng)建綁定。 在此步驟中，變量將使用undefined自動初始化。

賦值階段(Assignment phase)是為初始化的變量賦值。

變量在通過聲明階段時尚未初始化狀態(tài)，但未達(dá)到初始化狀態(tài)。

請注意，就變量生命周期而言，聲明階段與變量聲明是不同的概念。 簡而言之，JS引擎在3個階段處理變量聲明：聲明階段，初始化階段和賦值階段。

熟悉生命周期階段之后，讓我們使用它們來描述JS引擎如何處理var變量。

假設(shè)JS遇到一個函數(shù)作用域，其中包含var變量語句。變量在執(zhí)行任何語句之前通過聲明階段，并立即通過作用域開始處的初始化階段(步驟1)。函數(shù)作用域中var變量語句的位置不影響聲明和初始化階段。

在聲明和初始化之后，但在賦值階段之前，變量具有undefined 的值，并且已經(jīng)可以使用。

在賦值階段variable = "value" 時，變量接收它的初值(步驟2)。

嚴(yán)格意義的提升是指在函數(shù)作用域的開始處聲明并初始化一個變量。聲明階段和初始化階段之間沒有差別。

讓我們來研究一個例子。下面的代碼創(chuàng)建了一個包含var語句的函數(shù)作用域

function multiplyByTen(number) {
  console.log(ten); // => undefined
  var ten;
  ten = 10;
  console.log(ten); // => 10
  return number * ten;
}
multiplyByTen(4); // => 40

開始執(zhí)行multipleByTen(4)并進(jìn)入函數(shù)作用域時，變量ten在第一個語句之前通過聲明和初始化步驟。因此，當(dāng)調(diào)用console.log(ten)時，打印undefined。語句ten = 10指定一個初值。賦值之后，console.log(ten) 將正確地打印10。

在函數(shù)聲明語句function funName() {...}的情況下，它比變量聲明生命周期更簡單。

聲明、初始化和賦值階段同時發(fā)生在封閉函數(shù)作用域的開頭(只有一步)。可以在作用域的任何位置調(diào)用funName()，而不依賴于聲明語句的位置(甚至可以在末尾調(diào)用)。

下面的代碼示例演示了函數(shù)提升：

function sumArray(array) {
  return array.reduce(sum);
  function sum(a, b) {
    return a + b;
  }
}
sumArray([5, 10, 8]); // => 23

當(dāng)執(zhí)行sumArray([5,10,8])時，它進(jìn)入sumArray函數(shù)作用域。在這個作用域內(nèi)，在任何語句執(zhí)行之前，sum都會通過所有三個階段:聲明、初始化和賦值。這樣，array.reduce(sum)甚至可以在它的聲明語句sum(a, b){…}之前使用sum。

let 變量的處理方式與var不同，主要區(qū)別在于聲明和初始化階段是分開的。

現(xiàn)在來看看一個場景，當(dāng)解釋器進(jìn)入一個包含let變量語句的塊作用域時。變量立即通過聲明階段，在作用域中注冊其名稱(步驟1)。

然后解釋器繼續(xù)逐行解析塊語句。

如果在此階段嘗試訪問變量，JS 將拋出 ReferenceError: variable is not defined。這是因為變量狀態(tài)未初始化，變量位于暫時死區(qū) temporal dead zone。

當(dāng)解釋器執(zhí)行到語句let variable時，傳遞初始化階段(步驟2)。變量退出暫時死區(qū)。

接著，當(dāng)賦值語句variable = "value"出現(xiàn)時，將傳遞賦值階段(步驟3)。

如果JS 遇到let variable = "value"，那么初始化和賦值將在一條語句中發(fā)生。

讓我們看一個例子，在塊作用域中用 let 聲明變量 number

let condition = true;
if (condition) {
  // console.log(number); // => Throws ReferenceError
  let number;
  console.log(number); // => undefined
  number = 5;
  console.log(number); // => 5
}

當(dāng) JS 進(jìn)入if (condition) {...} 塊作用域，number立即通過聲明階段。

由于number已經(jīng)處于單一化狀態(tài)，并且處于的暫時死區(qū)，因此訪問該變量將引發(fā)ReferenceError: number is not defined。接著，語句let number進(jìn)行初始化?，F(xiàn)在可以訪問變量，但是它的值是undefined。

const和class 類型與let具有相同的生命周期，只是分配只能發(fā)生一次。

如上所述，提升是變量在作用域頂部的耦合聲明和初始化階段。然而，let生命周期分離聲明和初始化階段。解耦消除了let的提升期限。

這兩個階段之間的間隙產(chǎn)生了暫時死區(qū)，在這里變量不能被訪問。

使用var聲明變量很容易出錯。在此基礎(chǔ)上，ES6 引入了let。它使用一種改進(jìn)的算法來聲明變量，并附加了塊作用域。

由于聲明和初始化階段是解耦的，提升對于let變量(包括const和class)無效。在初始化之前，變量處于暫時死區(qū)，不能訪問。

為了保持變量聲明的流暢性，建議使用以下技巧

聲明、初始化然后使用變量，這個流程是正確的，易于遵循。

盡量隱藏變量。公開的變量越少，代碼就越模塊化。

這個問題說明：如果 let x 的初始化過程失敗了，那么

x 變量就將永遠(yuǎn)處于 created 狀態(tài)。

你無法再次對 x 進(jìn)行初始化（初始化只有一次機(jī)會，而那次機(jī)會你失敗了）。

由于 x 無法被初始化，所以 x 永遠(yuǎn)處在暫時死區(qū)

有人會覺得 JS 坑，怎么能出現(xiàn)這種情況；其實(shí)問題不大，因為此時代碼已經(jīng)報錯了，后面的代碼想執(zhí)行也沒機(jī)會。

參考：

我用了兩個月的時間才理解 let

干貨系列文章匯總?cè)缦?，覺得不錯點(diǎn)個Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號，后臺回復(fù)福利，即可看到福利，你懂的。