javascript作用域底層作用分析

變量的訪問規(guī)則：

let a = 1
function foo () {
 let b = 1 + a
 let c = 2
 console.log(b) // 2
}
console.log(c) // error 全局作用無法訪問到 c
foo()

let a = 1
let b = 2
function foo () {
 let b = 3
 function too () {
 console.log(a) // 1
 console.log(b) // 3
 }
 too()
}
foo()

再次強(qiáng)調(diào) javascript 作用域會嚴(yán)格限制變量的可訪問范圍: 即根據(jù)源代碼中代碼和塊的位置，被嵌套作用域擁有對嵌套作用域的訪問權(quán)限。(這一條規(guī)則說明整個農(nóng)場是有規(guī)則的，不能反向的投食。)

作用域鏈 Scope Chain

作用域鏈，是由當(dāng)前環(huán)境與上層環(huán)境的一系列作用域共同組成，它保證了當(dāng)前執(zhí)行環(huán)境對符合訪問權(quán)限的變量和函數(shù)的有序訪問。

上面解釋的稍微有些晦澀，對于我這樣大腦不好使的就需要在大腦里重復(fù)的'讀'幾次才能明白。那么作用域鏈?zhǔn)歉陕锏模?簡單的說作用域鏈就是解析標(biāo)識符的，負(fù)責(zé)返回表達(dá)式執(zhí)行時所依賴變量的值。再簡單點(diǎn)回答：作用域鏈就是用來查找變量的，作用域鏈?zhǔn)怯梢幌盗凶饔糜虼?lián)起來的。

在函數(shù)執(zhí)行過程中，每遇到一個變量，都會經(jīng)歷一次標(biāo)識符解析過程以決定從哪里獲取和存儲數(shù)據(jù)。該過程從作用域鏈頭部，也就是當(dāng)前執(zhí)行函數(shù)的作用域開始（下圖中從左向右），查找同名的標(biāo)識符，如果找到了就返回這個標(biāo)識符對應(yīng)的值，如果沒找到繼續(xù)搜索作用域鏈中的下一個作用域，如果搜索完所有作用域都未找到，則認(rèn)為該標(biāo)識符未定義。函數(shù)執(zhí)行過程中，每個標(biāo)識符值得解析都要經(jīng)歷這樣的搜索過程。

為了具象化分析問題，我們可以假設(shè)作用域鏈?zhǔn)且粋€數(shù)組(Scope Array)，數(shù)組成員有一系列變量對象組成。我們可以在數(shù)組這個單向通道中，也就是上圖模擬從左向右查詢變量對象中的標(biāo)識符，這樣就可以訪問到上一層作用域中的變量了。直到最頂層（全局作用域），并且一旦找到，即停止查找。所以內(nèi)層的變量可以屏蔽外層的同名變量。想想一下如果變量不是按從內(nèi)向外的查找,那整個語言設(shè)計(jì)會變得N復(fù)雜了（我們需要設(shè)計(jì)一套復(fù)雜的雞寶寶找食物的規(guī)則）

還是上面的栗子：

let a = 1
let b = 2
function foo () {
 let b = 3
 function too () {
 console.log(a) // 1
 console.log(b) // 3
 }
 too()
}
foo()

作用域嵌套結(jié)構(gòu)是這樣的：

栗子中，當(dāng) javascript 引擎執(zhí)行到函數(shù) too 時， 全局、函數(shù) foo、函數(shù) too 的上下文分別會被創(chuàng)建。上下文內(nèi)包含它們各自的變量對象和作用域鏈（注意： 作用域鏈包含可訪問到的上層作用域的變量對象，在上下文創(chuàng)建階段根據(jù)作用域規(guī)則被收集起來形成一個可訪問鏈），我們設(shè)定他們的變量對象分別為VO(global)，VO(foo), VO(too)。而 too 的作用域鏈，則同時包含了這三個變量對象，所以 too 的執(zhí)行上下文可如下表示：

too = {
 VO: {...}, // 變量對象
 scopeChain: [VO(too), VO(foo), VO(global)], // 作用域鏈
}

我們可以直接用scopeChain來表示作用域鏈數(shù)組，數(shù)組的第一項(xiàng)scopeChain[0]為作用域鏈的最前端(當(dāng)前函數(shù)的變量對象)，而數(shù)組的最后一項(xiàng)，為作用域鏈的最末端（全局變量對象 window ）。所有作用域鏈的最末端都為全局變量對象。

再舉個栗子：

let a = 1
function foo() {
 console.log(a)
}
function too() {
 let a = 2
 foo()
}
too() // 1

這個栗子如果對作用域的特點(diǎn)理解不透徹很容易以為輸出是2。但其實(shí)最終輸出的是 1。 foo() 在執(zhí)行的時候先在當(dāng)前作用域內(nèi)查找變量 a 。然后根據(jù)函數(shù)定義時的作用域關(guān)系會在當(dāng)前作用域的上層作用域里查找變量標(biāo)識符 a，所以最后查到的是全局作用域的 a 而不是 foo函數(shù)里面的 a 。

閉包

在 JavaScript 中，函數(shù)和函數(shù)聲明時的詞法作用域形成閉包。我們來看個閉包的例子

let a = 1
function foo() {
 let a = 2
 function too() {
 console.log(a)
 }
 return too
}
foo()() // 2

這是一個閉包的栗子，一個函數(shù)執(zhí)行后返回另一個可執(zhí)行函數(shù)，被返回的函數(shù)保留有對它定義時外層函數(shù)作用域的訪問權(quán)。foo()() 調(diào)用時依次執(zhí)行了 foo、too 函數(shù)。too 雖然是在全局作用域里執(zhí)行的，但是too定義在 foo 作用域里面，根據(jù)作用域鏈規(guī)則取最近的嵌套作用域的屬性 a = 2。

再拿農(nóng)場的故事做比如。農(nóng)場主發(fā)現(xiàn)還有一種方法會更節(jié)約成本，就是讓每個雞媽媽作為家庭成員的‘飼養(yǎng)員’， 從而改變了之前的‘飼養(yǎng)結(jié)構(gòu)’。

關(guān)于閉包會在后面的章節(jié)里也會有介紹。

從作用域鏈的結(jié)構(gòu)可以發(fā)現(xiàn)，javascript引擎在查找變量標(biāo)識符時是依據(jù)作用域鏈依次向上查找的。當(dāng)標(biāo)識符所在的作用域位于作用域鏈的更深的位置，讀寫的時候相對就慢一些。所以在編寫代碼的時候應(yīng)盡量少使用全局代碼，盡可能的將全局的變量緩存在局部作用域中。

不加強(qiáng)記憶很容記錯作用域與后面將要介紹的執(zhí)行上下文的區(qū)別。代碼的執(zhí)行過程分為編譯階段和解釋執(zhí)行階段。始終應(yīng)該記住javascript作用域在源代碼的編碼階段就確定了，而作用域鏈?zhǔn)窃诰幾g階段被收集到執(zhí)行上下文的變量對象里的。所以作用域、作用域鏈都是在當(dāng)前運(yùn)行環(huán)境內(nèi)代碼執(zhí)行前就確定了。這里暫且不過多的展開執(zhí)行上下文的概念，可以關(guān)注后續(xù)文章。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

PromiseA+的實(shí)現(xiàn)步驟詳解

EasyCanvas繪圖庫在Pixeler項(xiàng)目開發(fā)中使用實(shí)戰(zhàn)總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com