本篇文章給大家帶來了關于javascript中預編譯的相關知識，其中主要通過示例來介紹預編譯的相關問題，希望對大家有幫助。

階段(三個)

1. 詞法語法分析：詞法語法分析就是檢查JavaScript代碼是否有一些低級的語法錯誤
2. 預編譯：本文主講
3. 執行代碼：執行代碼就是js引擎解析代碼，解析一行執行一行

這章主要講預編譯過程

預編譯過程

預編譯也分為2個時間點：

1. 第一個是在JavaScript代碼執行之前
2. 第二個是在函數執行之前。

但是JavaScript代碼之前，之前的預編譯只發生一次，函數執行之前的預編譯是多次的。

1. JavaScript代碼執行之前的預編譯

1. JavaScript代碼執行之前，首先會創建一個全局對象，可以理解為window對象，也可以理解為GO（Global Object）對象，我們是看不到的(無法打印)
2. 然后將所有聲明的全局變量、未使用var和let聲明的變量放到GO對象中，并且賦值為undefined(聯想到“變量提升”)
3. 分析**函數聲明：**然后再將所有的函數聲明也放到GO對象中，并且賦值為函數自身的函數體(函數名為屬性名,值為函數體，如果函數名和變量名相同，則無情覆蓋)

案例說明

<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>

結合上面說的步驟：

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

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

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

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

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

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

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

   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. 接著執行到賦值語句：b = 10; 此時GO對象里b的值變成了10

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

7. 接著下一行代碼是一個**fun函數，此時不會去執行該函數**，因為在前面的預編譯過程中實際上是被放到了代碼的最前端，就是傳說中的聲明提前，所以忽略掉了。接著給a2進行賦值操作：a2 = 20，GO對象也發生變化：

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

8. 接著是執行fun函數，如上面說到的另外一個時間點發生的預編譯，就是執行函數之前，現在就來說一下函數執行前的預編譯是怎么樣的。

2. 函數執行前的預編譯

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

   1. 生成AO對象：函數執行前的一瞬間，生成AO活動對象
   2. 分析生成AO屬性：查找形參和變量聲明放到AO對象，賦值為undefined
   3. 分析函數聲明：查找函數聲明放到AO對象并賦值為函數體。函數名為屬性名,值為函數體；

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

2. 逐行執行。

案例說明

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

1. 第一步創建AO對象

   AO{  }

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

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

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

3. 將實參賦值到形參上

   AO{ 	a: 1, 	c: undefined, }

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

5. 函數執行之前的預編譯完成，開始執行語句

6. 執行代碼

   1. 首先執行打印變量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. 此時再執行console.log(a)的值就是AO對象里邊a的值 2；執行console.log(b)的值就是GO對象b的值 2，至此函數fun執行完畢，緊跟著fun的AO也會被銷毀。

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

總結

預編譯兩個小規則：

1. 函數聲明整體提升(無論函數調用和聲明的位置是前是后，系統總會把函數聲明移到調用前面）
2. 變量聲明提升(無論變量調用和聲明的位置是前是后，系統總會把聲明移到調用前，注意僅僅只是聲明，所以值是undefined）

預編譯前奏

1. imply global(暗示全局變量-專業術語) 即：任何變量，如果未經聲明就賦值，則此變量就位全局變量所有。(全局域就是window，這里再一次說明了JavaScript是基于對象的語言，base on window)
2. 一切聲明的全局變量，全是window的屬性；var a=12;等同于window.a = 12;(會造成window這個對象特別臃腫)
3. 函數預編譯發生在函數執行前一刻(懶加載機制)