2、JavaScript高級之詞法分析

原創

桂学成

2020-02-20 19:36

JavaScript代碼自上而下執行，但是在js代碼執行前，會首先進行詞法分析，所以事實上，js運行要分爲詞法分析和執行兩個階段。

詞法分析

    詞法分析主要分爲3步：
         第1步：分析形參
         第2步：分析變量聲明
         第3步：分析函數聲明

如果存在函數嵌套，則從外往內進行詞法分析

    具體步驟：
       0：在函數執行的一瞬間，生產 Active Object（活動對象），下面簡稱AO
       1:
           1.1 函數聲明的形參，形成AO的屬性，默認值是undefined,
           1.2 接收形參，給剛剛形成AO的屬性的形參賦值
       2：分析var聲明變量！如 var age;（變量的值是在運行時期決定）
       2.1 如果AO上還沒有age屬性，則給AO添加age屬性，默認值是undefined
           2.2 如果AO上已經有age屬性，則不做任何操作。
       3：分析函數聲明！如 function foot(){}
          3.1 如果AO上沒有foot屬性，則把函數賦給AO.foot屬性
          3.2 如果AO上有foot屬性，則會直接覆蓋，把函數賦給AO.foot屬性

代碼演示與分析：

  function a(b){
       alert(b);
       function b(){
           alert(b);
       }
       b();
   }
   a(1);

這是個常見的JavaScript面試題，如果不懂JavaScript的詞法分析，根本看不懂，下面就按照JavaScript的詞法步驟進行分析，前面說過JavaScript自上而下執行，但是先進行詞法分析後執行代碼

     分析過程：
     0、形成活動對象AO={}
     1、分析形參，--> AO={b:undefined}; 分析傳參，--> AO={b:1}
     2、分析變量聲明var，沒有
     3、分析函數聲明，AO.b=function(){alert(b);},執行覆蓋操作

     執行過程：
      alert(b);//function
      b();    // 執行function b...alert(b),在函數b的作用域內部找不到b,根據作用域鏈原理（見上一篇http://blog.csdn.net/guixuecheng/article/details/43670323）往外層尋找，找到b就是函數自己，打印出function ...