JS變量聲明提高

首先來看一段代碼

console.log(a)
var a = 2;

輸出結果是2，正常來講JS若是是逐行向下執行，那麼應該輸出undefined，爲什麼此處輸出2呢？

緣由在於JS在執行前都會進行編譯（一般就在執行前），在編譯過程當中包括變量和函數在內的全部聲明都會被處理。

定義

是指在 JavaScript 代碼執行前的編譯過程當中，JavaScript 引擎把變量的聲明部分和函數的聲明部分提高到代碼開頭的「行爲」。變量被提高後，會給變量設置默認undefined。

那let,const是否會進行變量聲明提高呢？

首先咱們要知道定義一個JS變量分爲三個階段

• 建立create
• 初始化initialize
• 賦值assign

下面咱們分別來看看var、let、function 和 const的過程

var聲明

function fn() {
  var x = 1；
}
fn()；

• 進入 fn，爲 fn 建立一個環境。
• 找到 fn 中全部用 var 聲明的變量，在這個環境中「建立」這些變量（即 x 和 y）。
• 將這些變量「初始化」爲 undefined。
• 開始執行代碼
• x = 1 將 x 變量「賦值」爲 1

 由以上步驟可知，var 聲明會在代碼執行以前就將建立變量，並將其初始化爲 undefined。即建立和初始化會被提高

function聲明

fn()；
function fn() {
  console.log(1)；
}

• 找到全部用 function 聲明的變量，在環境中「建立」這些變量。
• 將這些變量「初始化」並「賦值」爲 function(){ console.log(1) }。
• 開始執行代碼 fn2()

由以上步驟可知，function 的「建立」「初始化」和「賦值」都被提高了

let聲明

{
  let x = 1;
  x = 2;
}

• 找到全部用 let 聲明的變量，在環境中建立這些變量
• 開始執行代碼（注意如今尚未初始化）
• 執行 x = 1，將 x 初始化爲 1（這並非一次賦值，若是代碼是 let x，就將 x 初始化爲 undefined）
• 執行 x = 2，對 x 進行賦值

由以上步驟可知，let只有建立過程會提高，初始化和賦值都不會提高，因此會造成暫時性死區，這也是爲何在定義前使用let會拋錯。

暫時性死區，就是不能在初始化以前，使用變量

const聲明

{
    console.log(x);
  const x = 1;
}

• 找到全部用 const聲明的變量，在環境中「建立」這些變量
• 開始執行代碼（注意如今尚未初始化）
• 執行x = 1, 將x初始化爲1

由以上步驟可知，const的建立過程也會提高，可是與let不一樣之處在於const只有建立和初始化兩個過程，沒有賦值過程。若不初始化則會直接拋錯

總結

• var 的建立和初始化都被提高了。
• function 的建立、初始化和賦值都被提高了。
• let 的建立被提高了，可是初始化和賦值沒有提高。
• const的建立被提高可是初始化沒提高。const沒有賦值。

注意⚠️

函數優先

何爲函數優先，來看一下下面的代碼👇

foo();
var foo;
function foo() {
  console.log(1)
}

實際上輸出值會是1，由於當變量聲明和函數聲明同時存在時，函數聲明優先於變量聲明,即函數聲明會覆蓋變量聲明。緣由在於函數的賦值過程也會提高。那有人可能有疑問，若是將var變成let呢？結果爲foo不容許被重複聲明。

變量提高的存儲位置

執行上下文中存在一個變量環境的對象（Viriable Environment），該對象中保存了變量提高的內容。而let，const則存在詞法環境中。

瀏覽器原理與實踐

https://www.jianshu.com/p/0f49c88cf169