javascript預(yù)編譯做了：1、語法分析，就是引擎檢查你的代碼有沒有什么低級的語法錯誤；2、預(yù)編譯，簡單理解就是在內(nèi)存中開辟一些空間，存放一些變量與函數(shù) ；3、解釋執(zhí)行，顧名思義便是執(zhí)行代碼了。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript運行三部曲

• 語法分析

• 預(yù)編譯

• 解釋執(zhí)行

語法分析很簡單，就是引擎檢查你的代碼有沒有什么低級的語法錯誤； 解釋執(zhí)行顧名思義便是執(zhí)行代碼了； 預(yù)編譯簡單理解就是在內(nèi)存中開辟一些空間，存放一些變量與函數(shù) ；

JS預(yù)編譯什么時候發(fā)生

預(yù)編譯到底什么時候發(fā)生? 誤以為預(yù)編譯僅僅發(fā)生在script內(nèi)代碼塊執(zhí)行前 這倒并沒有錯 預(yù)編譯確確實實在script代碼內(nèi)執(zhí)行前發(fā)生了 但是它大部分會發(fā)生在函數(shù)執(zhí)行前

實例分析

先來區(qū)分理解一下這2個概念： 變量聲明 var … 函數(shù)聲明 function(){}

<script> var a = 1; console.log(a); function test(a) {   console.log(a);   var a = 123;   console.log(a);   function a() {}   console.log(a);   var b = function() {}   console.log(b);   function d() {} } var c = function (){ console.log("I at C function"); } console.log(c); test(2); </script>

分析過程如下：

• 頁面產(chǎn)生便創(chuàng)建了GO全局對象（Global Object）（也就是window對象）；

• 第一個腳本文件加載；腳本加載完畢后，分析語法是否合法；

• 開始預(yù)編譯 查找變量聲明，作為GO屬性，值賦予undefined；

• 查找函數(shù)聲明，作為GO屬性，值賦予函數(shù)體；

預(yù)編譯

//抽象描述     GO/window = {         a: undefined,         c: undefined，         test: function(a) {             console.log(a);             var a = 123;             console.log(a);             function a() {}             console.log(a);             var b = function() {}             console.log(b);             function d() {}         }     }

解釋執(zhí)行代碼（直到執(zhí)行調(diào)用函數(shù)test(2)語句）

//抽象描述     GO/window = {         a: 1,         c: function (){             console.log("I at C function");         }         test: function(a) {             console.log(a);             var a = 123;             console.log(a);             function a() {}             console.log(a);             var b = function() {}             console.log(b);             function d() {}         }     }

執(zhí)行函數(shù)test()之前，發(fā)生預(yù)編譯

• 創(chuàng)建AO活動對象（Active Object）；

• 查找形參和變量聲明，值賦予undefined；

• 實參值賦給形參；

• 查找函數(shù)聲明，值賦予函數(shù)體；

預(yù)編譯之前面1、2兩小步如下：

//抽象描述     AO = {         a:undefined,         b:undefined,     }

預(yù)編譯之第3步如下：

//抽象描述         AO = {             a:2,             b:undefined,         }

預(yù)編譯之第4步如下：

//抽象描述     AO = {         a:function a() {},         b:undefined         d:function d() {}     }

執(zhí)行test()函數(shù)時如下過程變化：

//抽象描述     AO = {         a:function a() {},         b:undefined         d:function d() {}     }     --->     AO = {         a:123,         b:undefined         d:function d() {}     }     --->     AO = {         a:123,         b:function() {}         d:function d() {}     }

執(zhí)行結(jié)果：

注意：

預(yù)編譯階段發(fā)生變量聲明和函數(shù)聲明，沒有初始化行為（賦值），匿名函數(shù)不參與預(yù)編譯 ； 只有在解釋執(zhí)行階段才會進(jìn)行變量初始化 ；

預(yù)編譯(函數(shù)執(zhí)行前)

• 創(chuàng)建AO對象（Active Object）

• 查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined

• 實參形參相統(tǒng)一，實參值賦給形參

• 查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用

預(yù)編譯(腳本代碼塊script執(zhí)行前)

• 查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined

• 查找函數(shù)聲明，函數(shù)名作為全局對象的屬性，值為函數(shù)引用

預(yù)編譯小結(jié)

• 預(yù)編譯兩個小規(guī)則

• 函數(shù)聲明整體提升-(具體點說，無論函數(shù)調(diào)用和聲明的位置是前是后，系統(tǒng)總會把函數(shù)聲明移到調(diào)用前面）

• 變量 聲明提升-(具體點說，無論變量調(diào)用和聲明的位置是前是后，系統(tǒng)總會把聲明移到調(diào)用前，注意僅僅只是聲明，所以值是undefined）

• 預(yù)編譯前奏

• imply global 即任何變量，如果未經(jīng)聲明就賦值，則此變量就位全局變量所有。(全局域就是Window)

• 一切聲明的全局變量，全是window的屬性； var a = 12;等同于Window.a = 12;

• 函數(shù)預(yù)編譯發(fā)生在函數(shù)執(zhí)行前一刻。

【推薦學(xué)習(xí)：javascript高級教程】