|
預編譯又稱預處理，是整個編譯過程最先做的工作，即程序執(zhí)行前的一些預處理工作。主要處理#開頭的指令。如拷貝#include包含的文件代碼、替換#define定義的宏、條件編譯#if等。 何時需要預編譯： 總是使用不經(jīng)常改動的大型代碼體。 程序由多個模塊組成，所有模塊都使用一組標準的包含文件和相同的編譯選項。在這種情況下，可以將所有包含文件預編譯為一個預編譯頭。 我們比較常見的問題：為什么人們會認為JS存在預編譯，是JS的哪種行為讓人們覺得它產生了預編譯呢?讓我們來簡單聊一聊。 引入 在代碼執(zhí)行前，編譯器會進行如下操作： 一 parse階段 分詞。就是將代碼分成原子符號(token) 將token解析翻譯成AST(語法生成樹)。 二 analyze階段 遇到聲明語句，將會把聲明傳到作用域(scope)中創(chuàng)建綁定，分配內存并將變量默認設為undefined或函數(shù)體。 然后就可以執(zhí)行代碼啦，執(zhí)行中途每次遇到賦值或者取值，都會從作用域中查找綁定。這樣看，是不是有點“預編譯”內味了?但是實際上還是稱它為預處理更加貼切一點。接下來，讓我們來了解一波看起來最像預編譯的操作--第三步的干貨。 “預編譯” 我的老師在和我講相關知識點前和我說過這么一個笑話： 面試時我因為這么一個問題掛了 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ù)體內找變量聲明和形參，(無) 再在函數(shù)體內找函數(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 onsole.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() 文章來源：網(wǎng)絡 版權歸原作者所 上文內容不用于商業(yè)目的，如涉及知識產權問題，請權利人聯(lián)系小編，我們將立即處理 |
|
|
