JS變數宣告提升
阿新 • • 發佈:2020-07-30
首先來看一段程式碼
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沒有賦值。
注意⚠️
函式優先
何為函式優先,來看一下下面的程式碼