前言

JS 中的執(zhí)行環(huán)境和作用域鏈是非常重要的概念，它們是 JS 引擎在處理 JS 代碼的時候?qū)ψ兞亢秃瘮?shù)的處理方式，這兩個概念的正確理解能夠幫助我們更好地理解和預(yù)測代碼的行為。

執(zhí)行環(huán)境

執(zhí)行環(huán)境定義了變量或者函數(shù)有權(quán)訪問的數(shù)據(jù)集合，每一個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，該執(zhí)行環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中。我們無法直接訪問這個對象，這個對象只是在解析器處理數(shù)據(jù)的時候使用。

我們平時說的全局變量就是在最外圍的一個執(zhí)行環(huán)境中定義的變量，全局執(zhí)行環(huán)境根據(jù) ECMAScript 的不同實現(xiàn)而有不同的表示，在 Web 瀏覽器中，全局執(zhí)行環(huán)境就是 window 對象，所有的全局變量和函數(shù)就是作為 window 對象的屬性和方法創(chuàng)建的。在 nodejs 的實現(xiàn)中，全局執(zhí)行環(huán)境就是global 對象。
除了全局執(zhí)行環(huán)境，每個函數(shù)都有自己的執(zhí)行環(huán)境，當執(zhí)行流進入一個函數(shù)時，函數(shù)的環(huán)境就會被推入一個環(huán)境棧中，而函數(shù)執(zhí)行之后，棧將其環(huán)境彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境。也就是說某個執(zhí)行環(huán)境中的代碼全部執(zhí)行完畢之后，該環(huán)境就被銷毀，保存在其中的所有變量和函數(shù)定義也隨之銷毀，全局執(zhí)行環(huán)境直到應(yīng)用程序額推出——例如網(wǎng)頁或瀏覽器被關(guān)閉時才被銷毀。

作用域鏈

前面說到每個執(zhí)行環(huán)境都有一個變量對象來保存環(huán)境中定義的變量和函數(shù)，環(huán)境是層層嵌套的，所以當代碼進入到一個新的環(huán)境開始執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈，把嵌套的執(zhí)行環(huán)境之間的變量對象做一個有序的聯(lián)系。作用域鏈最主要的作用是確保當前執(zhí)行環(huán)境有權(quán)訪問的變量和函數(shù)，并且有序地查找。在作用域鏈的最前端始終是當前正在執(zhí)行的代碼所處的執(zhí)行環(huán)境的變量對象，如果這個環(huán)境是一個函數(shù)，就把函數(shù)的活動對象作為其變量對象，在函數(shù)中沒有定義新的變量時，這個活動獨享就是函數(shù)的 arguments 對象。作用域鏈的下一個變量都西昂來自于當前執(zhí)行環(huán)境的包含環(huán)境，依次類推，逐層嵌套，知道全局執(zhí)行環(huán)境；全局執(zhí)行環(huán)境的變量對象始終都是作用域鏈中的最后一個都對象。

當我們的代碼在執(zhí)行的時候，遇到的每一個標識符解析都會沿著作用域鏈一級一級地進行搜索，從作用域鏈的前端（當前執(zhí)行環(huán)境的變量對象）逐級向后回溯，知道找到標識符為止，如果在作用域鏈上沒有找到這個標識符，通常會導(dǎo)致錯誤。我們經(jīng)常遇到的 Uncaught ReferenceError: x is not defined 就是這個錯誤在瀏覽器中的表現(xiàn)。

JS解釋器在執(zhí)行時會將變量和函數(shù)進行聲明提前，在聲明函數(shù)的時候，會給函數(shù)一個 [[scope]] 屬性，這個屬性中包含了當前函數(shù)所有包含環(huán)境的變量對象，也就是我們的函數(shù)在聲明提前的時候就已經(jīng)生成了他的包含環(huán)境的作用域鏈了，然后當函數(shù)執(zhí)行的時候會把自己的 arguments 和內(nèi)部定義的函數(shù)和變量打包成一個變量對象加到 scope chain 的最后。

函數(shù)參數(shù)也被當做變量來對待，因此起訪問規(guī)則與執(zhí)行環(huán)境中的其他變量相同。

作用域鏈的這種特性理解起來其實也是比較直觀的，但是在實際的代碼中由于情況非常多，有時候有些行為還是比較反直覺或者說容易產(chǎn)生誤解的。比如下面的情況：

作用域鏈看的是函數(shù)定義的位置而不是執(zhí)行的位置

var x = 10
bar()
function foo() {
 console.log(x)
}
function bar(){
 var x = 30
 foo()
}

在這個例子里面，可能會有人誤以為 bar() 會輸出 30，我們只要理解函數(shù)其實是保存在堆中，我們給函數(shù)命名只是一個指向函數(shù)堆中地址的一個引用，當我們執(zhí)行函數(shù)的時候根據(jù)這個引用去堆中找對應(yīng)的函數(shù)執(zhí)行。所以無論我們在哪里執(zhí)行函數(shù)，函數(shù)的位置都是不變的，我們看作用域鏈也是，我們確定作用域鏈不是看函數(shù)是在哪里執(zhí)行，而是要看函數(shù)是在哪里定義，作用域鏈可以認為是函數(shù)聲明時就已經(jīng)生成了。

個人認為 ECMAScript 這樣處理作用域鏈是為了作用域鏈能夠保持不變而不用一直維護，并且根據(jù)環(huán)境的嵌套保持一致性。

閉包

除了全局執(zhí)行環(huán)境的變量對象是始終存在的，其他局部函數(shù)的變量對象都只在函數(shù)的執(zhí)行過程中存在，一般來講，函數(shù)執(zhí)行完畢之后，局部活動對象就被銷毀了，內(nèi)存中僅僅保存全局執(zhí)行環(huán)境的變量對象，但是閉包的情況是不同的。

閉包指的是有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，比如下面這樣：

 function outer(){
   var scope = "outer";
   return function (){
    return scope;
   }
 }
var fn = outer();
fn();

在一個函數(shù)內(nèi)部定義的函數(shù)會將包含函數(shù)（即外部函數(shù)）的活動對象添加到他的作用域鏈中，因此在 outer 函數(shù)內(nèi)部定義的匿名函數(shù)（我們下面把這個匿名函數(shù)稱為 inner 函數(shù)）的作用域鏈中，實際上會包含外部函數(shù) outer() 的活動對象，下圖可以看書當代碼執(zhí)行時，outer 和 inner 函數(shù)的作用域鏈。

當匿名函數(shù)從 outer() 中被返回后，inner() 函數(shù)仍然可以訪問在 outer() 中定義的所有變量，也就是說，當 outer() 函數(shù)執(zhí)行完畢后，其活動對象也不會被銷毀，因為匿名函數(shù)的作用域鏈依然在引用這個活動對象。換句話說，當 outer() 函數(shù)執(zhí)行完畢返回后，其執(zhí)行環(huán)境和作用域鏈都被銷毀，但它的活動對象依然保存在內(nèi)存中，如果匿名函數(shù)不銷毀，則這個活動對象會一直存在于內(nèi)存中。

js中的對象都是保存在堆中，我們在代碼中寫的都是對對象的引用，作用域鏈中也是，所以上面說的 outer() 函數(shù)執(zhí)行完畢后作用域鏈被銷毀但是對象還存在，其實銷毀的只是引用， js 中的垃圾處理機制的一種策略是引用計數(shù)，當某個變量或?qū)ο蟮囊么螖?shù)為 0 的時候內(nèi)存會被收回。outer 函數(shù)的變量對象的引用有兩個一個是 outer 的作用域鏈和匿名函數(shù)的作用域鏈，所以只要匿名函數(shù)不被銷毀，這個引用就一直存在，outer() 的活動對象也會一直存在。

輪子哥在知乎給過一個比較容易理解的說法：“閉”的意思不是封閉內(nèi)部狀態(tài)，而是封閉外部狀態(tài)，一個函數(shù)如何能夠封閉外部狀態(tài)呢，當外部狀態(tài)的 scope 失效的時候，它自己還保留了一份。

由于閉包會攜帶包含它的函數(shù)的作用域，因此回避其他函數(shù)占用更多的內(nèi)存。過度使用閉包可能會導(dǎo)致內(nèi)存占用過多，只在必要的時候使用閉包。

總結(jié)

任何一種編程語言都有作用域的概念，我們的程序是圍繞著變量操作的，那么在設(shè)計語言的時候，變量如何儲存，儲存到哪里，我們的程序如何找到對應(yīng)的變量就是一個首先要解決的問題。而作用域就是語言設(shè)計者針對這個問題編寫的一套設(shè)計良好的規(guī)則來存儲并搜索對象，這就是作用域的概念。而 JS 中的這個規(guī)則就是作用域鏈，我們在編寫程序的時候也需要知道我們的變量（以及函數(shù)）是如何儲存，以及 JS 引擎在遇到標識符解析的時候是按照什么規(guī)則來搜索變量或者函數(shù)的，只有這樣我們才能寫出更可靠的代碼。

以上就是JavaScript中的執(zhí)行環(huán)境和作用域鏈的詳細內(nèi)容，更多關(guān)于JavaScript執(zhí)行環(huán)境和作用域鏈的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論