JavaScript中預(yù)編譯怎么實(shí)現(xiàn)

這篇文章主要介紹了JavaScript中預(yù)編譯怎么實(shí)現(xiàn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript中預(yù)編譯怎么實(shí)現(xiàn)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

JavaScript運(yùn)行三部曲

腳本執(zhí)行js引擎都做了什么呢？

• 語(yǔ)法分析

• 預(yù)編譯

• 解釋執(zhí)行

在執(zhí)行代碼前，還有兩個(gè)步驟

語(yǔ)法分析很簡(jiǎn)單，就是引擎檢查你的代碼有沒(méi)有什么低級(jí)的語(yǔ)法錯(cuò)誤

解釋執(zhí)行顧名思義便是執(zhí)行代碼了

預(yù)編譯簡(jiǎn)單理解就是在內(nèi)存中開(kāi)辟一些空間，存放一些變量與函數(shù)

理解了預(yù)編譯對(duì)大家理解作用域同樣有幫助

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

我當(dāng)初思維誤區(qū)也發(fā)生在這里

預(yù)編譯到底什么時(shí)候發(fā)生

希望大家不要讓上面的運(yùn)行過(guò)程讓你產(chǎn)生誤會(huì)，

誤以為預(yù)編譯僅僅發(fā)生在script內(nèi)代碼塊執(zhí)行前

這倒并沒(méi)有錯(cuò)

預(yù)編譯確確實(shí)實(shí)在script代碼內(nèi)執(zhí)行前發(fā)生了

但是它大部分會(huì)發(fā)生在函數(shù)執(zhí)行前

JS預(yù)編譯實(shí)例

舉例前，先來(lái)思考一下這幾個(gè)概念：

• 變量聲明 var…

• 函數(shù)聲明 function…
  

<script>
  var a = 1;// 變量聲明
  function b(y){//函數(shù)聲明
    var x = 1;
    console.log('so easy');
  };
  var c = function(){//是變量聲明而不是函數(shù)聲明??！
    //...
  }
  b(100);
</script>
<script>
  var d = 0;
</script>

讓我們看看引擎對(duì)這段代碼做了什么吧

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

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

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

4.開(kāi)始預(yù)編譯

查找變量聲明，作為GO屬性，值賦予undefined
查找函數(shù)聲明，作為GO屬性，值賦予函數(shù)體

//偽代碼
GO/window = {
  //頁(yè)面加載創(chuàng)建GO同時(shí)，創(chuàng)建了document、navigator、screen等等屬性，此處省略
  a: undefined,
  c: undefined，
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

解釋執(zhí)行代碼（直到執(zhí)行函數(shù)b）

//偽代碼
GO/window = {
  //變量隨著執(zhí)行流得到初始化
  a: 1,
  c: function(){
    //...
  },
  b: function(y){
    var x = 1;
    console.log('so easy');
  }
}

執(zhí)行函數(shù)b之前，發(fā)生預(yù)編譯

• 創(chuàng)建AO活動(dòng)對(duì)象（Active Object）

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

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

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

//偽代碼
AO = {
  //創(chuàng)建AO同時(shí)，創(chuàng)建了arguments等等屬性，此處省略
  y: 100,
  x: undefined
}

解釋執(zhí)行函數(shù)中代碼

第一個(gè)腳本文件執(zhí)行完畢，加載第二個(gè)腳本文件

第二個(gè)腳本文件加載完畢后，進(jìn)行語(yǔ)法分析

語(yǔ)法分析完畢，開(kāi)始預(yù)編譯

重復(fù)最開(kāi)始的預(yù)編譯步驟……

大家要注意，

預(yù)編譯階段發(fā)生變量聲明和函數(shù)聲明，沒(méi)有初始化行為（賦值），匿名函數(shù)不參與預(yù)編譯

只有在解釋執(zhí)行階段才會(huì)進(jìn)行變量初始化

關(guān)于“JavaScript中預(yù)編譯怎么實(shí)現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript中預(yù)編譯怎么實(shí)現(xiàn)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。