本篇文章帶大家深入理解JavaScript作用域。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

這篇文章稱為筆記更為合適一些，內(nèi)容來(lái)源于 《你不知道的JavaScript（上卷）》第一部分 作用域和閉包。講的很不錯(cuò)，非常值得一看。

什么是作用域

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

理解作用域

先來(lái)理解一些基礎(chǔ)概念：

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

接下來(lái)來(lái)看看下面代碼的執(zhí)行過(guò)程：

var a = 2;

• 遇見(jiàn) var a，編譯器 會(huì)問(wèn) 作用域 變量a是否存在于同一個(gè)作用域集合中。如果存在，編譯器會(huì)忽略聲明，繼續(xù)編譯；否則，會(huì)要求作用域在當(dāng)前作用域集合中聲明一個(gè)新的變量，并命名為 a

• 接下來(lái) 編譯器 會(huì)為 引擎 生成運(yùn)行時(shí)所需的代碼，用來(lái)處理 a = 2 這個(gè)賦值操作。引擎運(yùn)行時(shí)會(huì)先問(wèn)作用域，當(dāng)前作用域集中是否存在變量a。如果是，引擎就會(huì)使用該變量；如果不存在，引擎會(huì)繼續(xù)查找該變量

• 如果 引擎 找到了a 變量，就會(huì)將 2 賦值給它，否則引擎就拋出一個(gè)錯(cuò)誤。

總結(jié)：變量的賦值操作會(huì)執(zhí)行兩個(gè)動(dòng)作，首先編譯器會(huì)在當(dāng)前作用域中聲明一個(gè)變量，然后在運(yùn)行時(shí)引擎就會(huì)會(huì)作用域中查找該變量，如果能夠找到就對(duì)它賦值。

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

在我們的例子中，引擎會(huì)為變量 a 進(jìn)行 LHS 查詢，另外一個(gè)查找的類型叫做 RHS。 ”L“ 和 "R" 分別代表一個(gè)賦值操作左側(cè)和右側(cè)。當(dāng)變量出現(xiàn)在賦值操作的左側(cè)時(shí)進(jìn)行 LHS 查詢，出現(xiàn)在右側(cè)時(shí)進(jìn)行 RHS 查詢。

LHS：試圖找到變量的容器本身，從而可以對(duì)其賦值；RHS: 就是簡(jiǎn)單地查找某個(gè)變量的值。

console.log(a);

對(duì) a 的引用是一個(gè) RHS 引用，因?yàn)檫@里 a 并沒(méi)有賦予任務(wù)值，相應(yīng)地需要查找并取得 a 的值，這樣才能將值傳遞給 console.log(…)

a = 2;

這里對(duì) a 的引用是 LHS 引用，因?yàn)閷?shí)際上我們并不關(guān)心當(dāng)前的值是什么，只是想要為 = 2這個(gè)賦值操作找到目標(biāo)。

funciton foo(a) {     console.log(a) }  foo(2);

1. 最后一行 foo 函數(shù)的調(diào)用需要對(duì) foo 進(jìn)行 RHS 引用，去找 foo的值，并把它給我
2. 代碼中隱式的 a = 2 操作可能很容易被你忽略掉，這操作發(fā)生在 2 被當(dāng)做參數(shù)傳遞給 foo 函數(shù)時(shí)，2 會(huì)被分配給參數(shù) a，為了給參數(shù) a (隱式地) 分配值，需要進(jìn)行一次 LHS 查詢。
3. 這里還有對(duì) a 進(jìn)行的 RHS 引用，并且將得到的值傳給了 console.log(...)。console.log(...) 本身也需要一個(gè)引用才能執(zhí)行，因此會(huì)對(duì) console對(duì)象進(jìn)行 RHS 查詢，并且檢查得到的值中是否有一個(gè)叫做 log的方法。

RHS查詢?cè)谒星短椎淖饔糜蛑斜閷げ坏剿璧淖兞浚婢蜁?huì)拋出 ReferenceError 異常。進(jìn)行RHS查詢找到了一個(gè)變量，但是你嘗試對(duì)這個(gè)變量的值進(jìn)行不合理的操作，比如試圖對(duì)一個(gè)非函數(shù)類型的值進(jìn)行調(diào)用，后者引用null或 undefined 類型的值中的屬性，那么引擎會(huì)拋出一個(gè)另外一種類型的異常 TypeError。
引擎執(zhí)行 LHS 查詢時(shí)如果找不到該變量，則會(huì)在全局作用域中創(chuàng)建一個(gè)。但是在嚴(yán)格模式下，并不是自動(dòng)創(chuàng)建一個(gè)全局變量，而是會(huì)拋出 ReferenceError 異常

補(bǔ)充JS幾種常見(jiàn)的錯(cuò)誤類型

簡(jiǎn)單總結(jié)如下：

作用域是一套規(guī)則，用于確定在哪里找，怎么找到某個(gè)變量。如果查找的目的是對(duì)變量進(jìn)行賦值，那么就會(huì)使用 LHS查詢; 如果目的是獲取變量的值，就會(huì)使用 RHS 查詢；
JavaScript 引擎執(zhí)行代碼前會(huì)對(duì)其進(jìn)行編譯，這個(gè)過(guò)程中，像 var a = 2 這樣的聲明會(huì)被分解成兩個(gè)獨(dú)立的步驟

• var a 在其作用域中聲明變量，這會(huì)在最開始的階段，也就是代碼執(zhí)行前進(jìn)行

• 接下來(lái)，a = 2 會(huì)查詢 (LHS查詢)變量 a 并對(duì)其進(jìn)行賦值。

詞法作用域

詞法作用域是你在寫代碼時(shí)將變量寫在哪里來(lái)決定的。編譯的詞法分析階段基本能夠知道全局標(biāo)識(shí)符在哪里以及是如何聲明的，從而能夠預(yù)測(cè)在執(zhí)行過(guò)程中如果對(duì)他們查找。

有一些方法可以欺騙詞法作用域，比如 eval, with, 這兩種現(xiàn)在被禁止使用，1是嚴(yán)格模式和非嚴(yán)格模式下表現(xiàn)不同 2是有性能問(wèn)題， JavaScript引擎在編譯階段會(huì)做很多性能優(yōu)化，而其中很多優(yōu)化手段都依賴于能夠根據(jù)代碼的詞法進(jìn)行靜態(tài)分析，并預(yù)先確定所有變量和函數(shù)的定義位置，才能在執(zhí)行過(guò)程中快速找到識(shí)別符，eval, with會(huì)改變作用域，所以碰到它們，引擎將無(wú)法做優(yōu)化處理。

全局作用域和函數(shù)作用域

全局作用域

• 在最外層函數(shù)和最外層函數(shù)外面定義的變量擁有全局作用域

var a = 1; function foo() {  }

變量a 和函數(shù)聲明 foo 都是在全局作用域中的。

• 所有未定義直接賦值的變量自動(dòng)聲明為擁有全局作用域

var a = 1; function foo() {     b = 2; } foo(); console.log(b); // 2

• 所有 window 對(duì)象的屬性擁有全局作用域

函數(shù)作用域

函數(shù)作用域是指在函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)始終是可見(jiàn)的。外部作用域無(wú)法訪問(wèn)函數(shù)內(nèi)部的任何內(nèi)容。

function foo() {     var a = 1;     console.log(a); // 1 } foo(); console.log(a); // ReferenceError: a is not defined

只有函數(shù)的{}構(gòu)成作用域，對(duì)象的{}以及 if(){}都不構(gòu)成作用域;

變量提升

提升是指聲明會(huì)被視為存在與其所出現(xiàn)的作用域的整個(gè)范圍內(nèi)。

JavaScript編譯階段是找到找到所有聲明，并用合適的作用域?qū)⑺麄冴P(guān)聯(lián)起來(lái)(詞法作用域核心內(nèi)容)，所以就是包含變量和函數(shù)在內(nèi)的所有聲明都會(huì)在任何代碼被執(zhí)行前首先被處理。

每個(gè)作用域都會(huì)進(jìn)行提升操作。

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

注意，函數(shù)聲明會(huì)被提升，但是函數(shù)表達(dá)式不會(huì)被提升。

關(guān)于 塊級(jí)作用域和變量提升的內(nèi)容之前在 從JS底層理解var、let、const這邊文章中詳細(xì)介紹過(guò)，這里不再贅述。

塊級(jí)作用域

我們來(lái)看下面這段代碼

for(var i = 0; i < 5; i++) {     setTimeout(() => {         console.log(i);     }) } console.log(`當(dāng)前的i為${i}`); // 當(dāng)前的i為5

上面這段代碼我們希望是輸出 0，1， 2， 3， 4 ，但是實(shí)際上輸出的是 5，5, 5, 5, 5。我們?cè)?for 循環(huán)的頭部直接定義了變量 i，通常是因?yàn)橹幌朐?for 循環(huán)內(nèi)部的上下文中使用 i，但是實(shí)際上 此時(shí)的 i 被綁定在外部作用域（函數(shù)或全局）中。

，塊級(jí)作用域是指在指定的塊級(jí)作用域外無(wú)法訪問(wèn)。在ES6之前是沒(méi)有塊級(jí)作用域的概念的，ES6引入了 let 和 const。我們可以改寫上面的代碼，使它按照我們想要的方式運(yùn)行。

for(let i = 0; i < 5; i++) {     setTimeout(() => {         console.log(i);     }) } // 0 1 2 3 4 console.log(`當(dāng)前的i為${i}`); // ReferenceError: i is not defined

此時(shí) for 循環(huán)頭部的 let 不僅將 i 綁定到了 for 循環(huán)的迭代中，事實(shí)上將它重新綁定到了循環(huán)的每一個(gè)迭代中，確保使用上一次循環(huán)迭代結(jié)束的值重新進(jìn)行賦值。

let聲明附屬于一個(gè)新的作用域而不是當(dāng)前的函數(shù)作用域（也不屬于全局作用域)。但是其行為是一樣的，可以總結(jié)為：任何聲明在某個(gè)作用域內(nèi)的變量，都將附屬于這個(gè)作用域。
const也是可以用來(lái)創(chuàng)建塊級(jí)作用域變量，但是創(chuàng)建的是固定值。

作用域鏈

JavaScript是基于詞法作用域的語(yǔ)言，通過(guò)變量定義的位置就能知道變量的作用域。全局變量在程序中始終都有都定義的。局部變量在聲明它的函數(shù)體內(nèi)以及其所嵌套的函數(shù)內(nèi)始終是有定義的。

每一段 JavaScript 代碼都有一個(gè)與之關(guān)聯(lián)的作用域鏈（scope chain）。這個(gè)作用域鏈?zhǔn)且粋€(gè)對(duì)象列表或者鏈表。當(dāng) JavaScript 需要查找變量 x 的時(shí)候（這個(gè)過(guò)程稱為變量解析），它會(huì)從鏈中的第一個(gè)變量開始查找，如果這個(gè)對(duì)象上依然沒(méi)有一個(gè)名為 x 的屬性，則會(huì)繼續(xù)查找鏈上的下一個(gè)對(duì)象，如果第二個(gè)對(duì)象依然沒(méi)有名為 x 的屬性，javaScript會(huì)繼續(xù)查找下一個(gè)對(duì)象，以此類推。如果作用域鏈上沒(méi)有任何一個(gè)對(duì)象包含屬性 x， 那么就認(rèn)為這段代碼的作用域鏈上不存在 x， 并最終拋出一個(gè)引用錯(cuò)誤 (Reference Error) 異常。

下面作用域中有三個(gè)嵌套的作用域。

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

氣泡1包含著整個(gè)全局作用域，其中只有一個(gè)標(biāo)識(shí)符：foo；
氣泡2包含著foo所創(chuàng)建的作用域，其中有三個(gè)標(biāo)識(shí)符：a、bar 和 b；
氣泡3包含著 bar所創(chuàng)建的作用域，其中只有一個(gè)標(biāo)識(shí)符：c

執(zhí)行 console.log(...)，并查找 a，b，c三個(gè)變量的引用。下面我們來(lái)看看查找這幾個(gè)變量的過(guò)程.
它首先從最內(nèi)部的作用域，也就是 bar(..) 函數(shù)的作用域氣泡開始找，引擎在這里無(wú)法找到 a，因此就會(huì)去上一級(jí)到所嵌套的 foo(…)的作用域中繼續(xù)查找。在這里找到了a，因此就使用了這個(gè)引用。對(duì)b來(lái)說(shuō)也一樣，而對(duì) c 來(lái)說(shuō)，引擎在 bar(..) 中就找到了它。

如果 a，c都存在于 bar(…) 內(nèi)部，console.log(…)就可以直接使用 bar(…) 中的變量，而無(wú)需到外面的 foo(..)中查找。作用域會(huì)在查找都第一個(gè)匹配的標(biāo)識(shí)符時(shí)就停止。

在多層的嵌套作用域中可以定義同名的標(biāo)識(shí)符，這叫”遮蔽效應(yīng)“。

var a = '外部的a'; function foo() {     var a = 'foo內(nèi)部的a';     console.log(a); // foo內(nèi)部的a } foo();

作用域與執(zhí)行上下文

JavaScript的執(zhí)行分為：解釋和執(zhí)行兩個(gè)階段

解釋階段

• 詞法分析
• 語(yǔ)法分析
• 作用域規(guī)則確定

執(zhí)行階段

• 創(chuàng)建執(zhí)行上下文
• 執(zhí)行函數(shù)代碼
• 垃圾回收

作用域在函數(shù)定義時(shí)就已經(jīng)確定了，而不是在函數(shù)調(diào)用時(shí)確定，但執(zhí)行上下文是函數(shù)執(zhí)行之前創(chuàng)建的。

總結(jié)

• 作用域就是一套規(guī)則，用于確定在哪里找以及怎么找到某個(gè)變量。

• 詞法作用域在你寫代碼的時(shí)候就確定了。JavaScript是基于詞法作用域的語(yǔ)言，通過(guò)變量定義的位置就能知道變量的作用域。ES6引入的let和const聲明的變量在塊級(jí)作用域中。

• 聲明提升是指聲明會(huì)被視為存在與其所出現(xiàn)的作用域的整個(gè)范圍內(nèi)。

• 查找變量的時(shí)候會(huì)先從內(nèi)部的作用域開始查找，如果沒(méi)找到，就往上一級(jí)進(jìn)行查找，依次類推。

• 作用域在函數(shù)定義時(shí)就已經(jīng)確定了，執(zhí)行上下文是函數(shù)執(zhí)行之前創(chuàng)建的。