摘要：不包括作為其嵌套函數(shù)的被解析的源代碼。作用域鏈當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。棧結(jié)構(gòu)最頂層的執(zhí)行環(huán)境稱為當(dāng)前運(yùn)行的執(zhí)行環(huán)境，最底層是全局執(zhí)行環(huán)境。無限制函數(shù)上下文?；蛘邟伋霎惓Ｍ顺鲆粋€(gè)執(zhí)行環(huán)境。

前言

其實(shí)規(guī)范這東西不是給人看的，它更多的是給語言實(shí)現(xiàn)者提供參考。但是當(dāng)碰到問題找不到答案時(shí)，規(guī)范往往能提供想要的答案 。偶爾讀一下能夠帶來很大的啟發(fā)和思考，如果只讀一章 Javascript 規(guī)范，大神們覺得非第10章莫屬。

我們來試試看，這次選用的是 ECMA2.2的 5.1 版，整個(gè)規(guī)范才200頁， 而第10章共10頁，可以感受到 Javascript 的精簡，目前的版本加了太多 ES6 的東西，讓人望而生畏。

資料地址：http://www.ecma-international...

任務(wù)

閱讀 ECMA262 5.1 第10章 Executable Code and Execution Contexts (可執(zhí)行代碼與執(zhí)行上下文)
你能針對(duì)這章內(nèi)容提出問題嗎？ 即知道答案找出問題。
你能使用圖來更形象地表達(dá)文章內(nèi)容嗎？

開始我們的探險(xiǎn)之旅

原汁原味 ECMAScript 5.1 英文版
平易近人 ECMAScript 5.1 中文版

可執(zhí)行代碼類型

像 v8 等 JavaScript 引擎都是按照 ecma-262 的規(guī)范來實(shí)現(xiàn)的，JavaScript 引擎在解釋 JavaScript 代碼時(shí)，將可執(zhí)行代碼分為了三種。分別是：

全局代碼

代碼加載時(shí)首先進(jìn)入的環(huán)境。
例如加載外部的 JavaScript 文件或者本地  標(biāo)簽內(nèi)的代碼。
但不包括任何 function 體內(nèi)的代碼。

函數(shù)代碼

是指作為 function 被解析的源代碼。
不包括作為其嵌套函數(shù)的 function 被解析的源代碼。
因?yàn)?JavaScript 函數(shù)中還可以嵌套函數(shù)，因此這也是三種可執(zhí)行代碼中最復(fù)雜的一種。

eval代碼

指的是傳遞給 eval 內(nèi)置函數(shù)的代碼。

注：不了解 eval（string） 的小伙伴，請(qǐng)參考 eval() - JavaScript | MDN

當(dāng) JavaScript 引擎開始執(zhí)行（進(jìn)入）一段可執(zhí)行代碼之后，會(huì)生成一個(gè)執(zhí)行環(huán)境（Execution Context)，或執(zhí)行上下文。引擎用執(zhí)行環(huán)境來維護(hù)執(zhí)行當(dāng)前代碼所需要的變量聲明、this指向等。

詞法環(huán)境 (Lexical Environments)

詞法環(huán)境 是執(zhí)行環(huán)境的三個(gè)組成的狀態(tài)之一。

官方解釋：詞法環(huán)境是用來定義特定變量和函數(shù)標(biāo)識(shí)符的。一個(gè)詞法環(huán)境由一個(gè)環(huán)境記錄項(xiàng)和可能為空的外部詞法環(huán)境引用構(gòu)成。

通常詞法環(huán)境會(huì)與 ECMAScript 代碼諸如 函數(shù)聲明（FunctionDeclaration）、WithStatement 或者 TryStatement 的 Catch 塊這樣的特定句法結(jié)構(gòu)相聯(lián)系，且類似代碼每次執(zhí)行都會(huì)有一個(gè)新的詞法環(huán)境被創(chuàng)建出來。
外部詞法環(huán)境引用 用于表示詞法環(huán)境的邏輯嵌套關(guān)系模型。（內(nèi)部）詞法環(huán)境的外部引用是邏輯上包含內(nèi)部詞法環(huán)境的詞法環(huán)境。外部詞法環(huán)境自然也可能有多個(gè)內(nèi)部詞法環(huán)境。
例如，如果一個(gè) FunctionDeclaration 包含兩個(gè)嵌套的 FunctionDeclaration，那么每個(gè)內(nèi)嵌函數(shù)的詞法環(huán)境都是外部函數(shù)本次執(zhí)行所產(chǎn)生的詞法環(huán)境。

環(huán)境記錄項(xiàng) 又可以分為兩種聲明式環(huán)境記錄項(xiàng)和對(duì)象式環(huán)境記錄項(xiàng)。

聲明式環(huán)境記錄項(xiàng) 用于標(biāo)識(shí)標(biāo)識(shí)符和函數(shù)聲明、變量聲明、catch 語句等語法元素的綁定。對(duì)象式環(huán)境記錄項(xiàng) 主要用于定義那些將標(biāo)識(shí)符與具體對(duì)象的屬性綁定的語法元素。

咬文嚼字，不好理解？

通俗點(diǎn)講： 詞法環(huán)境就是 JavaScript 引擎在執(zhí)行代碼過程中用來標(biāo)識(shí)函數(shù)聲明、變量聲明這一類的。我們每次聲明一個(gè)函數(shù)，或者使用 with 、catch語句的時(shí)候，就會(huì)有新的詞法環(huán)境被創(chuàng)建出來。全局詞法環(huán)境的外部詞法環(huán)境就是空的，因?yàn)樗呀?jīng)是最外層的詞法環(huán)境了。

我們用個(gè)例子來說明詞法環(huán)境：

var x = 10;
function foo(y){
    var z = 30;
    function bar(q){
        return x+y+z+q;
    }
    return bar;
}
var bar = foo(20);
bar(40);

詞法環(huán)境的運(yùn)算

給出一個(gè)標(biāo)識(shí)符字符串，首先在當(dāng)前的詞法環(huán)境內(nèi)尋找，如果存在，返回引用的標(biāo)識(shí)符字符串，如果不存在，再在當(dāng)前詞法環(huán)境的外部詞法環(huán)境尋找。

咦，怎么感覺和作用域鏈的概念很相似？他們有什么關(guān)系嗎？

執(zhí)行環(huán)境 當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)時(shí)，函數(shù)的環(huán)境會(huì)被推入一個(gè)環(huán)境棧中。當(dāng)函數(shù)執(zhí)行之后，環(huán)境棧將其彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境。

作用域鏈 當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈。其用途是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。一個(gè)包含環(huán)境的變量對(duì)象到另一個(gè)包含環(huán)境的變量對(duì)象，最后到全局執(zhí)行環(huán)境的變量對(duì)象。

函數(shù)只要被創(chuàng)建，就會(huì)有自己的“地盤”，有自己的作用域。但是只有函數(shù)被執(zhí)行的時(shí)候，才會(huì)有自己的執(zhí)行環(huán)境。函數(shù)執(zhí)行完畢的時(shí)候，執(zhí)行環(huán)境就會(huì)退出。而且一個(gè)作用域下可能存在多個(gè)執(zhí)行環(huán)境，比如閉包。

小總結(jié)

1、詞法環(huán)境分為了兩部分：環(huán)境記錄項(xiàng)和外部詞法環(huán)境。
2、環(huán)境記錄項(xiàng)根據(jù)綁定的 ECMA 腳本元素的不同也分為了兩部分。
3、函數(shù)聲明或者使用 with 、catch語句時(shí)，就會(huì)有新的詞法環(huán)境被創(chuàng)建出來。

執(zhí)行環(huán)境（Execution Contexts）

如果我們的 JavaScript 程序有各種函數(shù)，函數(shù)之間還有嵌套的情況，那 JavaScript 引擎怎么解釋各種聲明和執(zhí)行上下文哪？

當(dāng)控制器轉(zhuǎn)入 ECMA 腳本的可執(zhí)行代碼時(shí)，上文已經(jīng)說了有三種可執(zhí)行代碼，不管進(jìn)入哪一種控制器都會(huì)進(jìn)入一個(gè)執(zhí)行環(huán)境。多個(gè)執(zhí)行環(huán)境在邏輯上形成一個(gè)棧結(jié)構(gòu)。棧結(jié)構(gòu)最頂層的執(zhí)行環(huán)境稱為當(dāng)前運(yùn)行的執(zhí)行環(huán)境，最底層是全局執(zhí)行環(huán)境。

用一張圖解釋

因?yàn)?JS 引擎被實(shí)現(xiàn)為單線程，也就是同一時(shí)間只能發(fā)生一件事情，其他的行為就會(huì)依次排隊(duì)。

你可以有任意多個(gè)函數(shù)執(zhí)行環(huán)境，每次調(diào)用函數(shù)創(chuàng)建一個(gè)新的執(zhí)行環(huán)境，會(huì)創(chuàng)建一個(gè)私有作用域，函數(shù)內(nèi)部聲明的任何變量都不能在當(dāng)前函數(shù)作用域外部直接訪問。函數(shù)能訪問當(dāng)前執(zhí)行環(huán)境外面的變量聲明，但在外部執(zhí)行環(huán)境不能訪問內(nèi)部的變量/函數(shù)聲明。

小總結(jié)

關(guān)于執(zhí)行棧（調(diào)用棧）

單線程。
同步執(zhí)行。
一個(gè)全局上下文。
無限制函數(shù)上下文。
每次函數(shù)被調(diào)用創(chuàng)建新的執(zhí)行上下文，包括調(diào)用自己。
return 或者拋出異常退出一個(gè)執(zhí)行環(huán)境。

我們用一個(gè)具體的函數(shù)理解：

function foo(i) {
  if (i < 0) return;
  console.log("begin:" + i);
  foo(i - 1);
  console.log("end:" + i);
}
foo(2);

// 輸出:

// begin:2
// begin:1
// begin:0
// end:0
// end:1
// end:2

代碼的執(zhí)行流程進(jìn)入內(nèi)部函數(shù)，創(chuàng)建一個(gè)新的執(zhí)行上下文并把它壓入執(zhí)行棧的頂部。瀏覽器總會(huì)執(zhí)行位于棧頂?shù)膱?zhí)行上下文，一旦當(dāng)前上下文函數(shù)執(zhí)行結(jié)束，它將被從棧頂彈出，并將上下文控制權(quán)交給當(dāng)前的棧。 這樣，堆棧中的上下文就會(huì)被依次執(zhí)行并且彈出堆棧，直到回到全局的上下文。

執(zhí)行環(huán)境包含所有用于追蹤與其相關(guān)的代碼的執(zhí)行進(jìn)度的狀態(tài)。精確地說，每個(gè)執(zhí)行環(huán)境包含如下表列出的組件。

執(zhí)行環(huán)境的三個(gè)狀態(tài)

組件	作用目的
詞法環(huán)境	指定一個(gè)詞法環(huán)境對(duì)象，用于解析該執(zhí)行環(huán)境內(nèi)的代碼創(chuàng)建的標(biāo)識(shí)符引用。
變量環(huán)境	指定一個(gè)詞法環(huán)境對(duì)象，其環(huán)境數(shù)據(jù)用于保存由該執(zhí)行環(huán)境內(nèi)的代碼通過 變量表達(dá)式 和 函數(shù)表達(dá)式 創(chuàng)建的綁定。
this 綁定	指定該執(zhí)行環(huán)境內(nèi)的 ECMA 腳本代碼中 this 關(guān)鍵字所關(guān)聯(lián)的值。

當(dāng)創(chuàng)建一個(gè)執(zhí)行環(huán)境時(shí)，其詞法環(huán)境組件和變量環(huán)境組件最初是同一個(gè)值。在該執(zhí)行環(huán)境相關(guān)聯(lián)的代碼的執(zhí)行過程中，變量環(huán)境組件永遠(yuǎn)不變，而詞法環(huán)境組件有可能改變。變量環(huán)境的不變和詞法環(huán)境的可能改變都是指引用的改變。

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

解釋執(zhí)行全局代碼或使用 eval 函數(shù)輸入的代碼會(huì)創(chuàng)建并進(jìn)入一個(gè)新的執(zhí)行環(huán)境。每次調(diào)用 ECMA 腳本代碼定義的函數(shù)也會(huì)建立并進(jìn)入一個(gè)新的執(zhí)行環(huán)境，即便函數(shù)是自身遞歸調(diào)用的。
每一次 return 都會(huì)退出一個(gè)執(zhí)行環(huán)境。拋出異常也可退出一個(gè)或多個(gè)執(zhí)行環(huán)境。
當(dāng)控制流進(jìn)入一個(gè)執(zhí)行環(huán)境時(shí)，會(huì)設(shè)置該執(zhí)行環(huán)境的 this 綁定組件，定義變量環(huán)境和初始詞法環(huán)境，并執(zhí)行聲明式綁定初始化過程。以上這些步驟的嚴(yán)格執(zhí)行方式由進(jìn)入的代碼的類型決定。

進(jìn)入全局代碼

執(zhí)行以下步驟：

1、將變量環(huán)境設(shè)置為 全局環(huán)境 。 
2、將詞法環(huán)境設(shè)置為 全局環(huán)境 。
3、將 this 綁定設(shè)置為 全局對(duì)象 。
4、使用全局代碼執(zhí)行聲明式綁定初始化化步驟。

進(jìn)入函數(shù)代碼

當(dāng)控制流根據(jù)一個(gè)函數(shù)對(duì)象 F、調(diào)用者提供的 thisArg 以及調(diào)用者提供的 argumentList，進(jìn)入函數(shù)代碼的執(zhí)行環(huán)境時(shí)，執(zhí)行以下步驟

如果函數(shù)代碼是嚴(yán)格模式下的代碼，設(shè) this 綁定 為 thisArg。
否則如果 thisArg 是 null 或 undefined，則設(shè) this 綁定 為全局對(duì)象。
否則如果 Type(thisArg) 的結(jié)果不為 Object，則設(shè) this 綁定 為 ToObject(thisArg)。
否則設(shè) this 綁定 為 thisArg。
以 F 的 [[Scope]] 內(nèi)部屬性為參數(shù)調(diào)用 NewDeclarativeEnvironment(新建聲明式詞法環(huán)境)，并令 localEnv 為調(diào)用的結(jié)果。
設(shè) 詞法環(huán)境組件 為 localEnv。
設(shè) 變量環(huán)境組件 為 localEnv。
令 code 為 F 的 [[Code]] 內(nèi)部屬性的值。
使用函數(shù)代碼 code 和 argumentList 執(zhí)行聲明式綁定初始化化步驟。

我們用偽代碼表示一下：

if(是 嚴(yán)格模式) {
    this = thisArg
} else if(thisArg === null || thisArg === undefined) {
    this = window
} else if(typeof thisArg != "object") {
    this = Object(thisArg)
} else {
    this = thisArg
}

哎，這里的 thisArg 指的是什么？上文說了 thisArg 來自于函數(shù)的調(diào)用者。

這里代表函數(shù)的 apply，call，bind 等設(shè)置 this 綁定的參數(shù)：

通過 call 或者 apply 調(diào)用函數(shù)時(shí)，thisArg 的值比較明顯，為傳入的第一個(gè)參數(shù)。

Function.prototype.apply (thisArg, argArray)

Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )

當(dāng)然 thisArg 還有其他的可能，具體的可以參考這篇文章 Javascript this 解析

對(duì)上面的偽代碼做一下解釋：

嚴(yán)格模式: 也就是說，在嚴(yán)格模式下，this 只能為 thisArg，而當(dāng) thisArg 為 undefined 時(shí)，this 就是 undefined ，而不是 window。

非嚴(yán)格模式: 如果 thisArg 是 null (如 fun.call(null)) 或 undefined （直接調(diào)用函數(shù)），則 this 為全局對(duì)象，瀏覽器里就是 window。

否則，如果 傳入了 thisArg, 但不是個(gè)對(duì)象，則把它轉(zhuǎn)為對(duì)象，并賦給 this，比如，當(dāng) fun.call("hhh") 時(shí)，打印 fun 內(nèi)的 this 為

String {0: "h", 1: "h", 2: "h", length: 3, [[PrimitiveValue]]: "hhh"}

否則 ，也就是僅剩的一種情況，顯式的傳入了一個(gè)對(duì)象作為 thisArg 參數(shù)的情況下，設(shè) this 綁定為 thisArg。

聲明式綁定初始化

每個(gè)執(zhí)行環(huán)境都有一個(gè)關(guān)聯(lián)的 變量環(huán)境。當(dāng)在一個(gè)執(zhí)行環(huán)境下評(píng)估一段 ECMA 腳本時(shí)，變量和函數(shù)定義會(huì)以綁定的形式添加到這個(gè) 變量環(huán)境 的環(huán)境記錄中。對(duì)于函數(shù)代碼，參數(shù)也同樣會(huì)以綁定的形式添加到這個(gè) 變量環(huán)境 的環(huán)境記錄中。

總結(jié)

ECMAScript 代碼的執(zhí)行由運(yùn)行環(huán)境來完成。不同的運(yùn)行環(huán)境可能采取不同的執(zhí)行方式，但基本的流程是相同的。如瀏覽器在解析 HTML 頁面中遇到