web前端Javascript開發學習之JavaScript中的預編譯如何進行

預編譯又稱預處理，是整個編譯過程最先做的工作，即程式執行前的一些預處理工作。主要處理#開頭的指令。如拷貝#include包含的檔案代碼、替換#define定義的宏、條件編譯#if等。

何時需要預編譯：

總是使用不經常改動的大型代碼體。

程式由多個子產品組成，所有子產品都使用一組标準的包含檔案和相同的編譯選項。在這種情況下，可以将所有包含檔案預編譯為一個預編譯頭。

我們比較常見的問題：為什麼人們會認為JS存在預編譯，是JS的哪種行為讓人們覺得它産生了預編譯呢?讓我們來簡單聊一聊。

引入

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

一 parse階段

分詞。就是将代碼分成原子符号(token)

将token解析翻譯成AST(文法生成樹)。

二 analyze階段

遇到聲明語句，将會把聲明傳到作用域(scope)中建立綁定，配置設定記憶體并将變量預設設為undefined或函數體。

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

“預編譯”

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

面試時我因為這麼一個問題挂了

var a = 100

function foo(){

console.log(a)

}

foo()

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

答：因為100指派給了a。

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

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

建立GO對象(global object) 發生在頁面加載完成時

建立AO對象(activation object) 發生在函數執行前一刻

具體步驟如下：

全局預編譯

1. 建立GO對象
2. 找變量聲明，将變量聲明作為GO對象的屬性名，并指派undefined
3. 找全局裡的函數聲明，将函數名作為GO對象的屬性名，值賦予函數體

局部預編譯

1. 建立一個AO對象
2. 找形參和變量聲明，将形參和變量聲明作為AO對象的屬性名，值為undefined
3. 将實參和形參統一
4. 在函數體裡找函數聲明，将函數名作為AO對象的屬性名，值賦予函數體

是以那個笑話裡的面試問題我們應該這麼回答：

首先，編譯器建立一個GO對象

找到變量聲明 var a

和函數聲明 function foo(){}

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

GO{

a:undefined

foo:function(){}

}

然後運作第一行代碼 a=100

在GO中将100指派給a

再執行第五行代碼運作foo函數

建立一個AO對象

在函數體内找變量聲明和形參，(無)

再在函數體内找函數聲明(無)

是以

AO{

}

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

先在AO對象中尋找a的值，發現不存在，向外部作用域擴充，在GO對象中尋找a，發現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()

文章來源：網絡 版權歸原作者所有

上文内容不用于商業目的，如涉及知識産權問題，請權利人聯系小編，我們将立即處理