引言

You-Dont-Know-JS是github上一個擁有9000多枚星星的JS教學(xué)文檔，評價很高，為了避免和其他翻譯文一樣，容易陷入不宜讀的混亂，也試圖避免原文中過多數(shù)的術(shù)語導(dǎo)致我露怯，我只提取提取我理解的一些點，通俗的講出來。今天先從第一章作用域開始吧：

原文我的翻譯folk，希望有識之士能跟我共同完成

JS的編譯

js和傳統(tǒng)語言一樣，也需要編譯執(zhí)行，編譯的過程通常分三步：

• 標記+詞法分析 Tokenizing/Lexing:: 把程序語言切成一段一段的片段，稱之為tokens。比如，程序中的 var a = 2;,會被切成如下tokens：var, a, =, 2, ;。
• 解析 Parsing: 把token流轉(zhuǎn)換成樹，是嵌套元素形式，符合語法結(jié)構(gòu)和規(guī)則，這個樹被稱之為"AST" (Abstract Syntax Tree).
• var a = 2;的樹，開始于頂層節(jié)點 VariableDeclaration, 包含子節(jié)點 Identifier (值 a), 另外一個子節(jié)點 AssignmentExpression 包含另外子節(jié)點 NumericLiteral (值 2).
• 代碼生成 Code-Generation: 這個過程是把AST轉(zhuǎn)換成可執(zhí)行代碼， 這部分各程序語言和個平臺之間會有極大的不同。 所以，刨除細節(jié)，var a = 2;會被轉(zhuǎn)換成機器語言，在內(nèi)存中創(chuàng)建一個變量 a,而后把值儲存其中。

編譯器對賦值的操作

當編譯器遇到var a,它會詢問域是否存在變量a，如果存在編譯器忽略這個聲明，如果不存在編譯器要求域聲明一個新變量a給自己。

編譯器而后為引擎產(chǎn)生可執(zhí)行代碼，處理a = 2, 引擎首先詢問域是否有這個變量，如果沒有執(zhí)行其他操作。

兩種引用

LHS（Left-hand Side）引用和 RHS（Right-hand Side）引用，對于編譯器來說，LHS指變量用于賦值，RHS是指變量用于取值。

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

foo( 2 );

這里，foo(), 引用（變量）foo是RHS引用，因為它是用于取值的操作（將函數(shù)foo的值取出來），參數(shù)a被隱含賦值2，a = 2這里的引用a是LHS引用，因為它用于賦值。console.log(a)里面的a也是LHS引用，因為它用于獲取a的值。

這里說明的是， 代碼里的變量， 對于編譯器來說有兩種類型，用于獲取它值的是一種，本身是用于被賦值的是另外一種。

嵌套域 （Nested Scope）

嵌套域很好理解，如下代碼

function foo(a) {
    console.log( a + b );
}

var b = 2;

foo( 2 ); // 4

foo函數(shù)域中沒有變量b，當引用b被調(diào)用的時候，程序會逐級往上查找，直到找到變量b，最頂層為全局變量 （global scope），如下圖所示：

錯誤

但是各位有沒有想過一個問題，被賦值的引用（LHS）如果本域內(nèi)不存在會產(chǎn)生什么情況？當然，大多數(shù)人都經(jīng)歷過ReferenceError，引用錯誤。

當LHS引用（賦值引用）在域中找不到的時候，js引擎會直接拋出錯誤，而RHS引用（調(diào)用引用）如果在域中找不到的時候，js引擎會向上一級域中查找，如果依然沒有，會直接在全局域中為你自動創(chuàng)建一個（非嚴格模式下， 嚴格模式下也會報ReferenceError錯誤）。

考慮從如下代碼：

function foo(a) {
    console.log( a + b );
}

foo( 2 );

這里的變量b因為在函數(shù)域中未定義，所以會報錯

function foo(a) {
    b = a;
}

foo( 2 );

這里的變量b也未定義，但是由于是復(fù)制操作，系統(tǒng)會為你在外層全局域里自動創(chuàng)建一個。

以上就是You-Dont-Know-JS作用域?qū)W習(xí)文檔的詳細內(nèi)容，更多關(guān)于JS 作用域的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論