作用域與作用域鏈本應(yīng)該是一個(gè)非常簡單的概念。可是在近兩年多的留言中，我發(fā)現(xiàn)這些概念反而成為了大多數(shù)人想不明白的點(diǎn)，而感到困惑的原因在于，別的文章里，常常會(huì)提到詞法作用域，詞法分析等概念，到底是什么東西？好像跟我說的有一點(diǎn)不一樣，但又不知道哪里不對？
為了避免接下來更多的同學(xué)造成同樣的困擾，我寫了一篇名為（v8引擎是如何工作的）文章，為大家分析JS的工作原理。后續(xù)會(huì)整理進(jìn)入基礎(chǔ)進(jìn)階系列文章。大家可以隨時(shí)閱讀。
詞法環(huán)境（Lexical Environments）
官方規(guī)范對詞法環(huán)境的說明是：詞法環(huán)境（Lexical Environments）是一種規(guī)范類型，用于根據(jù)ECMAScript代碼的詞法嵌套結(jié)構(gòu)來定義標(biāo)識符與特定變量和函數(shù)的關(guān)聯(lián)。
官方就是愛把簡單的東西復(fù)雜化，專業(yè)！
通俗來說，詞法環(huán)境就是一套約定好的規(guī)則。我們寫代碼，應(yīng)該按照這個(gè)規(guī)則來。JS引擎對JS源碼進(jìn)行詞法分析，也是按照這個(gè)規(guī)則來。
因此，詞法環(huán)境，在我們寫代碼的時(shí)候就已經(jīng)確定了。明白了這一點(diǎn)，對于區(qū)分詞法環(huán)境與執(zhí)行上下文有非常關(guān)鍵的意義。
詞法環(huán)境，其實(shí)就是作用域，有的人叫詞法作用域等等，叫法都不是重點(diǎn)，重點(diǎn)是，不要讀太多雜亂的文章，反而搞得自己更迷糊
得出結(jié)論：
一、在JavaScript中，我們可以將作用域定義為一套規(guī)則，這套規(guī)則用來管理JS引擎如何在當(dāng)前作用域以及嵌套的子作用域中根據(jù)標(biāo)識符名稱進(jìn)行變量查找。
這里的標(biāo)識符，指的是變量名或者函數(shù)名
二、JavaScript中有全局作用域與函數(shù)作用域(因?yàn)閑val我們平時(shí)開發(fā)中幾乎不會(huì)用到它，這里不討論)。
現(xiàn)在，大家知道詞法環(huán)境，作用域和執(zhí)行上下文的區(qū)別了嗎？
更多的關(guān)于JS引擎是如何處理JS代碼的，大家可以參考（V8引擎是如何工作的）一文
作用域鏈
首先我們要明確的一點(diǎn)是，作用域和作用域鏈?zhǔn)遣煌摹?/p>
作用域是一套規(guī)則。
而作用域鏈，則是作用域的具體實(shí)現(xiàn)。
作用域鏈，是由當(dāng)前環(huán)境與上層環(huán)境的一系列變量對象組成，它保證了當(dāng)前執(zhí)行環(huán)境對符合訪問權(quán)限的變量和函數(shù)的有序訪問。
作用域鏈，在函數(shù)聲明階段確認(rèn)。如果要結(jié)合 JavaScript 引擎來理解的話，作用域鏈，就是在代碼解析階段確認(rèn)的。
為了幫助大家理解作用域鏈，我我們先結(jié)合一個(gè)例子，以及相應(yīng)的圖示來說明。
var a = 20;
function test() {
var b = a + 10;
function innerTest() {
var c = 10;
return b + c;
}
return innerTest();
}
test();
在上面的例子中，全局，函數(shù)test，函數(shù)innerTest的執(zhí)行上下文先后創(chuàng)建。我們設(shè)定他們的變量對象分別為VO(global)，VO(test), VO(innerTest)。而innerTest的作用域鏈，則同時(shí)包含了這三個(gè)變量對象，所以innerTest的執(zhí)行上下文可如下表示。
innerTestEC = {
VO: {...}, // 變量對象
scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域鏈
}
我們這里使用一個(gè)數(shù)組來模擬作用域鏈，數(shù)組的第一項(xiàng)scopeChain[0]為作用域鏈的最前端，而數(shù)組的最后一項(xiàng)，為作用域鏈的最末端，所有的最末端都為全局變量對象。
很多人會(huì)誤解為當(dāng)前作用域與上層作用域?yàn)榘P(guān)系，但其實(shí)并不是。以最前端為起點(diǎn)，最末端為終點(diǎn)的單方向通道我認(rèn)為是更加貼切的形容。如圖。
注意，因?yàn)樽兞繉ο笤趫?zhí)行上下文進(jìn)入執(zhí)行階段時(shí)，就變成了活動(dòng)對象，這一點(diǎn)在上一篇文章中已經(jīng)講過，因此圖中使用了AO來表示。Active Object
作用域鏈?zhǔn)怯梢幌盗凶兞繉ο蠼M成，我們可以在這個(gè)單向通道中，查詢變量對象中的標(biāo)識符，這樣，就能訪問到上一層作用域中的變量。
最后，用一個(gè)問題，驗(yàn)證一下大家對作用域和作用域鏈以及變量對象的理解：
foo的執(zhí)行結(jié)果是什么？
var a = 20;
function foo() {
if (!a) {
a = 100;
}
var a = 10;
return a;
}
console.log(foo());
下一篇：前端基礎(chǔ)進(jìn)階（五）：閉包
上一篇：前端基礎(chǔ)進(jìn)階（三）：變量對象詳解
前端基礎(chǔ)進(jìn)階目錄
