• 作者：陳大魚頭
• github： KRISACHAN
• 鏈接：github.com/YvetteLau/S…
• 背景：最近高級(jí)前端工程師 劉小夕 在 github 上開了個(gè)每個(gè)工作日布一個(gè)前端相關(guān)題的 repo，懷著學(xué)習(xí)的心態(tài)我也參與其中，以下為我的回答，如果有不對(duì)的地方，非常歡迎各位指出。

什么是提升？（hoisting）

函數(shù)提升與變量提升

首先我們來(lái)看一段代碼

console.log(變量) // undefined var 變量 = 1 復(fù)制代碼

從上面的代碼來(lái)看，雖然變量還沒(méi)有被聲明，但是我們卻可以使用，這種情況就叫做變量提升。

再來(lái)一段代碼

console.log(變量) // ? 變量() {} function 變量() {} var 變量 = 1 復(fù)制代碼

上面的代碼叫做函數(shù)提升，函數(shù)提升跟變量提升差不多，就是函數(shù)提升優(yōu)先級(jí)比變量高。

從上可知，使用 var 聲明的變量會(huì)被提升到作用域的頂部。

let、const、var的區(qū)別

let、const、var的提升

首先我們?cè)賮?lái)看一段代碼

var a = 1 let b = 1 const c = 1 console.log(window.b) // undefined console.log(window.c) // undefinedfunction test(){console.log(a)let a } test() 復(fù)制代碼

首先在全局作用域下使用 let 和 const 聲明變量，變量并不會(huì)被掛載到 window上，這一點(diǎn)就和 var 聲明有了區(qū)別。

再者當(dāng)我們?cè)诼暶?a 之前如果使用了 a，就會(huì)出現(xiàn)報(bào)錯(cuò)的情況。

首先報(bào)錯(cuò)的原因是因?yàn)榇嬖跁簳r(shí)性死區(qū)，我們不能在聲明前就使用變量，這也是 let 和 const 優(yōu)于 var 的一點(diǎn)。然后這里你認(rèn)為的提升和 var 的提升是有區(qū)別的，雖然變量在編譯的環(huán)節(jié)中被告知在這塊作用域中可以訪問(wèn)，但是訪問(wèn)是受限制的。

let、const、var 創(chuàng)建的不同

let 和 const 聲明定義了作用于 正在運(yùn)行的執(zhí)行上下文（running execution context） 的 詞法環(huán)境（LexicalEnvironment） 的變量。

let 和 const 聲明的變量是在詞法環(huán)境實(shí)例化時(shí)創(chuàng)建的，但是給變量賦值的原生功能 LexicalBinding 以及變量初始化的功能 Initializer 是在之后執(zhí)行的，而不是在創(chuàng)建變量時(shí)，所以在執(zhí)行之前無(wú)法以任何方式訪問(wèn)它們，這就是 暫時(shí)性死區(qū)。

var語(yǔ)句聲明了作用于 正在運(yùn)行的執(zhí)行上下文（running execution context） 的 變量環(huán)境（VariableEnvironment） 的變量。

var 聲明的變量同樣是在詞法環(huán)境實(shí)例化時(shí)創(chuàng)建的，并且創(chuàng)建時(shí)就賦值有 undefined，在任何的 變量環(huán)境（VariableEnvironment）中，var變量 的綁定可以出現(xiàn)多個(gè)，但是最終值是由 賦值時(shí)確定的，而不是創(chuàng)建變量時(shí)。

詞法環(huán)境（LexicalEnvironment）與變量環(huán)境（VariableEnvironment）

• 詞法環(huán)境（LexicalEnvironment）：簡(jiǎn)單來(lái)說(shuō)就是 ECMASCRIPT 中的書寫語(yǔ)法的上下文語(yǔ)法環(huán)境。
• 變量環(huán)境（VariableEnvironment）：簡(jiǎn)單來(lái)說(shuō)就是 執(zhí)行上下文 中專門存儲(chǔ)變量跟該變量賦值的一個(gè)對(duì)象。

總結(jié)：let const 跟 var 不同的原因是 let const 的創(chuàng)建是基于詞法環(huán)境，而 var 是基于變量環(huán)境。。用通俗的話來(lái)說(shuō)就是，不是同一個(gè)系統(tǒng)的...

如果你、喜歡探討技術(shù)，或者對(duì)本文有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“魚頭的Web海洋”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見你。

總結(jié)

以上是生活随笔為你收集整理的前端进阶之 let、const、var的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。