JavaScript中的預(yù)編譯怎么進(jìn)行

這篇“JavaScript中的預(yù)編譯怎么進(jìn)行”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JavaScript中的預(yù)編譯怎么進(jìn)行”文章吧。

引入

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

一 parse階段

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

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

二 analyze階段

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

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

“預(yù)編譯”

我的老師在和我講相關(guān)知識(shí)點(diǎn)前和我說(shuō)過(guò)這么一個(gè)笑話：

面試時(shí)我因?yàn)檫@么一個(gè)問(wèn)題掛了

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

問(wèn)：為什么輸出a的值是100?

答：因?yàn)?00賦值給了a。

老師說(shuō)完我頭昏腦漲，完全不明白笑點(diǎn)在哪，后來(lái)才知道這是在考察“預(yù)編譯”這方面的知識(shí)。

總的來(lái)說(shuō)，“預(yù)編譯”可以分為

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

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

具體步驟如下：

全局預(yù)編譯

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

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

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

局部預(yù)編譯

1. 創(chuàng)建一個(gè)AO對(duì)象

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

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

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

所以那個(gè)笑話里的面試問(wèn)題我們應(yīng)該這么回答：

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

找到變量聲明 var a

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

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

GO{

a:undefined

foo:function(){}

}

然后運(yùn)行第一行代碼 a=100

在GO中將100賦值給a

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

創(chuàng)建一個(gè)AO對(duì)象

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

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

所以

AO{

}

完成后運(yùn)行第三行代碼，輸出a

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

輸出100

當(dāng)然，笑話里的題過(guò)于簡(jiǎn)單，但是能讓我們清晰的了解到這個(gè)“預(yù)編譯”的進(jìn)行

下面，我們來(lái)看一道面試題簡(jiǎn)化版，練練手：

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

它的邏輯和輸出結(jié)果是多少呢?通過(guò)一步步的分析我們可以知道具體的分析應(yīng)該是這樣的：

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

以上就是關(guān)于“JavaScript中的預(yù)編譯怎么進(jìn)行”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。