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

什么是提升？（hoisting）

函數提升與變量提升

首先我們來看一段代碼

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

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

再來一段代碼

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

上面的代碼叫做函數提升，函數提升跟變量提升差不多，就是函數提升優先級比變量高。

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

let、const、var的區別

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() 復制代碼

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

再者當我們在聲明 a 之前如果使用了 a，就會出現報錯的情況。

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

let、const、var 創建的不同

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

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

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

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

詞法環境（LexicalEnvironment）與變量環境（VariableEnvironment）

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

總結：let const 跟 var 不同的原因是 let const 的創建是基于詞法環境，而 var 是基于變量環境。。用通俗的話來說就是，不是同一個系統的...

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。