什么是作用域和執(zhí)行上下文
說到 Javascript 中的作用域，通常一同出現的還有一個執(zhí)行上下文（execution context）的概念，以前我在網上搜索相關的內容總是理不清這兩者的關系。似乎函數，作用域，執(zhí)行上下文這三者天生就是糾纏在一起的。為了獲得一手的資料我翻看了 ES6 規(guī)范，把他們到底是什么梳理了一下：
作用域
首先我們來說下作用域，簡單來說作用域就是一個區(qū)域，包含了其中變量，常量，函數等等定義信息和賦值信息，以及這個區(qū)域內代碼書寫的結構信息。作用域可以嵌套。我們通常知道 js 中函數的定義可以產生作用域，下面我們用具體代碼來示例下：
全局作用域（global scope）里面定義了兩個變量，一個函數。walk 函數生成的作用域里面定義了一個變量，兩個函數。innerFunc 和 anotherInnerFunc 這兩個函數生成的作用域里面分別定義了一個變量。在規(guī)范中作用域更官方的叫法是詞法環(huán)境（Lexical Environments）。什么意思？就是作用域包含哪些內容取決于你代碼怎么寫，你把定義 go 變量寫在了 walk 函數里面，那么 go 變量就屬于 walk 函數作用域。
作用域其實由兩部分組成：
- 記錄作用域內變量信息（我們假設變量，常量，函數等統稱為變量）和代碼結構信息的東西，稱之為 Environment Record。
- 一個引用
__outer__，這個引用指向當前作用域的父作用域。拿上面代碼為例。innerFunc 的函數作用域有一個引用指向 walk 函數作用域，walk 函數作用域有一個引用指向全局作用域。全局作用域的__outer__為 null。
變量查找（ResolveBinding）：
規(guī)范中定義了查找一個變量的過程：先查看當前作用域里面的 Environment Record 是否有此變量的信息，如果找到了，則返回當前作用域內的這個變量。如果沒有查找到，則順著 __outer__ 到父作用域里面的 Environment Record 查找，以此遞歸。所以我們通常所說的函數內同名變量遮蔽全局變量就是這么回事。不過如果你在變量查找的時候指定某個作用域中的 Environment Record，那么也是可以的，譬如：window.name 【其實 window 對象就是全局作用域的 Environment Record 對象，但是普通函數作用域的 Environment Record 對象是獲取不到的】。
生成作用域的語法：
- 函數聲明
function f() {
var inner = 'inner';
console.log( inner );
}
f(); // inner;
console.log( inner ); // Uncaught ReferenceError: inner is not defined
- catch 語句
try {
throw new Error( 'customized error' );
} catch( err ) {
var iamnoterror = 'not error';
console.log( iamnoterror ); // not error
console.log( err ); // Error: customized error
}
console.log( iamnoterror ); // not error
console.log( err ); // Uncaught ReferenceError: e is not defined
這里特別指出的是 catch 語句生成的作用域只會框住參數部分的變量（err），使其不能在外面訪問。對于 catch 語句體里面聲明的變量并不起作用。我們看規(guī)范里面怎么說：
For each element argName of the BoundNames of CatchParameter, do
a. Perform catchEnv.CreateMutableBinding(argName).
catchEvn 就是 catch 語句生成的作用域，但是這個作用域只保存參數列表中的變量（CreateMutableBinding(argName)）。
- 語句塊
if ( true ) {
let bv = 'bv';
const B_C = 'BC';
let blockFunc = function() {}
function notBlockFunc() {}
console.log( bv ); // bv
console.log( B_C ); // BC
console.log( notBlockFunc ); // function notBlockFunc() {}
console.log( blockFunc ); // function () {}
}
console.log( bv ); // Uncaught ReferenceError: bv is not defined
console.log( B_C ); // Uncaught ReferenceError: B_C is not defined
console.log( notBlockFunc ); // function notBlockFunc() {}
console.log( blockFunc ); // ReferenceError: blockFunc is not defined
語句塊 {} 會生成一個新的作用域，但是這個作用域只綁定塊級變量，常量等，即 let，const 聲明的屬于塊級作用域，而 var 聲明的還是屬于塊級作用域的父作用域。
執(zhí)行上下文
接下來我們說下執(zhí)行上下文（execution context），執(zhí)行上下文是用于跟蹤代碼的運行情況，其特征如下：
- 一段代碼塊對應一個執(zhí)行上下文，被封裝成函數的代碼被視作一段代碼塊，或者“全局作用域”也被視作一段代碼塊。
- 當程序運行，進入到某段代碼塊時，一個新的執(zhí)行上下文被創(chuàng)建，并被放入一個 stack 中。當程序運行到這段代碼塊結尾后，對應的執(zhí)行上下文被彈出 stack。
- 當程序在某段代碼塊中運行到某個點需要轉到了另一個代碼塊時（調用了另一個函數），那么當前的可執(zhí)行上下文的狀態(tài)會被置為掛起，然后生成一個新的可執(zhí)行上下文放入 stack 的頂部。
- stack 最頂部的可執(zhí)行上下文被稱為 running execution context。當頂部的可執(zhí)行上下文被彈出后，上一個掛起的可執(zhí)行上下文繼續(xù)執(zhí)行。
我們用代碼來示例下（從 outer 調用到 level1 調用，再逐層返回）：
執(zhí)行上下文對象的內部屬性：
-
[[code evaluation]]：當前代碼塊執(zhí)行的狀態(tài)：prerform，suspend，resume。 -
[[Function]]：如果當前執(zhí)行上下文對應的是一個函數，那么這個屬性就保存的這個函數對象。如果對應的是全局環(huán)境（可以是一個 script 或者 module），屬性值是 null。 -
[[Real]]：類似與沙箱的概念？（我還沒有看懂，不過不太影響此篇的內容）。
如果程序執(zhí)行到某個點拋出異常了，那么我們可以用這個記錄執(zhí)行上下文的 stack 來追蹤到底哪里出錯了，可以看到整個調用棧，此時內部屬性 [[Function]] 就起到作用了：
作用域和執(zhí)行上下文的關系
其實大家看下作用域和執(zhí)行上下文各自的職責，你會發(fā)現他們幾乎是沒有啥交集的。那么為啥通常兩者會被同時提到呢？因為在一個函數被執(zhí)行時，創(chuàng)建的執(zhí)行上下文對象除了保存了些代碼執(zhí)行的信息，還會把當前的作用域保存在執(zhí)行上下文中。所以它們的關系只是存儲關系。
再談變量查找（ResolveBinding）：
結合作用域和執(zhí)行上下文，我們再來看下變量查找的過程。其實第一步不是到作用域里面找 Environment Record，而是先從當前的執(zhí)行上下文中找保存的作用域（對象），然后再是通過作用域鏈向上查找變量。而且同一個執(zhí)行上下文保存的作用域（對象）是可變的，當代碼在同一個執(zhí)行上下文中執(zhí)行的時候，如果碰到有必要生成一個新作用域的時候，這個新的作用域會被添加到作用域鏈的頭部，然后執(zhí)行上下文就保存的作用域對象就更新成這個新的作用域。等這個新的作用域生命周期完成后，作用域鏈又會恢復到之前的狀況，然后執(zhí)行上下文保存的作用域也會恢復成之前的。示例：
this
稍微提下，我看到網上有把執(zhí)行上下文等同于 this 的文章，其實 this 的值是通過當前執(zhí)行上下文中保存的作用域（對象）來獲取到的，規(guī)范如下。
ResolveThisBinding ( )
The abstract operation ResolveThisBinding determines the binding of the keyword this using the LexicalEnvironment of the running execution context. ResolveThisBinding performs the following steps:
- Let envRec be GetThisEnvironment( ).
- Return envRec.GetThisBinding().
我接下來會要總結函數作為普通函數和作為構造函數被調用時的區(qū)別，那個時候應該會對 this 有更深入的解釋。
