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

階段(三個)

詞法語法分析：詞法語法分析就是檢查JavaScript程式碼是否有一些低階的語法錯誤
預編譯：本文主講
執行程式碼：執行程式碼就是js引擎解析程式碼，解析一行執行一行

這章主要講預編譯過程

預編譯過程

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

第一個是在JavaScript程式碼執行之前
第二個是在函數執行之前。

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

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

JavaScript程式碼執行之前，首先會建立一個全域性物件，可以理解為window物件，也可以理解為GO（Global Object）物件，我們是看不到的(無法列印)
然後將所有宣告的全域性變數、未使用var和let宣告的變數放到GO物件中，並且賦值為undefined(聯想到「變數提升」)
分析**函數宣告：**然後再將所有的函數宣告也放到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>

結合上面說的步驟：

首先，<script></script>中的程式碼執行之前會建立一個GO物件(window物件)
```
GO = {
	//自帶的屬性都不寫
}
```
將所有宣告的全域性變數、未使用var和let宣告的變數放到GO物件中，並且賦值為undefined
```
GO = {
	a : undefined,
	b : undefined,
	a2 : undefined
}
```

分析函數宣告，函數名為屬性名,值為函數體，如果函數名和變數名相同，則無情覆蓋

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

此時完成了js程式碼執行之前的預編譯過程，開始執行js程式碼，首先是給a進行賦值為1，在GO物件裡邊也會進行對應的改變：
```
GO = {
	a : 1,
	b : undefined,
	a2 : undefined,
	function fun (a) {
    var a = b = 2;
    var c = 123;
  }
}
```
然後列印a，此時會在GO物件上去找變數a，然後此時的a的值為1，所以console.log(a) 是等於1的。接著列印b，也會去GO物件上找，找到了b的值為undefined，所以console.log(b)是等於undefined。

接著執行到賦值語句：b = 10; 此時GO物件裡b的值變成了10

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

接著下一行程式碼是一個**fun函數，此時不會去執行該函數**，因為在前面的預編譯過程中實際上是被放到了程式碼的最前端，就是傳說中的宣告提前，所以忽略掉了。接著給a2進行賦值操作：a2 = 20，GO物件也發生變化：
```
GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}
```
接著是執行fun函數，如上面說到的另外一個時間點發生的預編譯，就是執行函數之前，現在就來說一下函數執行前的預編譯是怎麼樣的。

2. 函數執行前的預編譯

函數呼叫,也是會生成自己的作用域(**AO：**Activetion Object,執行期上下文)AO活動物件。函數呼叫時候,執行前的一瞬間產生的,如果有多個函數的呼叫,會產生多個AO
1. 生成AO物件：函數執行前的一瞬間，生成AO活動物件
2. 分析生成AO屬性：查詢形參和變數宣告放到AO物件，賦值為undefined
3. 分析函數宣告：查詢函數宣告放到AO物件並賦值為函數體。函數名為屬性名,值為函數體；
如果遇到AO物件上屬性同名，則無情覆蓋
逐行執行。

案例說明

拿的是上文中的程式碼範例。

第一步建立AO物件
```
AO{

}
```
查詢形參和變數宣告放到AO物件並賦值為undefined；
注意：fun函數裡邊的b是未經var宣告的，所以是全域性變數，不會被放在fun的AO上。
```
AO{
	a: undefined,//形參a與區域性變數a同名
	c: undefined
}
```
將實參賦值到形參上
```
AO{
	a: 1,
	c: undefined,
}
```
查詢函數宣告放到AO物件並賦值為函數體，fun函數沒有函數宣告，所以忽略這一步。
函數執行之前的預編譯完成，開始執行語句
執行程式碼
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也會被銷燬。
綜上所述，依次列印出來的值為：1，undefined，10，2，2。

總結

預編譯兩個小規則：

函數宣告整體提升(無論函數呼叫和宣告的位置是前是後，系統總會把函數宣告移到呼叫前面）
變數宣告提升(無論變數呼叫和宣告的位置是前是後，系統總會把宣告移到呼叫前，注意僅僅只是宣告，所以值是undefined）

預編譯前奏

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

完全掌握JavaScript預編譯過程

階段(三個)

預編譯過程

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

案例說明

2. 函數執行前的預編譯

案例說明

總結

預編譯兩個小規則：

預編譯前奏