實(shí)例講解JavaScript預(yù)編譯流程

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

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

語法分析

預(yù)編譯

解釋執(zhí)行

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

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

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

3-實(shí)例分析

先來區(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ù)聲明，值賦予函數(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

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

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

預(yù)編譯(腳本代碼塊script執(zhí)行前)
查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined

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

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

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

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

變量 聲明提升-(具體點(diǎn)說，無論變量調(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í)行前一刻。