??幾乎所有的編程語言都能夠儲存變數，并且能在之后對這個變數值進行訪問或修改，正是儲存和訪問變數的能力將狀態帶給了程式，那么，這些變數儲存在哪里呢？程式需要時又是如何找到他們？這些問題說明需要一套設計良好的規則來儲存變數，并且之后可以方便的找到這些變數，這套規則被稱為作用域，
1、了解編譯原理
??盡管將JS歸類為“動態”或“解釋執行”腳本語言，但事實上它是一門編譯語言，但是與傳統編譯語言不同的是，它不是提前編譯的，編譯結果也不能在分布式系統中進行移植，JS引擎進行編譯的步驟與傳統的語言非常相似，程式中一段源代碼在執行之前會經歷三個步驟，統稱為“編譯”，
- 分詞/詞法分析
這個程序會將由字符組成的字串分解成有意義的代碼塊，這些代碼塊被稱為詞法單元，例如，考慮程式
var a = 2;，這段程式通常會被分解成 為下面這些詞法單元：var、a、=、2 、;，
- 決議/語法分析
這個程序是將詞法單元流（陣列）轉換成一個由元素逐級嵌套所組成的代表了程式語法結構的樹，這個樹被稱為“抽象語法樹”（Abstract Syntax Tree，AST），
var a = 2;的抽象語法樹中可能會有一個叫作VariableDeclaration的頂級節點，接下來是一個叫作 Identifier（它的值是 a）的子節點，以及一個叫作 AssignmentExpression 的子節點，AssignmentExpression 節點有一個叫作 NumericLiteral（它的值是 2）的子節點，
- 代碼生成
AST轉換為可執行代碼的程序稱被稱為代碼生成,簡單來說就是有某種方法可以將
var a = 2;的AST轉化為一組機器指 令，用來創建一個叫作a的變數（包括分配記憶體等），并將一個值儲存在a中，
編譯流程如下圖所示：
JS引擎比傳統的編譯語言編譯器復雜很多，在語法分析和代碼生成階段有特定的步驟來對性能進行優化，大部分情況下編譯發生在代碼之前的前幾微秒，在討論作用域背后，js引擎用了各種辦法來保證性能最佳，
Tips:我們平時在寫JS代碼的時候，一個陳述句結尾要加分號（;）,便于JS編譯器編譯，
2、理解作用域
??我們先了解JS編譯程序中幾個名詞，JS引擎，編譯器，作用域，
2.1.名詞介紹
- JS引擎：從頭到尾負責整個JS程式編譯程序，
- 編譯器：負責語法分析及代碼生成等，
- JS引擎：負責收集并維護由所有宣告的識別符號（變數）組成的一系列查 詢，并實施一套非常嚴格的規則，確定當前執行的代碼對這些識別符號的訪問權限，
2.2.變數賦值
對于var a=2;這段代碼，我們認為這就是申明一個為變數a且初始值為2，實際上，JS引擎認為這里有兩個完全不同的申明，一個由編譯器在編譯時處理，另一個則由引擎在運行時處理，
處理程序分為兩步：
1.遇到var a，編譯器會詢問作用域是否已經有一個該名稱的變數存在于同一個作用域的集合中，如果是，編譯器會忽略該宣告，繼續進行編譯；否則它會要求作用域在當前作用域的集合中宣告一個新的變數，并命名為a，
2.接下來編譯器會為引擎生成運行時所需的代碼，這些代碼被用來處理a = 2這個賦值操作，引擎運行時會首先詢問作用域，在當前的作用域集合中是否存在一個叫作a的變數，如果是，引擎就會使用這個變數；如果否，引擎會繼續查找該變數，
如果引擎最終找到a變數，就會將2賦值給它，否則就拋出例外，
Tips：宣告提前(hoist)-JS引擎在創建變數時，會將該變數提升到當前作用域的最前面，
總結：變數的賦值操作會執行兩個動作，首先編譯器會在當前作用域中宣告一個變數（如果之前沒有宣告過），然后在運行時引擎會在作用域中查找該變數，如果能夠找到就會對它賦值，
2.3.LHS查詢&RHS查詢
編譯器在編譯程序中的第二步生成了代碼，引擎在執行時，會通過查找變數a來判斷它是否已經宣告過，當變數出現在賦值操作的左側時進行LHS查詢，當變數出現在右側時進行RHS查詢，
console.log(a); //對a的參考時RHS參考，這里沒有對a賦予任何值，需要查找a的值，
a=2; //對a的參考是LHS參考，因為這里不關心a的值等于多少，只想為 =2 這個賦值操作找到一個目標(變數a);
LHS和RHS的含義是“賦值操作的左側或右側”并不一定意味著就是“= 賦值運算子的左側或右側”，賦值操作還有其他幾種形式，因此在概念上最好將其理解為“賦值操作的目標是誰（LHS）”以及“去找到XX變數的值，誰是賦值操作的源頭（RHS）”，
3、作用域嵌套
??作用域是根據名稱查找變數的一套規則，實際情況中，通常需要同時顧及幾個作用域， 當一個塊或函式嵌套在另一個塊或函式中時，就發生了作用域的嵌套，因此，在當前作用 域中無法找到某個變數時，引擎就會在外層嵌套的作用域中繼續查找，直到找到該變數， 或抵達最外層的作用域（也就是全域作用域）為止，
參考以下代碼：
var name='peer';
function sayHello(){
alert('hello '+ name)
}
sayHello();
// 對name的RHS參考無法在函式sayHello完成，但是可以在上一級作用域中完成，
把作用域比喻成一個建筑如下圖所示：
LHS和RHS參考都會在當前樓層進行查找，如果沒有找到，就會坐電梯前往上一層樓，如果還是沒有找到就繼續向上，以此類推，一旦抵達頂層（全域作用域），可能找到了你所需的變數，也可能沒找到，但無論如何查找程序都將停止，
4、總結
??作用域是一套規則，用于確定在何處以及如何查找變數（識別符號），LHS和RHS查詢都會在當前執行作用域中開始，如果有需要就會向上級作用域繼續查找目標識別符號，這樣每次上升一級作用域，最后抵達全域作用域，無論找到或沒找到都將停止，不成功的RHS 參考會導致拋出ReferenceError例外，不成功的LHS參考會導致自動隱式地創建一個全域變數（非嚴格模式下），掌握這些基本作用域知識能使我們更深入理解JS引擎的編譯程序來撰寫更高性能的代碼，
參考資料:
《你不知道的JavaScript》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170391.html
標籤：JavaScript