JavaScript 預編譯原理

今天用了大量時間復習了作用域、預編譯等等知識

看了很多博文，翻開了以前看過的書（好像好多書都不會講預編譯）

發(fā)現(xiàn)當初覺得自己學的很明白，其實還是存在一些思維誤區(qū) （很多博文具有誤導性）

今晚就整理了一下凌亂的思路

先整理一下預編譯的知識吧，日后有時間再把作用域詳細講解一下

大家要明白，這個預編譯和傳統(tǒng)的編譯是不一樣的（可以理解js預編譯為特殊的編譯過程）

JavaScript是解釋型語言，

既然是解釋型語言，就是編譯一行，執(zhí)行一行

傳統(tǒng)的編譯會經(jīng)歷很多步驟，分詞、解析、代碼生成什么的

日后有時間再給大家科普

下面就給大家分享一下我所理解的JS預編譯

JavaScript運行三部曲

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

• 語法分析
• 預編譯
• 解釋執(zhí)行

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

語法分析很簡單，就是引擎檢查你的代碼有沒有什么低級的語法錯誤

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

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

理解了預編譯對大家理解作用域同樣有幫助

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

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

預編譯到底什么時候發(fā)生

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

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

這倒并沒有錯

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

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

JS預編譯實例

舉例前，先來思考一下這幾個概念：

• 變量聲明 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>

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

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

2.第一個腳本文件加載

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

4.開始預編譯

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

//偽代碼
GO/window = {
  //頁面加載創(chuàng)建GO同時，創(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ā)生預編譯

• 創(chuàng)建AO活動對象（Active Object）
• 查找形參和變量聲明，值賦予undefined
• 實參值賦給形參
• 查找函數(shù)聲明，值賦予函數(shù)體
  

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

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

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

第二個腳本文件加載完畢后，進行語法分析

語法分析完畢，開始預編譯

重復最開始的預編譯步驟……

大家要注意，

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

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

嗯~最后收一下尾

總結(jié)

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

1. 創(chuàng)建AO對象（Active Object）
2. 查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined
3. 實參形參相統(tǒng)一，實參值賦給形參
4. 查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用

預編譯(腳本代碼塊script執(zhí)行前)

1. 查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined
3. 查找函數(shù)聲明，函數(shù)名作為全局對象的屬性，值為函數(shù)引用

理解了預編譯對理解提升行為，this指向，作用域及性能等問題都有很大幫助

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

最新評論