大家都知道JavaScript是解釋型語言，既然是解釋型語言，就是編譯一行，執(zhí)行一行，那又何來預(yù)編譯一說呢?腳本執(zhí)行js引擎都做了什么呢？今天我們就來看看吧。

1-JavaScript運(yùn)行三部曲

語法分析

預(yù)編譯

解釋執(zhí)行

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

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

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

3-實(shí)例分析

先來區(qū)分理解一下這2個(gè)概念： 變量聲明 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全局對(duì)象（Global Object）（也就是window對(duì)象）；

第一個(gè)腳本文件加載；

腳本加載完畢后，分析語法是否合法；

開始預(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活動(dòng)對(duì)象（Active Object）；

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

實(shí)參值賦給形參；

查找函數(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() {}  }