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