你不知道的JavaScript之做用域

什麼是做用域

編譯原理

• 分詞/詞法分析

  這個過程會將由字符組成的字符串分解成（對編程語言來講）有意義的代碼塊，這些代 碼塊被稱爲詞法單元（token）

• 解析/語法分析

  這個過程是將詞法單元流（數組）轉換成一個由元素逐級嵌套所組成的表明了程序語法 結構的樹。這個樹被稱爲「抽象語法樹」（Abstract Syntax Tree，AST）。

  什麼是抽象樹呢？在這個網站上能夠在線的看到js源代碼，也就是抽象樹 在線生成抽象樹

  

• 代碼生成

  將 AST 轉換爲可執行代碼的過程被稱爲代碼生成。

  對於 JavaScript 來講，大部分狀況下編譯發生在代碼執行前的幾微秒（甚至更短！）的時間內。
    任何 JavaScript 代碼片斷在執行前都要進行編譯（一般就在執行前）。
    所以，JavaScript 編譯器首先會對 var a = 2; 這段程序進行編譯，而後作好執行它的準備，而且一般立刻就會執行它。
  複製代碼

理解做用域

• 引擎

  從頭至尾負責整個 JavaScript 程序的編譯及執行過程。

• 編譯器

  引擎的好朋友之一，負責語法分析及代碼生成等髒活累活

• 做用域

  引擎的另外一位好朋友，負責收集並維護由全部聲明的標識符（變量）組成的一系列查 詢，並實施一套很是嚴格的規則，肯定當前執行的代碼對這些標識符的訪問權限。

  編譯器負責代碼生成，在生成的過程當中會詢問做用域，例如變量是否聲明瞭。引擎整個編譯執行過程當中也會詢問做用域
  其中有LHS查詢和RHS查詢
  複製代碼

對話（增強理解版）

function foo(a) { 
    console.log( a ); // 2 
} 
foo( 2 );

引擎：我說做用域，我須要爲 foo 進行 RHS 引用。你見過它嗎？
做用域：別說，我還真見過，編譯器那小子剛剛聲明瞭它。它是一個函數，給你。
引擎：哥們太夠意思了！好吧，我來執行一下 foo。
引擎：做用域，還有個事兒。我須要爲 a 進行 LHS 引用，這個你見過嗎？
做用域：這個也見過，編譯器最近把它聲名爲 foo 的一個形式參數了，拿去吧。
引擎：大恩不言謝，你老是這麼棒。如今我要把 2 賦值給 a。
引擎：哥們，很差意思又來打擾你。我要爲 console 進行 RHS 引用，你見過它嗎？
做用域：咱倆誰跟誰啊，再說我就是幹這個。這個我也有，console 是個內置對象。
給你。
引擎：麼麼噠。我得看看這裏面是否是有 log(..)。太好了，找到了，是一個函數。
引擎：哥們，能幫我再找一下對 a 的 RHS 引用嗎？雖然我記得它，但想再確認一次。
做用域：放心吧，這個變量沒有變更過，拿走，不謝。
引擎：真棒。我來把 a 的值，也就是 2，傳遞進 log(..)。
複製代碼

聽個人，多看幾遍就能理解做用域跟LHS查詢 RHS查詢

做用域鏈

這是前端面試中常常會被問到的問題，此次我會想換一種方式回答這個問題。

做用域就比如是一棟大樓其中的一層，若是引擎詢問做用域查找某一個變量，他會先詢問（LHS和RHS）當前做用域，
    若是當前做用域沒有就會往上詢問父級做用域，以此類推，直到最頂層（全局做用域），不管有沒有找到都會中止查找
複製代碼