前言

預編譯，顧名思義就是是做些代碼文本的替換工作。是整個編譯過程的最先做的工作。JavaScript 的圣經(jīng) —— MDN 明確地說過， JavaScript 是一個解釋型語言，而并非編譯型語言，所以預編譯對于JS來說是子虛烏有的。但是人們喜歡稱之為預編譯其實也無傷大雅，關鍵在于為什么人們會認為JS存在預編譯，是JS的哪種行為讓人們覺得它產(chǎn)生了預編譯呢?讓我們來簡單聊一聊。

[[395479]]

引入

在代碼執(zhí)行前，編譯器會進行如下操作：

一 parse階段

分詞。就是將代碼分成原子符號(token)

將token解析翻譯成AST(語法生成樹)。

二 analyze階段

遇到聲明語句，將會把聲明傳到作用域(scope)中創(chuàng)建綁定，分配內(nèi)存并將變量默認設為undefined或函數(shù)體。

然后就可以執(zhí)行代碼啦，執(zhí)行中途每次遇到賦值或者取值，都會從作用域中查找綁定。這樣看，是不是有點“預編譯”內(nèi)味了?但是實際上還是稱它為預處理更加貼切一點。接下來，讓我們來了解一波看起來最像預編譯的操作--第三步的干貨。

“預編譯”

我的老師在和我講相關知識點前和我說過這么一個笑話：

面試時我因為這么一個問題掛了

var a = 100 
function foo(){ 
    console.log(a) 
} 
foo() 

問：為什么輸出a的值是100?

答：因為100賦值給了a。

老師說完我頭昏腦漲，完全不明白笑點在哪，后來才知道這是在考察“預編譯”這方面的知識。

總的來說，“預編譯”可以分為

創(chuàng)建GO對象(global object) 發(fā)生在頁面加載完成時

創(chuàng)建AO對象(activation object) 發(fā)生在函數(shù)執(zhí)行前一刻

具體步驟如下：

全局預編譯

1. 創(chuàng)建GO對象

2. 找變量聲明，將變量聲明作為GO對象的屬性名，并賦值undefined

3. 找全局里的函數(shù)聲明，將函數(shù)名作為GO對象的屬性名，值賦予函數(shù)體

局部預編譯

1. 創(chuàng)建一個AO對象

2. 找形參和變量聲明，將形參和變量聲明作為AO對象的屬性名，值為undefined

3. 將實參和形參統(tǒng)一

4. 在函數(shù)體里找函數(shù)聲明，將函數(shù)名作為AO對象的屬性名，值賦予函數(shù)體

所以那個笑話里的面試問題我們應該這么回答：

首先，編譯器創(chuàng)建一個GO對象

找到變量聲明 var a

和函數(shù)聲明 function foo(){}

將上面兩個變量聲明作為GO的屬性名賦初值

GO{

a:undefined

foo:function(){}

}

然后運行第一行代碼 a=100

在GO中將100賦值給a

再執(zhí)行第五行代碼運行foo函數(shù)

創(chuàng)建一個AO對象

在函數(shù)體內(nèi)找變量聲明和形參，(無)

再在函數(shù)體內(nèi)找函數(shù)聲明(無)

所以

AO{

}

完成后運行第三行代碼，輸出a

先在AO對象中尋找a的值，發(fā)現(xiàn)不存在，向外部作用域擴展，在GO對象中尋找a，發(fā)現(xiàn)a的值為100

輸出100

當然，笑話里的題過于簡單，但是能讓我們清晰的了解到這個“預編譯”的進行

下面，我們來看一道面試題簡化版，練練手：

global = 100 
    function fn() { 
      console.log(global);  
      global = 200 
      console.log(global);  
      var global = 300 
    } 
    fn() 

它的邏輯和輸出結果是多少呢?通過一步步的分析我們可以知道具體的分析應該是這樣的：

GO: { 
      global: undefined => 100, 
      fn: function() {} 
    } 
    global = 100 // 沒有聲明的變量默認為全局變量，也會放到GO中 
    function fn() { 
      console.log(global); // 輸出undefined 
      global = 200 
      console.log(global); // 輸出200 
      var global = 300 
    } 
    AO: { 
      global: undefined => 200 => 300 
    } 
    fn()