前端進階之 let、const、var

• 做者：陳大魚頭
• 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) // undefined

function 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海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。