js詞法分析

JavaScript代碼運行前有一個相似編譯的過程即詞法分析，詞法分析主要有三個步驟：

• 分析參數
• 再分析變量的聲明
• 分析函數聲明

具體步驟以下：

• 函數在運行的瞬間，生成一個活動對象（Active Object），簡稱AO
• 第一步：分析參數：

1. 函數接收形式參數，添加到AO的屬性，而且這個時候值爲undefine,即AO.age=undefine
2. 接收實參，添加到AO的屬性，覆蓋以前的undefine

• 第二步：分析變量聲明：如var age;或var age=18;

1. 若是上一步分析參數中AO尚未age屬性，則添加AO屬性爲undefine，即AO.age=undefine
2. 若是AO上面已經有age屬性了，則不做任何修改

• 第三步：分析函數的聲明：
• 若是有function age(){}把函數賦給AO.age ,覆蓋上一步分析的值

看一段代碼練練手：

 1 function func(age) {
 2     console.log(age);
 3     var age = 25;
 4     console.log(age);
 5     function age() {
 6     }
 7     console.log(age);
 8 
 9 }
10 func(18);

詞法分析：

第一步，分析函數參數：
　　形式參數：AO.age = undefined
　　實參：AO.age = 18
第二步，分析局部變量：
　　第3行代碼有var age,但此時第一步中已有AO.age = 18,故不作任何改變
　　即AO.age = 18
第三步，分析函數聲明：
　　第5行代碼有函數age，則將function age(){}付給AO.age,即AO.age = function age() {}

因此，執行代碼時：

　　第2行代碼運行時拿到的age是詞法分析後的AO.age,結果是：function age() {}；

　　第3行代碼：25賦給age，此時age=25；

　　第4行代碼運行時age已被賦值爲25，結果25；

　　第5,6行代碼是一個函數表達式，因此不會作任何操做；

　　第7行代碼運行時age仍然是25，結果也是25。看看瀏覽器執行的結果，bingo~~

詞法分析時應該注意var age = function age（）{}，這個語句，參與了第二步和第三步；

執行代碼時應注意函數表達式不作任何操做，且只聲明變量沒賦值時，age仍然等於AO.age。

例2：

 1 function func(age) {
 2     var age;
 3     console.log(age);
 4     var age = 25;
 5     console.log(age);
 6     function age() {
 7     }
 8     console.log(age);
 9 
10 }
11 func(18);

答案：

例3：

 1 function func(age) {
 2     var age;
 3     console.log(age);
 4     var age = 25;
 5     console.log(age);
 6     function age() {
 7         console.log(age);
 8     }
 9     age();
10     console.log(age);
11 
12 }
13 func(18);

答案：

例4：

 1 function func(age) {
 2     var age;
 3     console.log(age);
 4     function age() {
 5         console.log(age);
 6     }
 7     age();
 8     console.log(age);
 9 
10 }
11 func(18);

答案：

例5：

1 function func(age) {
2     console.log(age);
3     var age = function age() {
4         console.log(age);
5     };
6     age();
7     console.log(age);
8 }
9 func(18);

答案：

做者：ZingpLiu 
出處：http://www.cnblogs.com/zingp/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。