JavaScript的預編譯過程分析

1、JavaScript概念

JavaScript ( JS ) 是一個單線程、解釋型的編程語言。

2、JavaScript語言特色

2.1 單線程

JavaScript語言的一大特色就是單線程，也就是說，同一個時間只能作一件事。

2.2 解釋型語言

自上而下，解釋一行，執行一行；不會通篇編譯爲一個文件再執行。

3、 JavaScript執行過程

3.1 語法分析

顧名思義 就是檢查一遍js代碼內有沒有出現語法錯誤（好比少些個分號，多寫個括號等）；語法分析期間不會執行代碼

3.2 預編譯

預編譯發生在函數執行的前一刻
全局下：
全局的變量聲明和函數聲明則會存放在全局對象內（Global Object 簡稱GO，它是window的一部分，你能夠直接把他理解成window對象）中
函數體內：
預編譯會提早把函數裏的變量聲明和函數聲明依據規則存放在該活動對象內（Activation Object，簡稱AO），

預編譯簡單理解就是在內存中開闢一些空間，存放一些變量與函數 。

預編譯大體可分爲4步：

1. 建立AO(GO)對象
2. 找形參和變量聲明，將形參和變量名做爲AO(GO)屬性名，值爲undefined
3. 將實參值和形參統一
4. 在函數體裏面找函數聲明，值賦予函數體。

因此若是遇到下面這種狀況，當函數聲明和變量聲明名稱相同時：

console.log(a); 
var a= 1;
function a(){};

編譯後的代碼實際上是：

var a;
function a(){};
console.log(a);
a= 1;

因此最後輸出的是：

function a() {}

預編譯小節

預編譯兩個小規則

1. 函數聲明總體提高—(具體點說，不管函數調用和聲明的位置是前是後，系統總會把函數聲明移到調用前面）
2. 變量 聲明提高—(具體點說，不管變量調用和聲明的位置是前是後，系統總會把聲明移到調用前，注意僅僅只是聲明，因此值是undefined），只有在解釋執行階段纔會進行變量初始化，匿名函數不參與預編譯。

預編譯前奏

1. imply global 即任何變量，若是未經聲明就賦值，則此變量就位全局變量全部(全局域就是window) 。
2. 一切聲明的全局變量，全是window的屬性。

<script>
  var a=2; 
  console.log(window.a);//2
</script>

3.3 解釋執行

預編譯完畢以後，JavaScript 腳本開始執行，執行順序按照從上到下的順序執行。

總結

JavaScript執行順序

1. 語法分析
2. 預編譯
   2.1. 建立AO(GO)對象
   2.2. 找形參和變量聲明，將形參和變量名做爲AO(GO)屬性名，值爲undefined
   2.3. 將實參值和形參統一
   2.4. 在函數體裏面找函數聲明，值賦予函數體。
3. 解釋執行

練習：

function a(a){
    console.log(a);
    a= 2;
    console.log(b);
    var b= 3;
    console.log(a);
}
a(1);
console.log(a);

你能夠先試想一下結果，而後複製代碼到控制檯去驗證你的答案是否正確。