前端開發 - JavaScript 詞法分析

標籤：obj   alt   function   改變   體會   var   分析函數   代碼   分析   

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

1.分析函數的參數

2.分析函數的變數聲明

3.分析函數的函式宣告運算式

具體步驟如下：

• 函數在啟動並執行瞬間，產生一個使用中的物件（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) {    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，運行結果如下

 

詞法分析時應該注意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);

運行結果：　

　

小結：
函數在啟動並執行瞬間，需經曆兩個步驟：詞法分析和語句執行

詞法分析：
1.形參和實參，實參會覆蓋實參
2.分析變數聲明，如var age = 18；會提取出age=undefined，但不會執行指派陳述式
3.分析函式宣告，如function age(){}等同於var age = function（）{}，但函數體不執行

語句執行：
1.console.log(age);
2.var age = 25;
3.function age(){console.log(age);}是不執行的，age()才執行

注意事項：
1.函式宣告 function age(){console.log(age);} 整體會賦給 AO.age
2.var age = function age(){console.log(age);} 屬於詞法分析第二步變數聲明

前端開發 - JavaScript 詞法分析