前言

在 ECMAScript6 中，新增了 let 和 const 關(guān)鍵字用來(lái)聲明變量。在前端面試中也常被問(wèn)到 let、const和 var 的區(qū)別，這就涉及到了變量提升、暫時(shí)性死區(qū)等知識(shí)點(diǎn)。下面就來(lái)看看什么是變量提升和暫時(shí)性死區(qū)。

1. 什么變量提升？

先來(lái)看看MDN中對(duì)變量提升的描述：

變量提升（Hoisting）被認(rèn)為是， Javascript中執(zhí)行上下文 （特別是創(chuàng)建和執(zhí)行階段）工作方式的一種認(rèn)識(shí)。在 ECMAScript® 2015 Language Specification 之前的JavaScript文檔中找不到變量提升（Hoisting）這個(gè)詞。
從概念的字面意義上說(shuō)，“變量提升”意味著變量和函數(shù)的聲明會(huì)在物理層面移動(dòng)到代碼的最前面，但這么說(shuō)并不準(zhǔn)確。實(shí)際上變量和函數(shù)聲明在代碼里的位置是不會(huì)動(dòng)的，而是在編譯階段被放入內(nèi)存中。

通俗來(lái)說(shuō)，變量提升是指在 JavaScript 代碼執(zhí)行過(guò)程中，JavaScript 引擎把變量的聲明部分和函數(shù)的聲明部分提升到代碼開(kāi)頭的行為。變量被提升后，會(huì)給變量設(shè)置默認(rèn)值為 undefined。 正是由于 JavaScript 存在變量提升這種特性，導(dǎo)致了很多與直覺(jué)不太相符的代碼，這也是 JavaScript 的一個(gè)設(shè)計(jì)缺陷。雖然 ECMAScript6 已經(jīng)通過(guò)引入塊級(jí)作用域并配合使用 let、const 關(guān)鍵字，避開(kāi)了這種設(shè)計(jì)缺陷，但是由于 JavaScript 需要向下兼容，所以變量提升在很長(zhǎng)時(shí)間內(nèi)還會(huì)繼續(xù)存在。

在 ECMAScript6 之前，JS 引擎用 var 關(guān)鍵字聲明變量。在 var 時(shí)代，不管變量聲明是寫(xiě)在哪里，最后都會(huì)被提到作用域的頂端。 下面在全局作用域中聲明一個(gè)num 變量，并在聲明之前打印它：

console.log(num) 
var num = 1

這里會(huì)輸出 undefined，因?yàn)樽兞康穆暶鞅惶嵘?，它等價(jià)于：

var num
console.log(num)
num = 1

可以看到，num 作為全局變量會(huì)被提升到全局作用域的頂端。

除此之外，在函數(shù)作用域中也存在變量提升：

function getNum() {
  console.log(num) 
  var num = 1  
}
getNum()

這里也會(huì)輸出 undefined，因?yàn)楹瘮?shù)內(nèi)部的變量聲明會(huì)被提升至函數(shù)作用域的頂端。它等價(jià)于：

function getNum() {
  var num 
  console.log(num) 
  num = 1  
}
getNum()

除了變量提升，函數(shù)實(shí)際上也是存在提升的。JavaScript中具名的函數(shù)的聲明形式有兩種：

//函數(shù)聲明式：
function foo () {}
//變量形式聲明： 
var fn = function () {}

當(dāng)使用變量形式聲明函數(shù)時(shí)，和普通的變量一樣會(huì)存在提升的現(xiàn)象，而函數(shù)聲明式會(huì)提升到作用域最前邊，并且將聲明內(nèi)容一起提升到最上邊。如下：

fn()
var fn = function () {
	console.log(1)  
}
// 輸出結(jié)果：Uncaught TypeError: fn is not a function

foo()
function foo () {
	console.log(2)
}
// 輸出結(jié)果：2

可以看到，使用變量形式聲明fn并在其前面執(zhí)行時(shí)，會(huì)報(bào)錯(cuò)fn不是一個(gè)函數(shù)，因?yàn)榇藭r(shí)fn只是一個(gè)變量，還沒(méi)有賦值為一個(gè)函數(shù)，所以是不能執(zhí)行fn方法的。

2. 為什么會(huì)有變量提升？

變量提升和 JavaScript 的編譯過(guò)程密切相關(guān)：JavaScript 和其他語(yǔ)言一樣，都要經(jīng)歷編譯和執(zhí)行階段。在這個(gè)短暫的編譯階段，JS 引擎會(huì)搜集所有的變量聲明，并且提前讓聲明生效。而剩下的語(yǔ)句需要等到執(zhí)行階段、等到執(zhí)行到具體的某一句時(shí)才會(huì)生效。這就是變量提升背后的機(jī)制。

那為什么 JavaScript 中會(huì)存在變量提升這個(gè)特性呢？

首先要從作用域說(shuō)起。作用域是指在程序中定義變量的區(qū)域，該位置決定了變量的生命周期。通俗理解，作用域就是變量與函數(shù)的可訪問(wèn)范圍，即作用域控制著變量和函數(shù)的可見(jiàn)性和生命周期。

在 ES6 之前，作用域分為兩種：

• 全局作用域中的對(duì)象在代碼中的任何地方都可以訪問(wèn)，其生命周期伴隨著頁(yè)面的生命周期。
• 函數(shù)作用域是在函數(shù)內(nèi)部定義的變量或者函數(shù)，并且定義的變量或者函數(shù)只能在函數(shù)內(nèi)部被訪問(wèn)。函數(shù)執(zhí)行結(jié)束之后，函數(shù)內(nèi)部定義的變量會(huì)被銷(xiāo)毀。

相較而言，其他語(yǔ)言則普遍支持塊級(jí)作用域。塊級(jí)作用域就是使用一對(duì)大括號(hào)包裹的一段代碼，比如函數(shù)、判斷語(yǔ)句、循環(huán)語(yǔ)句，甚至一個(gè)單獨(dú)的{}都可以被看作是一個(gè)塊級(jí)作用域（注意，對(duì)象聲明中的{}不是塊級(jí)作用域）。簡(jiǎn)單來(lái)說(shuō)，如果一種語(yǔ)言支持塊級(jí)作用域，那么其代碼塊內(nèi)部定義的變量在代碼塊外部是訪問(wèn)不到的，并且等該代碼塊中的代碼執(zhí)行完成之后，代碼塊中定義的變量會(huì)被銷(xiāo)毀。

ES6 之前是不支持塊級(jí)作用域的，沒(méi)有塊級(jí)作用域，將作用域內(nèi)部的變量統(tǒng)一提升無(wú)疑是最快速、最簡(jiǎn)單的設(shè)計(jì)，不過(guò)這也直接導(dǎo)致了函數(shù)中的變量無(wú)論是在哪里聲明的，在編譯階段都會(huì)被提取到執(zhí)行上下文的變量環(huán)境中，所以這些變量在整個(gè)函數(shù)體內(nèi)部的任何地方都是能被訪問(wèn)的，這也就是 JavaScript 中的變量提升。

使用變量提升有如下兩個(gè)好處：

（1）提高性能

在JS代碼執(zhí)行之前，會(huì)進(jìn)行語(yǔ)法檢查和預(yù)編譯，并且這一操作只進(jìn)行一次。這么做就是為了提高性能，如果沒(méi)有這一步，那么每次執(zhí)行代碼前都必須重新解析一遍該變量（函數(shù)），這是沒(méi)有必要的，因?yàn)樽兞浚ê瘮?shù)）的代碼并不會(huì)改變，解析一遍就夠了。

在解析的過(guò)程中，還會(huì)為函數(shù)生成預(yù)編譯代碼。在預(yù)編譯時(shí)，會(huì)統(tǒng)計(jì)聲明了哪些變量、創(chuàng)建了哪些函數(shù)，并對(duì)函數(shù)的代碼進(jìn)行壓縮，去除注釋、不必要的空白等。這樣做的好處就是每次執(zhí)行函數(shù)時(shí)都可以直接為該函數(shù)分配棧空間（不需要再解析一遍去獲取代碼中聲明了哪些變量，創(chuàng)建了哪些函數(shù)），并且因?yàn)榇a壓縮的原因，代碼執(zhí)行也更快了。

（2）容錯(cuò)性更好

變量提升可以在一定程度上提高JS的容錯(cuò)性，看下面的代碼：

a = 1;
var a;
console.log(a); // 1

如果沒(méi)有變量提升，這兩行代碼就會(huì)報(bào)錯(cuò)，但是因?yàn)橛辛俗兞刻嵘?，這段代碼就可以正常執(zhí)行。

雖然在可以開(kāi)發(fā)過(guò)程中，可以完全避免這樣寫(xiě)，但是有時(shí)代碼很復(fù)雜，可能因?yàn)槭韬龆仁褂煤蠖x了，而由于變量提升的存在，代碼會(huì)正常運(yùn)行。當(dāng)然，在開(kāi)發(fā)過(guò)程中，還是盡量要避免變量先使用后聲明的寫(xiě)法。

總結(jié)：

• 解析和預(yù)編譯過(guò)程中的聲明提升可以提高性能，讓函數(shù)可以在執(zhí)行時(shí)預(yù)先為變量分配棧空間；
• 聲明提升還可以提高JS代碼的容錯(cuò)性，使一些不規(guī)范的代碼也可以正常執(zhí)行。

3. 變量提升導(dǎo)致的問(wèn)題

由于變量提升的存在，使用 JavaScript 來(lái)編寫(xiě)和其他語(yǔ)言相同邏輯的代碼，都有可能會(huì)導(dǎo)致不一樣的執(zhí)行結(jié)果。主要有以下兩種情況。

（1）變量被覆蓋

來(lái)看下面的代碼：

var name = "JavaScript"
function showName(){
  console.log(name);
  if(0){
   var name = "CSS"
  }
}
showName()

這里會(huì)輸出 undefined，而并沒(méi)有輸出“JavaScript”，為什么呢？

首先，當(dāng)剛執(zhí)行 showName 函數(shù)調(diào)用時(shí)，會(huì)創(chuàng)建 showName 函數(shù)的執(zhí)行上下文。之后，JavaScript 引擎便開(kāi)始執(zhí)行 showName 函數(shù)內(nèi)部的代碼。首先執(zhí)行的是：

console.log(name);

執(zhí)行這段代碼需要使用變量 name，代碼中有兩個(gè) name 變量：一個(gè)在全局執(zhí)行上下文中，其值是JavaScript；另外一個(gè)在 showName 函數(shù)的執(zhí)行上下文中，由于if(0)永遠(yuǎn)不成立，所以 name 值是 CSS。那該使用哪個(gè)呢？應(yīng)該先使用函數(shù)執(zhí)行上下文中的變量。因?yàn)樵诤瘮?shù)執(zhí)行過(guò)程中，JavaScript 會(huì)優(yōu)先從當(dāng)前的執(zhí)行上下文中查找變量，由于變量提升的存在，當(dāng)前的執(zhí)行上下文中就包含了if(0)中的變量 name，其值是 undefined，所以獲取到的 name 的值就是 undefined。
這里輸出的結(jié)果和其他支持塊級(jí)作用域的語(yǔ)言不太一樣，比如 C 語(yǔ)言輸出的就是全局變量，所以這里會(huì)很容易造成誤解。

（2）變量沒(méi)有被銷(xiāo)毀

function foo(){
  for (var i = 0; i < 5; i++) {
  }
  console.log(i); 
}
foo()

使用其他的大部分語(yǔ)言實(shí)現(xiàn)類似代碼時(shí)，在 for 循環(huán)結(jié)束之后，i 就已經(jīng)被銷(xiāo)毀了，但是在 JavaScript 代碼中，i 的值并未被銷(xiāo)毀，所以最后打印出來(lái)的是 5。這也是由變量提升而導(dǎo)致的，在創(chuàng)建執(zhí)行上下文階段，變量 i 就已經(jīng)被提升了，所以當(dāng) for 循環(huán)結(jié)束之后，變量 i 并沒(méi)有被銷(xiāo)毀。

4. 禁用變量提升

為了解決上述問(wèn)題，ES6 引入了 let 和 const 關(guān)鍵字，從而使 JavaScript 也能像其他語(yǔ)言一樣擁有塊級(jí)作用域。let 和 const 是不存在變量提升的。下面用 let 來(lái)聲明變量：

console.log(num) 
let num = 1

// 輸出結(jié)果：Uncaught ReferenceError: num is not defined

如果改成 const 聲明，也會(huì)是一樣的結(jié)果——用 let 和 const 聲明的變量，它們的聲明生效時(shí)機(jī)和具體代碼的執(zhí)行時(shí)機(jī)保持一致。

變量提升機(jī)制會(huì)導(dǎo)致很多誤操作：那些忘記被聲明的變量無(wú)法在開(kāi)發(fā)階段被明顯地察覺(jué)出來(lái)，而是以 undefined 的形式藏在代碼中。為了減少運(yùn)行時(shí)錯(cuò)誤，防止 undefined 帶來(lái)不可預(yù)知的問(wèn)題，ES6 特意將聲明前不可用做了強(qiáng)約束。不過(guò)，let 和 const 還是有區(qū)別的，使用 let 關(guān)鍵字聲明的變量是可以被改變的，而使用 const 聲明的變量其值是不可以被改變的。

下面來(lái)看看 ES6 是如何通過(guò)塊級(jí)作用域來(lái)解決上面的問(wèn)題：

function fn() {
  var num = 1;
  if (true) {
    var num = 2;  
    console.log(num);  // 2
  }
  console.log(num);  // 2
}
fn()

在這段代碼中，有兩個(gè)地方都定義了變量 num，函數(shù)塊的頂部和 if 的內(nèi)部，由于 var 的作用范圍是整個(gè)函數(shù)，所以在編譯階段，會(huì)生成如下執(zhí)行上下文：

從執(zhí)行上下文的變量環(huán)境中可以看出，最終只生成了一個(gè)變量 num，函數(shù)體內(nèi)所有對(duì) num 的賦值操作都會(huì)直接改變變量環(huán)境中的 num 的值。所以上述代碼最后輸出的是 2，而對(duì)于相同邏輯的代碼，其他語(yǔ)言最后一步輸出的值應(yīng)該是 1，因?yàn)樵?if 里面的聲明不應(yīng)該影響到塊外面的變量。

下面來(lái)把 var 關(guān)鍵字替換為 let 關(guān)鍵字，看看效果：

function fn() {
  let num = 1;
  if (true) {
    let num = 2;  
    console.log(num);  // 2
  }
  console.log(num);  // 1
}
fn()

執(zhí)行這段代碼，其輸出結(jié)果就和預(yù)期是一致的。這是因?yàn)?let 關(guān)鍵字是支持塊級(jí)作用域的，所以，在編譯階段 JavaScript 引擎并不會(huì)把 if 中通過(guò) let 聲明的變量存放到變量環(huán)境中，這也就意味著在 if 中通過(guò) let 聲明的關(guān)鍵字，并不會(huì)提升到全函數(shù)可見(jiàn)。所以在 if 之內(nèi)打印出來(lái)的值是 2，跳出語(yǔ)塊之后，打印出來(lái)的值就是 1 了。這就符合我們的習(xí)慣了 ：作用塊內(nèi)聲明的變量不影響塊外面的變量。

5. JS如何支持塊級(jí)作用域

那么問(wèn)題來(lái)了，ES6 是如何做到既要支持變量提升的特性，又要支持塊級(jí)作用域的呢？下面從執(zhí)行上下文的角度來(lái)看看原因。

JavaScript 引擎是通過(guò)變量環(huán)境實(shí)現(xiàn)函數(shù)級(jí)作用域的，那么 ES6 又是如何在函數(shù)級(jí)作用域的基礎(chǔ)之上，實(shí)現(xiàn)對(duì)塊級(jí)作用域的支持呢？先看下面這段代碼：

function fn(){
    var a = 1
    let b = 2
    {
      let b = 3
      var c = 4
      let d = 5
      console.log(a)
      console.log(b)
      console.log(d)
    }
    console.log(b) 
    console.log(c)
}   
fn()

當(dāng)這段代碼執(zhí)行時(shí)，JavaScript 引擎會(huì)先對(duì)其進(jìn)行編譯并創(chuàng)建執(zhí)行上下文，然后再按照順序執(zhí)行代碼。let 關(guān)鍵字會(huì)創(chuàng)建塊級(jí)作用域，那么 let 關(guān)鍵字是如何影響執(zhí)行上下文的呢？

（1）創(chuàng)建執(zhí)行上下文

創(chuàng)建的執(zhí)行上下文如圖所示：

通過(guò)上圖可知：

• 通過(guò) var 聲明的變量，在編譯階段會(huì)被存放到變量環(huán)境中。
• 通過(guò) let 聲明的變量，在編譯階段會(huì)被存放到詞法環(huán)境中。
• 在函數(shù)作用域內(nèi)部，通過(guò) let 聲明的變量并沒(méi)有被存放到詞法環(huán)境中。

（2）執(zhí)行代碼

當(dāng)執(zhí)行到代碼塊中時(shí)，變量環(huán)境中 a 的值已經(jīng)被設(shè)置成了 1，詞法環(huán)境中 b 的值已經(jīng)被設(shè)置成了 2，這時(shí)函數(shù)的執(zhí)行上下文如圖所示：

可以看到，當(dāng)進(jìn)入函數(shù)的作用域塊時(shí)，作用域塊中通過(guò) let 聲明的變量，會(huì)被存放在詞法環(huán)境的一個(gè)單獨(dú)的區(qū)域中，這個(gè)區(qū)域中的變量并不影響作用域塊外面的變量，比如在作用域外面聲明了變量 b，在該作用域塊內(nèi)部也聲明了變量 b，當(dāng)執(zhí)行到作用域內(nèi)部時(shí)，它們都是獨(dú)立的存在。

其實(shí)，在詞法環(huán)境內(nèi)部，維護(hù)了一個(gè)棧結(jié)構(gòu)，棧底是函數(shù)最外層的變量，進(jìn)入一個(gè)作用域塊后，就會(huì)把該作用域塊內(nèi)部的變量壓到棧頂；當(dāng)作用域執(zhí)行完成之后，該作用域的信息就會(huì)從棧頂彈出，這就是詞法環(huán)境的結(jié)構(gòu)。這里的變量是指通過(guò) let 或者 const 聲明的變量。

接下來(lái)，當(dāng)執(zhí)行到作用域塊中的console.log(a)時(shí)，就需要在詞法環(huán)境和變量環(huán)境中查找變量 a 的值了，查找方式：沿著詞法環(huán)境的棧頂向下查詢，如果在詞法環(huán)境中的某個(gè)塊中查找到了，就直接返回給 JavaScript 引擎，如果沒(méi)有查找到，那么繼續(xù)在變量環(huán)境中查找。這樣變量查找就完成了：

當(dāng)作用域塊執(zhí)行結(jié)束之后，其內(nèi)部定義的變量就會(huì)從詞法環(huán)境的棧頂彈出，最終執(zhí)行上下文如圖所示：

塊級(jí)作用域就是通過(guò)詞法環(huán)境的棧結(jié)構(gòu)來(lái)實(shí)現(xiàn)的，而變量提升是通過(guò)變量環(huán)境來(lái)實(shí)現(xiàn)，通過(guò)這兩者的結(jié)合，JavaScript 引擎就同時(shí)支持了變量提升和塊級(jí)作用域。

6. 暫時(shí)性死區(qū)

最后再來(lái)看看暫時(shí)性死區(qū)的概念：

var name = 'JavaScript';
{
	name = 'CSS';
	let name;
}

// 輸出結(jié)果：Uncaught ReferenceError: Cannot access 'name' before initialization

ES6 規(guī)定：如果區(qū)塊中存在 let 和 const，這個(gè)區(qū)塊對(duì)這兩個(gè)關(guān)鍵字聲明的變量，從一開(kāi)始就形成了封閉作用域。假如嘗試在聲明前去使用這類變量，就會(huì)報(bào)錯(cuò)。這一段會(huì)報(bào)錯(cuò)的區(qū)域就是暫時(shí)性死區(qū)。上面代碼的第4行上方的區(qū)域就是暫時(shí)性死區(qū)。

如果想成功引用全局的 name 變量，需要把 let 聲明給去掉：

var name = 'JavaScript';
{
	name = 'CSS';
}

這時(shí)程序就能正常運(yùn)行了。其實(shí)，這并不意味著引擎感知不到 name 變量的存在，恰恰相反，它感知到了，而且它清楚地知道 name 是用 let 聲明在當(dāng)前塊里的。正因如此，它才會(huì)給這個(gè)變量加上暫時(shí)性死區(qū)的限制。一旦去掉 let 關(guān)鍵字，它也就不起作用了。

其實(shí)這也就是暫時(shí)性死區(qū)的本質(zhì)：當(dāng)程序的控制流程在新的作用域進(jìn)行實(shí)例化時(shí)，在此作用域中用 let 或者 const 聲明的變量會(huì)先在作用域中被創(chuàng)建出來(lái)，但此時(shí)還未進(jìn)行詞法綁定，所以是不能被訪問(wèn)的，如果訪問(wèn)就會(huì)拋出錯(cuò)誤。因此，在這運(yùn)行流程進(jìn)入作用域創(chuàng)建變量，到變量可以被訪問(wèn)之間的這段時(shí)間，就稱之為暫時(shí)死區(qū)。

在 let 和 const關(guān)鍵字出現(xiàn)之前，typeof運(yùn)算符是百分之百安全的，現(xiàn)在也會(huì)引發(fā)暫時(shí)性死區(qū)的發(fā)生，像import關(guān)鍵字引入公共模塊、使用new class創(chuàng)建類的方式，也會(huì)引發(fā)暫時(shí)性死區(qū)，究其原因還是變量的聲明先與使用。

typeof a    // Uncaught ReferenceError: a is not defined
let a = 1

可以看到，在a聲明之前使用typeof關(guān)鍵字報(bào)錯(cuò)了，這就是暫時(shí)性死區(qū)導(dǎo)致的。

總結(jié)

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

最新評(píng)論