JavaScript預(yù)編譯過程是什么

本篇內(nèi)容介紹了“JavaScript預(yù)編譯過程是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

階段(三個)

1. 詞法語法分析：詞法語法分析就是檢查JavaScript代碼是否有一些低級的語法錯誤

2. 預(yù)編譯：本文主講

3. 執(zhí)行代碼：執(zhí)行代碼就是js引擎解析代碼，解析一行執(zhí)行一行

這章主要講預(yù)編譯過程

預(yù)編譯過程

預(yù)編譯也分為2個時間點(diǎn)：

1. 第一個是在JavaScript代碼執(zhí)行之前

2. 第二個是在函數(shù)執(zhí)行之前。

但是JavaScript代碼之前，之前的預(yù)編譯只發(fā)生一次，函數(shù)執(zhí)行之前的預(yù)編譯是多次的。

1. JavaScript代碼執(zhí)行之前的預(yù)編譯

1. JavaScript代碼執(zhí)行之前，首先會創(chuàng)建一個全局對象，可以理解為window對象，也可以理解為GO（Global Object）對象，我們是看不到的(無法打印)

2. 然后將所有聲明的全局變量、未使用var和let聲明的變量放到GO對象中，并且賦值為undefined(聯(lián)想到“變量提升”)

3. 分析**函數(shù)聲明：**然后再將所有的函數(shù)聲明也放到GO對象中，并且賦值為函數(shù)自身的函數(shù)體(函數(shù)名為屬性名,值為函數(shù)體，如果函數(shù)名和變量名相同，則無情覆蓋)

案例說明

<script>
    var a = 1;
    console.log(a);
    console.log(b);
    var b = 10;
    function fun (a) {
        console.log(b);
        var a = b = 2;
        var c = 123;
        console.log(a);
        console.log(b);
    }
    var a2 = 20
    fun(1);
 
</script>

結(jié)合上面說的步驟：

1. 首先，<script></script>中的代碼執(zhí)行之前會創(chuàng)建一個GO對象(window對象)

   GO = {
   	//自帶的屬性都不寫
   }

2. 將所有聲明的全局變量、未使用var和let聲明的變量放到GO對象中，并且賦值為undefined

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined
   }

3. 分析函數(shù)聲明，函數(shù)名為屬性名,值為函數(shù)體，如果函數(shù)名和變量名相同，則無情覆蓋

   GO = {
   	a : undefined,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

4. 此時完成了js代碼執(zhí)行之前的預(yù)編譯過程，開始執(zhí)行js代碼，首先是給a進(jìn)行賦值為1，在GO對象里邊也會進(jìn)行對應(yīng)的改變：

   GO = {
   	a : 1,
   	b : undefined,
   	a2 : undefined,
   	function fun (a) {
       var a = b = 2;
       var c = 123;
     }
   }

5. 然后打印a，此時會在GO對象上去找變量a，然后此時的a的值為1，所以console.log(a) 是等于1的。接著打印b，也會去GO對象上找，找到了b的值為undefined，所以console.log(b)是等于undefined。

6. 接著執(zhí)行到賦值語句：b = 10; 此時GO對象里b的值變成了10

   GO = {
   	a : 1,
   	b : 10,
   	a2 : undefined,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

7. 接著下一行代碼是一個**fun函數(shù)，此時不會去執(zhí)行該函數(shù)**，因?yàn)樵谇懊娴念A(yù)編譯過程中實(shí)際上是被放到了代碼的最前端，就是傳說中的聲明提前，所以忽略掉了。接著給a2進(jìn)行賦值操作：a2 = 20，GO對象也發(fā)生變化：

   GO = {
   	a : 1,
   	b : 10,
   	a2 : 20,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

8. 接著是執(zhí)行fun函數(shù)，如上面說到的另外一個時間點(diǎn)發(fā)生的預(yù)編譯，就是執(zhí)行函數(shù)之前，現(xiàn)在就來說一下函數(shù)執(zhí)行前的預(yù)編譯是怎么樣的。

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

1. 函數(shù)調(diào)用,也是會生成自己的作用域(**AO：**Activetion Object,執(zhí)行期上下文)AO活動對象。函數(shù)調(diào)用時候,執(zhí)行前的一瞬間產(chǎn)生的,如果有多個函數(shù)的調(diào)用,會產(chǎn)生多個AO

   如果遇到AO對象上屬性同名，則無情覆蓋

1. 生成AO對象：函數(shù)執(zhí)行前的一瞬間，生成AO活動對象

2. 分析生成AO屬性：查找形參和變量聲明放到AO對象，賦值為undefined

3. 分析函數(shù)聲明：查找函數(shù)聲明放到AO對象并賦值為函數(shù)體。函數(shù)名為屬性名,值為函數(shù)體；

2. 逐行執(zhí)行。

案例說明

拿的是上文中的代碼示例。

1. 第一步創(chuàng)建AO對象

   AO{
   
   }

2. 查找形參和變量聲明放到AO對象并賦值為undefined；

   注意：fun函數(shù)里邊的b是未經(jīng)var聲明的，所以是全局變量，不會被放在fun的AO上。

   AO{
   	a: undefined,//形參a與局部變量a同名
   	c: undefined
   }

3. 將實(shí)參賦值到形參上

   AO{
   	a: 1,
   	c: undefined,
   }

4. 查找函數(shù)聲明放到AO對象并賦值為函數(shù)體，fun函數(shù)沒有函數(shù)聲明，所以忽略這一步。

5. 函數(shù)執(zhí)行之前的預(yù)編譯完成，開始執(zhí)行語句

6. 執(zhí)行代碼

1. 首先執(zhí)行打印變量b，而此時fun的AO里邊并沒有變量b，所以會去GO對象里邊找，此時的GO對象b的值為10，所以第一行代碼打印出10；

2. 第二行代碼首先要看的是b = 2，然后GO對象里邊b的值就被改為2了。

   GO = {
   	a : 1,
   	b : 10,
   	a2 : 20,
   	function fun (a) {
   		var a = b = 2;
   		var c = 123;
   	}
   }

3. 然后b再賦值給a，變量a是屬于局部變量a，所以fun的AO對象里邊a的值被改為2。

   AO{
   	a: 2,
   	c: undefined,
   }

4. 接著下一個賦值語句是c = 123，所以AO對象中c的值被改為了123

   AO{
   	a: 2,
   	c: 123,
   }

5. 此時再執(zhí)行console.log(a)的值就是AO對象里邊a的值 2；執(zhí)行console.log(b)的值就是GO對象b的值 2，至此函數(shù)fun執(zhí)行完畢，緊跟著fun的AO也會被銷毀。

7. 綜上所述，依次打印出來的值為：1，undefined，10，2，2。

“JavaScript預(yù)編譯過程是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！