目錄

• JavaScript作用域深度剖析：從局部到全局一網(wǎng)打盡
• 1.1 編譯原理
• 1.2 理解作用域
• 1.2.1 演員表
• 1.2.2 對(duì)話
• 1.2.3 編譯器有話說(shuō)
• 1.2.5
• 1.3 作用域嵌套
• 1.4 異常
• 1.5 小結(jié)
• 特殊字符描述：

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

1.1 編譯原理

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

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

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

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

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

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

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

代碼生成

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

1.2 理解作用域

1.2.1 演員表

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

1.2.2 對(duì)話

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

1.2.3 編譯器有話說(shuō)

編譯器在編譯過(guò)程中的第二步中生成了代碼，引擎執(zhí)行它時(shí)，會(huì)通過(guò)查找變量 a 來(lái)判斷他是否已聲明過(guò)。查找的過(guò)程由作用域進(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 c2. 對(duì) c 進(jìn)行 LHS3. 對(duì) foo(2) 進(jìn)行 RHS4. function foo(a) 期間會(huì)進(jìn)行 a = 2, 對(duì) a 進(jìn)行 LHS5. 聲明 var b6. 對(duì) b 進(jìn)行 LHS7. 對(duì) a 進(jìn)行 RHS8. 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)前作用域中無(wú)法找到某個(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í)行作用域中開(kāi)始查找變量，如果找不到就會(huì)向上一級(jí)中繼續(xù)查找。當(dāng)?shù)诌_(dá)最外層的全局作用域時(shí)，無(wú)論找到還是沒(méi)找到，查找的過(guò)程都會(huì)停止。

例子：

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

1.4 異常

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

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

// 非嚴(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í)未找到該變量，也就是說(shuō)，這是一個(gè)"未聲明" 的變量，因?yàn)樵谌魏蜗嚓P(guān)的作用域都無(wú)法找到它。

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

......

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

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

......

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

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

  當(dāng)引擎執(zhí)行 LHS 查詢時(shí)，如果在頂層作用域中也無(wú)法找到該變量，全局作用域就會(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)作用的賦值操作。也就是說(shuō) 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í)，如果在頂層作用域中也無(wú)法找到該變量，全局作用域就會(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é)果的操作是非法或不合理的。

特殊字符描述：

• 問(wèn)題標(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)文章！