[[384723]]

本文轉(zhuǎn)載自微信公眾號「小鹿動畫學(xué)編程」，作者小鹿   。轉(zhuǎn)載本文請聯(lián)系小鹿動畫學(xué)編程公眾號。

想必大伙兒看到本期的標(biāo)題很有疑惑，為什么是簡而不單，單而不簡的執(zhí)行上下文呢?我來先解釋一下，對于 javaScript 上一些抽象的概念，我們可以把它講的非常復(fù)雜，也可以把它講的極其簡單，更可以把它講的既復(fù)雜又簡單。

嗯～ 最近重新回顧了這些抽象的概念，發(fā)現(xiàn)有些概念之前并不能很好的融會貫通，所以把這些相對抽象難以理解的概念作為幾期文章來寫。

我個人覺得要想更好的理解抽象概念，不得不借助可視化的圖像減少作者和讀者之間的理解力和理解差錯。所以，不用擔(dān)心，這篇文章小鹿會通過加入更多的圖片深入淺出的解釋這些抽象的概念。

1、執(zhí)行上下文

1.1 JavaScript 引擎

說到執(zhí)行上下文，不得不先扯扯 JavaScript 引擎，JavaScript 引擎是什么?考慮到這篇文章不專門寫 JavaScript 引擎，可以自己谷歌一下。說白了，JavaScript 引擎就是用來「解釋」、「編譯」和「執(zhí)行」JavaScript 代碼的。

畢竟開發(fā)人員寫的 JS 代碼只能夠讓開發(fā)者認(rèn)得出來，交給計算機(jī)，由于計算機(jī)只識別二進(jìn)制，所以中間需要進(jìn)行一系列的解釋和轉(zhuǎn)化才能看懂執(zhí)行這些 JavaScript 代碼。

1.2 執(zhí)行棧 (Execution stack)

小鹿注：保證 JavaScript 代碼的執(zhí)行"順序"。

JavaScript 引擎既然可以執(zhí)行 JS 的代碼，那么是按照什么順序執(zhí)行的，又是怎么保證這些順序而不被所打亂的。先看一段簡單的代碼：

var foo2 = function () { 
  console.log('foo2'); 
} 
 
var foo1 = function () { 
  console.log('foo1'); 
  foo2() 
  console.log('foo3') 
} 
 
foo1(); // 輸出：“foo1  foo2  foo3” 

通過上述代碼片段的執(zhí)行，輸出的順序為'foo1 foo2 foo3'。

代碼執(zhí)行，foo1()函數(shù)先執(zhí)行，首先輸出'foo1'，遇到 foo2() 函數(shù)的執(zhí)行命令，將執(zhí)行權(quán)交給 foo2， foo2 函數(shù)體執(zhí)行，輸出'foo2'。foo2 執(zhí)行完畢后，將執(zhí)行權(quán)交回 foo1 函數(shù)，最后輸出'foo3'

我們可以找出上述代碼執(zhí)行的規(guī)律，先執(zhí)行的函數(shù)，會在最后退出，后執(zhí)行的函數(shù)，先執(zhí)行完畢。這個執(zhí)行順序不就是“棧”的“先進(jìn)后出”``“后進(jìn)先出”的結(jié)構(gòu)嘛。JavaScript 引擎將其這種執(zhí)行結(jié)構(gòu)稱為「執(zhí)行?！梗糜诒ＷC JavaScript 代碼的順序。

1.3 執(zhí)行上下文(Exception Context)

小鹿注：將執(zhí)行的代碼"模塊化" —— 執(zhí)行上下文的分類。

什么是執(zhí)行上下文?雖然我們在“執(zhí)行上下文”詞義上很難直接理解，但是它具體代表的是什么，是很容易理解的，下面我把“執(zhí)行上下文”的抽象概念進(jìn)行具體化。

上述我們已經(jīng)解釋了 JavaScript 引擎是使用執(zhí)行棧來保證代碼的執(zhí)行順序的，但是執(zhí)行過程中需要涉及到一些變量的作用范圍界定(作用域)、閉包等復(fù)雜情況，我們需要 JavaScript 引擎引入一種機(jī)制來解決這些看起來復(fù)雜的問題，所以「執(zhí)行上下文」的概念產(chǎn)生了。

但是，執(zhí)行上下文是什么?這不得不讓我想起組件的模塊化開發(fā)，之前的一個網(wǎng)頁應(yīng)用代碼從上到下一個文件寫下來幾千行代碼，難以閱讀、難以維護(hù)，所以有了后來的模塊化開發(fā)。每個模塊都有自己的功能，都有屬于自己的局部變量和樣式。

我們可以理解為 JavaScript 引擎為了更好的解釋和執(zhí)行代碼，所以引入類似于像組件模塊的“執(zhí)行上下文”的概念用于管理運(yùn)行時代碼的復(fù)雜度。

2、執(zhí)行上下文的分類

上述我們把抽象的“執(zhí)行上下文”類似于“模塊”的具體概念便于理解。當(dāng)然，執(zhí)行上下文也就是所謂的“模塊”也有不同的分類，在這里具體只展開兩種，「全局執(zhí)行上下文」和「局部執(zhí)行上下文」。

2.1 全局執(zhí)行上下文(Global Exception Context)

全局上下文這個“模塊”由兩部分組成，「全局對象」和「this」。

下圖是全局執(zhí)行上下文的最基本形式。包含一個 window 對象，以及一個 this 變量，而這個 this 變量是指向 window 對象的，如最右圖的打印結(jié)果。

從這里我們看出，執(zhí)行上下文可以理解為是一個在內(nèi)存中的「對象和變量」集合的模塊(或者說是片段)，這也是為什么我們可以把它看作類似“模塊”的原因(除此之外還有其他作用)

小鹿注：為了便于理解，定義是我自己總結(jié)的，如有欠缺歡迎指出～

2.2 局部執(zhí)行上下文

局部執(zhí)行上下文和全局執(zhí)行上下文類似，但不完全相同，在函數(shù)局部執(zhí)行上下文中，需要注意的有以下兩點：

• 函數(shù)傳入的參數(shù)會作為局部執(zhí)行上下文的變量來存儲
• 局部上下文有一個 arguments 參數(shù)對象(參考)局部執(zhí)行上下文內(nèi)容會在下面的兩個階段中詳細(xì)講到。

3、執(zhí)行上下文兩個階段

無論是全局執(zhí)行上下文還是局部的執(zhí)行上下文，都會經(jīng)歷兩個階段，分別是「創(chuàng)建」和「執(zhí)行」。

如下我們有一段代碼：

var name = "小鹿"; 
var age = 23; 
 
function getInfo(){ 
  return { 
    name: name, 
    age: age 
  }; 
} 

3.1 創(chuàng)建階段(Creation)

創(chuàng)建階段要完成的事情，如下：

• 在堆內(nèi)存中創(chuàng)建全局對象(global object)—— 瀏覽器環(huán)境是 windows，Node 環(huán)境是 Global
• 讓 this 變量指向這個全局對象
• 設(shè)置當(dāng)前執(zhí)行上下文中「變量和函數(shù)」的內(nèi)存空間
• 將聲明的變量加入內(nèi)存中(同時掛在到全局對象上)，為變量賦值 undifined，函數(shù)存儲的是字符串形式

小鹿注：左 (1) 圖執(zhí)行的代碼，左 (2) 圖創(chuàng)建階段完成后的執(zhí)行上下文內(nèi)存中狀態(tài)，右 (1) 創(chuàng)建階段全局對象的狀態(tài)。

JavaScript 引擎在執(zhí)行代碼之前，先在堆內(nèi)存中創(chuàng)建全局執(zhí)行上下文，生成全局對象(global object)，然后讓 this 變量指向這個變量。JavaScript 發(fā)現(xiàn)代碼中聲明的兩個變量 name 和 age，然后在全局執(zhí)行上下文中申請內(nèi)存空間，將變量存儲到該內(nèi)存空間內(nèi)，然后為該變量賦值 undefined，函數(shù)就以字符串的形式存儲在內(nèi)存中。

小鹿注：在創(chuàng)建階段為變量聲明指定默認(rèn)值(undefined)的過程稱為「變量提升」。

3.2 執(zhí)行階段(Execution)

全局執(zhí)行上下文創(chuàng)建完成之后，開始由創(chuàng)建狀態(tài)(Creation)變?yōu)閳?zhí)行狀態(tài)( Execution)。JavaScript 引擎開始逐行運(yùn)行和執(zhí)行代碼，并為在創(chuàng)建階段放入內(nèi)存的變量賦予值。

小鹿注：左 (1) 圖執(zhí)行的代碼，左 (2) 圖執(zhí)行階段完成后的執(zhí)行上下文內(nèi)存中狀態(tài)，右 (1) 執(zhí)行階段全局對象的狀態(tài)。

局部執(zhí)行上下文和全局執(zhí)行上下文的創(chuàng)建和執(zhí)行過程是一模一樣的。但是全局執(zhí)行上下文創(chuàng)建一次，而函數(shù)局部執(zhí)行上下文是隨著函數(shù)的每次調(diào)用都要創(chuàng)建一個局部執(zhí)行上下文。

還是上述例子，執(zhí)行結(jié)果如下：

var name = "小鹿"; 
var age = 23; 
 
function getInfo(name){ 
  console.log(name); 
  return { 
    name: name, 
    age: age 
  }; 
} 
 
getInfo(name); 

函數(shù)局部上下文執(zhí)行狀態(tài)如下：

小鹿注：由于函數(shù)中沒有定義新的變量，所以在這里沒有變量提升。

我們了解了什么是函數(shù)局部上下文，當(dāng)函數(shù)局部上下文執(zhí)行完畢之后，就會執(zhí)行出棧操作，將執(zhí)行權(quán)交給父級執(zhí)行上下文(可能是局部執(zhí)行上下文，也可能是全局執(zhí)行上下文)，上述 getInfo 函數(shù)執(zhí)行完畢的狀態(tài)如下圖所示。

此時的函數(shù)執(zhí)行完畢，局部執(zhí)行上下文出棧銷毀，執(zhí)行權(quán)交給全局執(zhí)行上下文繼續(xù)執(zhí)行其他代碼。

由于 JavaScript 是單線程的，一次只能執(zhí)行一個任務(wù)，為了方便大伙兒理解，左(3)圖 是執(zhí)行棧的調(diào)用情況。當(dāng)然，我們也可以發(fā)現(xiàn)，左(2)圖是以嵌套的方式來模擬執(zhí)行棧的操作，每一個嵌套選項都是堆棧中一個新的執(zhí)行上下文。

4、小結(jié)

執(zhí)行上下文在 JavaScript 中是一個非常重要的概念，在接下幾期的進(jìn)階文章中，作用域、作用域、閉包、this等概念，都會與本期文章內(nèi)容掛鉤。