JavaScript作用域深度剖析：從局部到全局一網(wǎng)打盡

1.1 編譯原理

• JavaScript 事實(shí)上是一門編譯語(yǔ)言。

在傳統(tǒng)編譯語(yǔ)言中，一段源代碼執(zhí)行前會(huì)經(jīng)歷三個(gè)步驟:

分詞/詞法分析(Tokenizing/Lexing)

var a = 2;
// 分解后：
var、a、=、2、;
// 空格是否會(huì)被當(dāng)做詞法單元，取決于空格在這門語(yǔ)言中是否具有意義。

• 期間經(jīng)過兩個(gè)過程：分詞(tokenizing)和詞法分析(Lexing) 、兩者的主要差別在于詞法單元的識(shí)別是通過有狀態(tài)還是無狀態(tài)的方式進(jìn)行的。

解析/語(yǔ)法分析(Parsing)

• 這個(gè)過程就是將詞法單元流(數(shù)組)轉(zhuǎn)換為一個(gè)由元素逐級(jí)嵌套組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹，這個(gè)樹被稱為"抽象語(yǔ)法樹"。(Abstract Syntax Tree, AST)。

代碼生成

• 將 AST 轉(zhuǎn)換為可執(zhí)行代碼的過程被稱為代碼生成。也就是說有某種方法將 var a = 2; 的 AST 轉(zhuǎn)換為一組機(jī)器指令，用來創(chuàng)建一個(gè)叫做 a 的變量(包含分配內(nèi)存等)，將一個(gè)值儲(chǔ)存于 a 中。
• 比起其他編譯過程只有這三個(gè)步驟的語(yǔ)言的編譯器，JavaScript 引擎要復(fù)雜得多，在語(yǔ)法分析和代碼生成階段有著特定的步驟來對(duì)比運(yùn)行性能進(jìn)行優(yōu)化，包括對(duì)冗余元素進(jìn)行優(yōu)化等。
• 簡(jiǎn)單來說，任何 JavaScript 代碼片段在執(zhí)行前都要進(jìn)行編譯(通常就在執(zhí)行前)

1.2 理解作用域

1.2.1 演員表

• 引擎：從頭到尾負(fù)責(zé)整個(gè) JavaScript 程序的編譯及執(zhí)行過程。
• 編譯器：引擎的好朋友之一，負(fù)責(zé)語(yǔ)法分析及代碼生成等臟活累活。
• 作用域：引擎的另一個(gè)好朋友，負(fù)責(zé)收集并維護(hù)由所有聲明的標(biāo)識(shí)符(變量)組成的一系列查詢，并實(shí)行一套嚴(yán)格的規(guī)則，確定當(dāng)前執(zhí)行的代碼對(duì)這些標(biāo)識(shí)符的訪問權(quán)限。

1.2.2 對(duì)話

• var a = 2; 這段代碼是一句聲明。但會(huì)經(jīng)過編譯器和引擎的處理來進(jìn)行。
• S: 變量的賦值操作會(huì)執(zhí)行兩個(gè)動(dòng)作，首先編譯器會(huì)在當(dāng)前作用域中聲明一個(gè)變量(如果之前沒有聲明過)，然后在運(yùn)行時(shí)引擎會(huì)在作用域中查找該便令，如果能夠找到就會(huì)對(duì)它進(jìn)行賦值。

1.2.3 編譯器有話說

編譯器在編譯過程中的第二步中生成了代碼，引擎執(zhí)行它時(shí)，會(huì)通過查找變量 a 來判斷他是否已聲明過。查找的過程由作用域進(jìn)行協(xié)助，但是引擎執(zhí)行怎樣的查找會(huì)影響最終的查找結(jié)果。

引擎常使用的查詢類型為：LHS和RHS

LHS: 賦值操作的目標(biāo)是誰(shuí)

RHS: 誰(shuí)是賦值操作的源頭

1.2.5

function foo(a) {
    var b = a;
    return a + b;
}
var c = foo(2);
// 對(duì)話：
1. 聲明 var c
2. 對(duì) c 進(jìn)行 LHS
3. 對(duì) foo(2) 進(jìn)行 RHS
4. function foo(a) 期間會(huì)進(jìn)行 a = 2, 對(duì) a 進(jìn)行 LHS
5. 聲明 var b
6. 對(duì) b 進(jìn)行 LHS
7. 對(duì) a 進(jìn)行 RHS
8. return a + b; 分別對(duì) a、b 進(jìn)行 RHS
// 答案：
1. 所有的 LHS(一共有3處)
    1. c =..;
    2. a = 2(隱士變量分配)
    3. b = ..
2. 所有的 RHS (一共有4處)
    1. foo(2..
    2. = a;
    3. a..
    4. .. b

1.3 作用域嵌套

作用域是根據(jù)名稱查找變量的一套規(guī)則。

當(dāng)一個(gè)塊或函數(shù)嵌套在另一個(gè)塊或函數(shù)中時(shí)，就會(huì)發(fā)生作用域的嵌套。因此在當(dāng)前作用域中無法找到某個(gè)變量時(shí)，引擎就會(huì)在外層作用域中繼續(xù)查找，直到找到該變量，或抵達(dá)最外層的作用域(也就是全局作用域)為止。

// 非嚴(yán)格模式下
function foo(a) {
console.log(a + b);
}
var a = 2;
foo(2); // 4
// 嚴(yán)格模式下：
function foo(a) {
console.log(a + b);
}
var a = 2;
foo(2); // 4

遍歷嵌套作用域鏈的規(guī)則：引擎會(huì)從當(dāng)前的執(zhí)行作用域中開始查找變量，如果找不到就會(huì)向上一級(jí)中繼續(xù)查找。當(dāng)?shù)诌_(dá)最外層的全局作用域時(shí)，無論找到還是沒找到，查找的過程都會(huì)停止。

例子：

• 整個(gè)建筑代表程序中的嵌套作用域鏈，第一層樓代表當(dāng)前的執(zhí)行作用域，也就是你所處的位置。建筑的頂層代表全局作用域。
• 引擎查找的方式：LHS 和 RHS 引用會(huì)先在當(dāng)前樓層中進(jìn)行查找，如果沒找到，就會(huì)坐電梯前往上一層樓樓，如果還是沒找到就會(huì)繼續(xù)上下，以此類推。一旦達(dá)到了頂層(全局作用域), 可能找到你了你所需的變量，也可能沒找到，但無論如何查找過程都會(huì)停止。

1.4 異常

為什么區(qū)分 LHS 與 RHS 是一種重要的事？

因?yàn)樵谧兞窟€未聲明(在任何作用域中都無法找到該變量)的情況下，引擎的這兩種查詢行為是不一樣的。

// 非嚴(yán)格模式下:
function foo(a) {
console.log(a + b);
b = a;
}
foo(2); // 4
// 嚴(yán)格模式下：
'use strict';
function foo(a) {
console.log(a + b);
b = a;
}
foo(2); // ReferenceError: b is not defined

上述代碼引擎行為：

• 非嚴(yán)格模式下：

第一次對(duì) b(.. + b) 進(jìn)行 RHS 查詢時(shí)未找到該變量，也就是說，這是一個(gè)"未聲明" 的變量，因?yàn)樵谌魏蜗嚓P(guān)的作用域都無法找到它。

第二次對(duì) b(b = ..) 進(jìn)行 LHS 查詢時(shí)，如果在頂層(全局作用域)中也沒找到該變量，就會(huì)在全局作用域中隱式地創(chuàng)建一個(gè)該名稱的變量，并將其返回給引擎。

......

• 嚴(yán)格模式下：

第一次對(duì) b(.. + b) 進(jìn)行 RHS 查詢時(shí)未找到該變量，也就是說，這是一個(gè)"未聲明" 的變量，因?yàn)樵谌魏蜗嚓P(guān)的作用域都無法找到它，直接拋出 'ReferenceError'。

......

• 非嚴(yán)格模式下引擎查找規(guī)則：

  當(dāng)引擎執(zhí)行 RHS 查詢?cè)谒星短椎淖饔糜蛑姓也坏剿璧淖兞浚婢蜁?huì)拋出 ReferenceError 異常。

  當(dāng)引擎執(zhí)行 LHS 查詢時(shí)，如果在頂層作用域中也無法找到該變量，全局作用域就會(huì)創(chuàng)建一個(gè)該名稱的變量，并將其返回給引擎(非嚴(yán)格模式下)。

• 嚴(yán)格模式下引擎查找規(guī)則：

  ES5 引入了 "嚴(yán)格模式"(use strict)，在行為上有很多不同，其中一個(gè)不同的行為就是嚴(yán)格模式下禁止自動(dòng)或隱式地創(chuàng)建全局變量。因此在嚴(yán)格模式中引擎執(zhí)行 LHS 查詢失敗時(shí)，并不會(huì)創(chuàng)建一個(gè)全局變量，而是直接拋出一個(gè) ReferenceError。

  如果 RHS 找到了一個(gè)變量，但嘗試對(duì)這個(gè)變量進(jìn)行一些不合理的操作時(shí)，比如對(duì)一個(gè)非函數(shù)類型的值進(jìn)行函數(shù)調(diào)用，或者引用 null 或 undefined 類型的之中屬性，那引擎則會(huì)拋出另外一種類型的異常 TypeError。

• ReferenceError 同作用域判斷失敗相關(guān)，而 TypeError 代表作用域判別成功了，但對(duì)結(jié)果的操作是非法或不合理的。

1.5 小結(jié)

作用域是根據(jù)名稱查找變量的一套規(guī)則。

引擎常使用的查詢類型為：LHS 和 RHS

• LHS: 賦值操作的目標(biāo)是誰(shuí)
• = 操作符在調(diào)用函數(shù)時(shí)的形參會(huì)導(dǎo)致關(guān)聯(lián)作用的賦值操作。也就是說 foo (a, b, c...), 都會(huì)有 a = xxx, b = xxx, c = xxx ...... 的行為。
• RHS: 誰(shuí)是賦值操作的源頭

非嚴(yán)格模式下引擎查找規(guī)則：

當(dāng)引擎執(zhí)行 RHS 查詢?cè)谒星短椎淖饔糜蛑姓也坏剿璧淖兞?，引擎就?huì)拋出 ReferenceError 異常。

當(dāng)引擎執(zhí)行 LHS 查詢時(shí)，如果在頂層作用域中也無法找到該變量，全局作用域就會(huì)創(chuàng)建一個(gè)該名稱的變量，并將其返回給引擎(非嚴(yán)格模式下)。

嚴(yán)格模式下引擎查找規(guī)則：

ES5 引入了 "嚴(yán)格模式"(use strict)，在行為上有很多不同，其中一個(gè)不同的行為就是嚴(yán)格模式下禁止自動(dòng)或隱式地創(chuàng)建全局變量。因此在嚴(yán)格模式中引擎執(zhí)行 LHS 查詢失敗時(shí)，并不會(huì)創(chuàng)建一個(gè)全局變量，而是直接拋出一個(gè) ReferenceError。

如果 RHS 找到了一個(gè)變量，但嘗試對(duì)這個(gè)變量進(jìn)行一些不合理的操作時(shí)，比如對(duì)一個(gè)非函數(shù)類型的值進(jìn)行函數(shù)調(diào)用，或者引用 null 或 undefined 類型的之中屬性，那引擎則會(huì)拋出另外一種類型的異常 TypeError。

• ReferenceError 同作用域判斷失敗相關(guān)，而 TypeError 代表作用域判別成功了，但對(duì)結(jié)果的操作是非法或不合理的。

特殊字符描述：

• 問題標(biāo)注 Q:(question)
• 答案標(biāo)注 R:(result)
• 注意事項(xiàng)標(biāo)準(zhǔn)：A:(attention matters)
• 詳情描述標(biāo)注：D:(detail info)
• 總結(jié)標(biāo)注：S:(summary)
• 分析標(biāo)注：Ana:(analysis)
• 提示標(biāo)注：T:(tips)

以上就是深度剖析JavaScript作用域從局部到全局一網(wǎng)打盡的詳細(xì)內(nèi)容，更多關(guān)于JavaScript作用域局部全局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論