(深究)聲明提前(Hoisting)

陳偉發(fā)布于2019-08-22 18:18 / 1153人閱讀

摘要：有意思的是，這意味著變量在聲明之前甚至已經(jīng)可用。的這個特性被非正式地稱為聲明提前，即函數(shù)里聲明的所有變量但不涉及賦值都被提前至函數(shù)體的頂部。但實際上會將其看成兩個聲明和。第二個賦值聲明會被留在原地等待執(zhí)行階段。

簡介

JavaScript的函數(shù)作用域是指在函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)始終是可見的。有意思
的是，這意味著變量在聲明之前甚至已經(jīng)可用。JavaScript的這個特性被非正式地稱為
聲明提前(hoisting) ，即JavaScript函數(shù)里聲明的所有變量(但不涉及賦值)都被“提
前”至函數(shù)體的頂部。如果對提升不太明白的，請參考JavaScript高級程序設(shè)計177頁函數(shù)表達式.MDN變量提升

示例

函數(shù)聲明:

sayHi(); //不會報錯，在執(zhí)行代碼之前會先讀取函數(shù)聲明,也就是 函數(shù)聲明提升

function sayHi(){

　　alert("Hi")

}

通過提升其實是這樣的:

//函數(shù)聲明提升到頂部

function sayHi(){

　　alert("Hi")

}

sayHi(); //不會報錯

函數(shù)表達式:

sayHi(); // 報錯  

var sayHi = function(){

　　alert("Hi")

}
函數(shù)表達式其實是創(chuàng)建一個匿名函數(shù)然后賦值給變量,通過提升應(yīng)該是這樣的:

//函數(shù)聲明和變量聲明都被提升到作用域頂部，函數(shù)優(yōu)先

functionsayHi(){

　　alert("Hi")

}

//變量聲明被提升到頂部

var sayHi;

sayHi(); // 報錯  

//變量賦值被留在原地

sayHi = function(){

　　alert("Hi")

}

函數(shù)提升優(yōu)先級高于變量提升
a()  // alert(1)
var a = 1
function a(){
  alert(1)
}

通過提升：
function a(){
  alert(1)
}
var a 
a()
a = 1

提問 為什么會有提升

比起那些編譯過程只有三個步驟的語言的編譯器，JavaScript引擎要復(fù)雜得多。例如，在語法分析和代碼生成階段有特定的步驟來對運行性能進行優(yōu)化，包括對冗余元素進行優(yōu)化等。我們通過編譯器在詞法階段進行詞法分析，生成詞法作用域，詞法作用域就是用來管理引擎如何在當(dāng)前作用域以及嵌套的子作用域中根據(jù)標(biāo)識符名稱進行變量查找。提升的作用使得所有聲明都在詞法作用域的上方，這樣引擎在作用域及嵌套作用域中變量查找可以更快更簡單。

提升的機制

引擎會在解釋 JavaScript代碼之前首先對其進行編譯。編譯階段中的一部分工作就是找到所有的聲明，并用合適的作用域?qū)⑺鼈冴P(guān)聯(lián)起來，這也正是詞法作用域的核心內(nèi)容。
因此，正確的思考思路是，包括變量和函數(shù)在內(nèi)的所有聲明都會在任何代碼被執(zhí)行前首先被處理。
當(dāng)你看到 var a = 2; 時，可能會認(rèn)為這是一個聲明。但JavaScript實際上會將其看成兩個聲明： var a; 和 a = 2; 。第一個定義聲明是在編譯階段進行的。第二個賦值聲明會被留在原地等待執(zhí) 行階段。

let究竟有沒有提升

MDN_let及暫存死區(qū)

var i = 10;
function a(){
   i = 3;
   var i = 1;  //因為 var 提升了 所以在 function里 創(chuàng)建了 局部變量 i
}
console.log(i) // 10

let a = 1
{
  a = 2;
  let a  = 3;   //報錯
}

//這里的報錯，我認(rèn)為是規(guī)范化強制性報錯，并不代表let沒有提升
//我的猜想如下,

let a = 1
{
  let a // 暫存死區(qū) 開始的地方就是這里
  a = 2 // 由于 a = 2 在 暫存死區(qū) 中，所以報錯
  a // 暫存死區(qū) 結(jié)束的地方就是這里
}

為什么let要強制性報錯

不推薦使用eval及with等，使用let/const 代替var，使用塊級作用域
目的就是為了，減少詞法欺騙以及作用域的混亂導(dǎo)致的性能問題，使得javascript引擎運行更快。
使用let 就要按照let 的使用規(guī)定，不然和使用var又沒什么區(qū)別了，這是我的想法。

為什么函數(shù)比變量提升優(yōu)先級更高

未完待續(xù)...
歡迎補充批評...

參考文章:
知乎提問
strack overflow
JavaScript引擎解析預(yù)編譯
我的博客園
《你不知道的JavaScript 上》