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

什么是提升？（hoisting）

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

首先我們來看一段代碼

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

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

再來一段代碼

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

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

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

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

let、const、var的提升

首先我們再來看一段代碼

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 聲明變量，變量并不會被掛載到 window上，這一點就和 var 聲明有了區(qū)別。

再者當(dāng)我們在聲明 a 之前如果使用了 a，就會出現(xiàn)報錯的情況。

首先報錯的原因是因為存在暫時性死區(qū)，我們不能在聲明前就使用變量，這也是 let 和 const 優(yōu)于 var 的一點。然后這里你認為的提升和 var 的提升是有區(qū)別的，雖然變量在編譯的環(huán)節(jié)中被告知在這塊作用域中可以訪問，但是訪問是受限制的。

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

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

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

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

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

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

• 詞法環(huán)境（LexicalEnvironment）：簡單來說就是 ECMASCRIPT 中的書寫語法的上下文語法環(huán)境。
• 變量環(huán)境（VariableEnvironment）：簡單來說就是 執(zhí)行上下文 中專門存儲變量跟該變量賦值的一個對象。

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

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

總結(jié)

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

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