什么是作用域和執(zhí)行上下文
說到 Javascript 中的作用域蜕便，通常一同出現(xiàn)的還有一個執(zhí)行上下文（execution context）的概念，以前我在網(wǎng)上搜索相關(guān)的內(nèi)容總是理不清這兩者的關(guān)系谷异。似乎函數(shù)，作用域锦聊，執(zhí)行上下文這三者天生就是糾纏在一起的歹嘹。為了獲得一手的資料我翻看了 ES6 規(guī)范，把他們到底是什么梳理了一下：
作用域
首先我們來說下作用域孔庭，簡單來說作用域就是一個區(qū)域尺上，包含了其中變量，常量圆到，函數(shù)等等定義信息和賦值信息怎抛，以及這個區(qū)域內(nèi)代碼書寫的結(jié)構(gòu)信息。作用域可以嵌套芽淡。我們通常知道 js 中函數(shù)的定義可以產(chǎn)生作用域抽诉，下面我們用具體代碼來示例下：
全局作用域（global scope）里面定義了兩個變量，一個函數(shù)吐绵。walk 函數(shù)生成的作用域里面定義了一個變量迹淌，兩個函數(shù)。innerFunc 和 anotherInnerFunc 這兩個函數(shù)生成的作用域里面分別定義了一個變量己单。在規(guī)范中作用域更官方的叫法是詞法環(huán)境（Lexical Environments）唉窃。什么意思？就是作用域包含哪些內(nèi)容取決于你代碼怎么寫纹笼，你把定義 go 變量寫在了 walk 函數(shù)里面纹份，那么 go 變量就屬于 walk 函數(shù)作用域。
作用域其實由兩部分組成：
- 記錄作用域內(nèi)變量信息（我們假設(shè)變量，常量蔓涧，函數(shù)等統(tǒng)稱為變量）和代碼結(jié)構(gòu)信息的東西件已，稱之為 Environment Record。
- 一個引用
__outer__元暴，這個引用指向當(dāng)前作用域的父作用域篷扩。拿上面代碼為例。innerFunc 的函數(shù)作用域有一個引用指向 walk 函數(shù)作用域茉盏，walk 函數(shù)作用域有一個引用指向全局作用域鉴未。全局作用域的__outer__為 null。
變量查找（ResolveBinding）：
規(guī)范中定義了查找一個變量的過程：先查看當(dāng)前作用域里面的 Environment Record 是否有此變量的信息鸠姨，如果找到了铜秆，則返回當(dāng)前作用域內(nèi)的這個變量。如果沒有查找到讶迁，則順著 __outer__ 到父作用域里面的 Environment Record 查找连茧，以此遞歸。所以我們通常所說的函數(shù)內(nèi)同名變量遮蔽全局變量就是這么回事巍糯。不過如果你在變量查找的時候指定某個作用域中的 Environment Record梅屉，那么也是可以的，譬如：window.name 【其實 window 對象就是全局作用域的 Environment Record 對象鳞贷，但是普通函數(shù)作用域的 Environment Record 對象是獲取不到的】坯汤。
生成作用域的語法：
- 函數(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 語句生成的作用域只會框住參數(shù)部分的變量（err），使其不能在外面訪問搀愧。對于 catch 語句體里面聲明的變量并不起作用惰聂。我們看規(guī)范里面怎么說：
For each element argName of the BoundNames of CatchParameter, do
a. Perform catchEnv.CreateMutableBinding(argName).
catchEvn 就是 catch 語句生成的作用域，但是這個作用域只保存參數(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
語句塊 {} 會生成一個新的作用域搓幌，但是這個作用域只綁定塊級變量，常量等迅箩，即 let溉愁，const 聲明的屬于塊級作用域，而 var 聲明的還是屬于塊級作用域的父作用域饲趋。
執(zhí)行上下文
接下來我們說下執(zhí)行上下文（execution context）拐揭，執(zhí)行上下文是用于跟蹤代碼的運行情況，其特征如下：
- 一段代碼塊對應(yīng)一個執(zhí)行上下文奕塑，被封裝成函數(shù)的代碼被視作一段代碼塊堂污，或者“全局作用域”也被視作一段代碼塊。
- 當(dāng)程序運行龄砰，進(jìn)入到某段代碼塊時盟猖，一個新的執(zhí)行上下文被創(chuàng)建讨衣，并被放入一個 stack 中。當(dāng)程序運行到這段代碼塊結(jié)尾后式镐，對應(yīng)的執(zhí)行上下文被彈出 stack反镇。
- 當(dāng)程序在某段代碼塊中運行到某個點需要轉(zhuǎn)到了另一個代碼塊時（調(diào)用了另一個函數(shù)），那么當(dāng)前的可執(zhí)行上下文的狀態(tài)會被置為掛起娘汞，然后生成一個新的可執(zhí)行上下文放入 stack 的頂部歹茶。
- stack 最頂部的可執(zhí)行上下文被稱為 running execution context。當(dāng)頂部的可執(zhí)行上下文被彈出后价说，上一個掛起的可執(zhí)行上下文繼續(xù)執(zhí)行辆亏。
我們用代碼來示例下（從 outer 調(diào)用到 level1 調(diào)用风秤，再逐層返回）：
執(zhí)行上下文對象的內(nèi)部屬性：
-
[[code evaluation]]：當(dāng)前代碼塊執(zhí)行的狀態(tài)：prerform鳖目，suspend，resume缤弦。 -
[[Function]]：如果當(dāng)前執(zhí)行上下文對應(yīng)的是一個函數(shù)领迈，那么這個屬性就保存的這個函數(shù)對象。如果對應(yīng)的是全局環(huán)境（可以是一個 script 或者 module）碍沐，屬性值是 null狸捅。 -
[[Real]]：類似與沙箱的概念？（我還沒有看懂累提，不過不太影響此篇的內(nèi)容）尘喝。
如果程序執(zhí)行到某個點拋出異常了，那么我們可以用這個記錄執(zhí)行上下文的 stack 來追蹤到底哪里出錯了斋陪，可以看到整個調(diào)用棧朽褪，此時內(nèi)部屬性 [[Function]] 就起到作用了：
作用域和執(zhí)行上下文的關(guān)系
其實大家看下作用域和執(zhí)行上下文各自的職責(zé)，你會發(fā)現(xiàn)他們幾乎是沒有啥交集的无虚。那么為啥通常兩者會被同時提到呢缔赠？因為在一個函數(shù)被執(zhí)行時，創(chuàng)建的執(zhí)行上下文對象除了保存了些代碼執(zhí)行的信息友题，還會把當(dāng)前的作用域保存在執(zhí)行上下文中嗤堰。所以它們的關(guān)系只是存儲關(guān)系。
再談變量查找（ResolveBinding）：
結(jié)合作用域和執(zhí)行上下文度宦，我們再來看下變量查找的過程踢匣。其實第一步不是到作用域里面找 Environment Record，而是先從當(dāng)前的執(zhí)行上下文中找保存的作用域（對象）戈抄，然后再是通過作用域鏈向上查找變量符糊。而且同一個執(zhí)行上下文保存的作用域（對象）是可變的，當(dāng)代碼在同一個執(zhí)行上下文中執(zhí)行的時候呛凶，如果碰到有必要生成一個新作用域的時候男娄，這個新的作用域會被添加到作用域鏈的頭部，然后執(zhí)行上下文就保存的作用域?qū)ο缶透鲁蛇@個新的作用域。等這個新的作用域生命周期完成后模闲，作用域鏈又會恢復(fù)到之前的狀況建瘫，然后執(zhí)行上下文保存的作用域也會恢復(fù)成之前的。示例：
this
稍微提下尸折，我看到網(wǎng)上有把執(zhí)行上下文等同于 this 的文章啰脚，其實 this 的值是通過當(dāng)前執(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().
我接下來會要總結(jié)函數(shù)作為普通函數(shù)和作為構(gòu)造函數(shù)被調(diào)用時的區(qū)別橄浓，那個時候應(yīng)該會對 this 有更深入的解釋。
