淺談JavaScript詞法分析步驟

 

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 ,覆蓋上一步分析的值

看一段代碼練練手：

function func(age) {
    console.log(age);
    var age = 25;
    console.log(age);
    function age() {
    }
    console.log(age);

}
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：

function func(age) {
    var age;
    console.log(age);
    var age = 25;
    console.log(age);
    function age() {
    }
    console.log(age);

}
func(18);

答案：

例3：

function func(age) {
    var age;
    console.log(age);
    var age = 25;
    console.log(age);
    function age() {
        console.log(age);
    }
    age();
    console.log(age);

}
func(18);

答案：

例4：

function func(age) {
    var age;
    console.log(age);
    function age() {
        console.log(age);
    }
    age();
    console.log(age);

}
func(18);

答案：

例5：

function func(age) {
    console.log(age);
    var age = function age() {
        console.log(age);
    };
    age();
    console.log(age);
}
func(18);

答案：