JavaScript 詞法做用域不徹底指北

在 JavaScript 做用域不徹底指北 中，咱們介紹了做用域的概念以及 JavaScript 引擎、編譯器和做用域的關係。做用域有兩種主要的工做模型：詞法做用域和動態做用域。其中最爲廣泛的也是大多數編程語言所採用的是詞法做用域，咱們主要對其進行研究學習。
在傳統編譯語言的流程中， 程序中的一段源代碼在執行以前會經歷三個步驟， 統稱爲「編譯」。

• 分詞/詞法分析（Tokenizing/Lexing）

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

• 解析/語法分析（Parsing）

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

• 代碼生成

將「抽象語法樹」 轉換爲可執行代碼的過程稱被稱爲代碼生成。 這個過程與語言、 目標平臺等息息相關。
第一個步驟也叫做詞法化，詞法做用域就是定義在詞法階段的做用域。簡單地說，詞法做用域是由你寫代碼時將變量和塊做用域寫在哪裏來決定的，詞法分析器處理代碼時會保持做用域不變。
咱們經過如下代碼來分析一下詞法做用域：

function foo(a){
  var b = a * 2;
  function bar(c){
    console.log(a,b,c);
  }
  bar(b * 3);
}
foo(2); //2 4 12

在實例代碼中，會有三個逐級嵌套的做用域。

1.包含着全局做用域，其中有一個標識符 foo

2.包含着 foo 所建立的做用域，其中有三個標識符：a，bar，b

3.包含着 bar 所建立的做用域，其中有一個標識符：c

引擎使用做用域的結構和相互之間的位置關係來查找標識符。咱們在上篇文章中講過，引擎在做用域中進行變量查找的過程，是從當前做用域逐級向外，直到遇到第一個匹配的標識符結束。
在實例代碼中，引擎執行 console.log(a,b,c); 聲明，並查找變量 a , b , c 的引用。首先從最內部的做用域，也就是 bar 函數的做用域開始查找，引擎沒法在這裏查找到變量 a ,便會到上一級所嵌套的 foo 函數做用域中進行查找。引擎在這裏找到了變量 a 的引用，便會中止對變量 a 引用的查詢。對 b 來講也是同樣的。對 c 來講，引擎在 bar 函數做用域中就會找到它。
引擎會在做用域中找到第一個匹配的標識符時中止查找。也就是說，在多層的嵌套做用域中能夠定義同名的標識符，內部的標識符會遮蔽外部的標識符，這叫做「遮蔽效應」。
詞法做用域意味着做用域是由書寫代碼時函數的位置來決定的。編譯的詞法分析階段基本可以知道所有標識符在哪裏以及是如何聲明的，從而預測在引擎執行代碼過程當中如何對它們進行查找。

參考

• 《你不知道的JavaScript》
• 《深刻理解JavaScript特性》

做者：CoderFocus

微信公衆號：

聲明：本文爲博主學習感悟總結，水平有限，若是不當，歡迎指正。若是您認爲還不錯，不妨點擊一下下方的【推薦】按鈕，謝謝支持。轉載與引用請註明做者及出處。