站長資訊網(wǎng)
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í)行階段才會進行變量初始化 ；
預(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高級教程】
