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

站在用戶的角度思考問題，與客戶深入溝通，找到特克斯網(wǎng)站設(shè)計(jì)與特克斯網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋特克斯地區(qū)。

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

語法分析

預(yù)編譯

解釋執(zhí)行

語法分析很簡(jiǎn)單，就是引擎檢查你的代碼有沒有什么低級(jí)的語法錯(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í)例分析

先來區(qū)分理解一下這2個(gè)概念： 變量聲明 var ... 函數(shù)聲明 function(){}

分析過程如下：

頁(yè)面產(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() {}
  }

執(zhí)行test()函數(shù)時(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í)行階段才會(huì)進(jìn)行變量初始化 ；

預(yù)編譯(函數(shù)執(zhí)行前)

創(chuàng)建AO對(duì)象（Active Object）

查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined

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

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

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

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

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

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

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

變量 聲明提升-(具體點(diǎn)說，無論變量調(diào)用和聲明的位置是前是后，系統(tǒng)總會(huì)把聲明移到調(diào)用前，注意僅僅只是聲明，所以值是undefined）

預(yù)編譯前奏

imply global 即任何變量，如果未經(jīng)聲明就賦值，則此變量就位全局變量所有。(全局域就是Window)

一切聲明的全局變量，全是window的屬性； var a = 12;等同于Window.a = 12;

函數(shù)預(yù)編譯發(fā)生在函數(shù)執(zhí)行前一刻。