實例講解JavaScript預編譯流程

更新時間：2019年01月24日 14:41:53 投稿：laozhang

在本篇文章里我們給大家分享的是關于JavaScript預編譯流程的相關知識點內容，有需要的朋友們學習下。

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

1-JavaScript運行三部曲

語法分析

預編譯

解釋執(zhí)行

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

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

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

3-實例分析

先來區(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對象）；

第一個腳本文件加載；

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

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

預編譯

//抽象描述
  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í)行調用函數(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ā)生預編譯
創(chuàng)建AO活動對象（Active Object）；

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

實參值賦給形參；

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

預編譯之前面1、2兩小步如下：

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

預編譯之第3步如下：

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

預編譯之第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í)行結果：