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

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

在本篇文章里我們給大家分享的是關(guān)于JavaScript預(yù)編譯流程的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。

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

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

語(yǔ)法分析

預(yù)編譯

解釋執(zhí)行

語(yǔ)法分析很簡(jiǎn)單，就是引擎檢查你的代碼有沒有什么低級(jí)的語(yǔ)法錯(cuò)誤；解釋執(zhí)行顧名思義便是執(zhí)行代碼了；預(yù)編譯簡(jiǎn)單理解就是在內(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í)例分析

先來(lái)區(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>

分析過(guò)程如下：

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

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

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

開始預(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)語(yǔ)句）

//抽象描述
  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() {}
  }

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

//抽象描述
  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é)果：