JavaScript詞法分析(盡力理解)

JavaScript中在調用函數的那一瞬間以前，會先進行詞法分析

 

詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找

看兩個例子：

第一個：

1 var age = 18;
2 function foo(){
3   console.log(age);
4   var age = 22;
5   console.log(age);
6 }
7 
8 foo();  // 問：執行foo()以後的結果是？

 

第二個：

 1 var age = 18;
 2 function foo(){
 3   console.log(age);
 4   var age = 22;
 5   console.log(age);
 6   function age(){
 7     console.log("呵呵");
 8   }
 9   console.log(age);
10 }
11 
12 foo();  // 執行後的結果是？

 

最後答案解析：

第一題:

undefined 22

1 過程：
2 　　執行前有一個局部變量，造成AO.age = undefined
3 　　開始執行，第一個輸出age，此時age爲undefined，輸出undefined
4 　　賦值22給age
5 　　第二個輸出age，此時age已經有了值就輸出22

 

第二題:

先輸出函數 而後是兩個22

 1 詞法分析過程：
 2 一、分析參數，有一個參數，造成一個 AO.age=undefine;
 3 二、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
 4 三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};
 5 
 6 最終，AO上的屬性只有一個age，而且值爲一個函數聲明
 7 
 8 執行過程：
 9 注意：執行過程當中全部的值都是從AO對象上去尋找
10 
11 1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
12 二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2
13 3、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了
14