建站
咨詢
售后
建站咨詢
新聞中心
前言
預(yù)編譯，顧名思義就是是做些代碼文本的替換工作。是整個(gè)編譯過程的最先做的工作。JavaScript 的圣經(jīng) —— MDN 明確地說過， JavaScript 是一個(gè)解釋型語(yǔ)言，而并非編譯型語(yǔ)言，所以預(yù)編譯對(duì)于JS來說是子虛烏有的。但是人們喜歡稱之為預(yù)編譯其實(shí)也無傷大雅，關(guān)鍵在于為什么人們會(huì)認(rèn)為JS存在預(yù)編譯，是JS的哪種行為讓人們覺得它產(chǎn)生了預(yù)編譯呢?讓我們來簡(jiǎn)單聊一聊。
創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)安寧,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
引入
在代碼執(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)。接下來，讓我們來了解一波看起來最像預(yù)編譯的操作--第三步的干貨。
“預(yù)編譯”
我的老師在和我講相關(guān)知識(shí)點(diǎn)前和我說過這么一個(gè)笑話：
面試時(shí)我因?yàn)檫@么一個(gè)問題掛了
- var a = 100
- function foo(){
- console.log(a)
- }
- foo()
問：為什么輸出a的值是100?
答：因?yàn)?00賦值給了a。
老師說完我頭昏腦漲，完全不明白笑點(diǎn)在哪，后來才知道這是在考察“預(yù)編譯”這方面的知識(shí)。
總的來說，“預(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è)笑話里的面試問題我們應(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)找變量聲明和形參，(無)
再在函數(shù)體內(nèi)找函數(shù)聲明(無)
所以
AO{
}
完成后運(yùn)行第三行代碼，輸出a
先在AO對(duì)象中尋找a的值，發(fā)現(xiàn)不存在，向外部作用域擴(kuò)展，在GO對(duì)象中尋找a，發(fā)現(xiàn)a的值為100
輸出100
當(dāng)然，笑話里的題過于簡(jiǎn)單，但是能讓我們清晰的了解到這個(gè)“預(yù)編譯”的進(jìn)行
下面，我們來看一道面試題簡(jiǎn)化版，練練手：
- global = 100
- function fn() {
- console.log(global);
- global = 200
- console.log(global);
- var global = 300
- }
- fn()
它的邏輯和輸出結(jié)果是多少呢?通過一步步的分析我們可以知道具體的分析應(yīng)該是這樣的：
- GO: {
- global: undefined => 100,
- fn: function() {}
- }
- global = 100 // 沒有聲明的變量默認(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()
網(wǎng)站名稱：JavaScript中的預(yù)編譯如何進(jìn)行？看完這篇就夠了
當(dāng)前網(wǎng)址：http://www.dlmjj.cn/article/djjsjip.html
