淺談JavaScript詞法分析步驟

標籤：對象   java   nbsp   練手   efi   IV   tle   編譯   bin   

文章原地址:https://www.cnblogs.com/zingp/p/6102561.html    

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

淺談JavaScript詞法分析步驟