JavaScript中執(zhí)行上下文的作用是什么

這篇文章主要講解了“JavaScript中執(zhí)行上下文的作用是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中執(zhí)行上下文的作用是什么”吧！

JavaScript標(biāo)準(zhǔn)把一段代碼(包括函數(shù))執(zhí)行所需的所有信息定義為“執(zhí)行上下文”(可理解為當(dāng)前代碼的執(zhí)行環(huán)境，同一個(gè)函數(shù)在不同的環(huán)境中執(zhí)行，會(huì)因訪問的數(shù)據(jù)不同產(chǎn)生不一樣的結(jié)果)，其是執(zhí)行的基礎(chǔ)設(shè)施。執(zhí)行上下文包含的內(nèi)容有很多，下面從類型、包含內(nèi)容、生命周期、執(zhí)行過程、結(jié)論來進(jìn)行闡述。

10.1 類型

執(zhí)行上下文主要分為三類：全局執(zhí)行上下文、函數(shù)執(zhí)行上下文、eval函數(shù)執(zhí)行上下文。

全局執(zhí)行上下文

當(dāng)JavaScript執(zhí)行全局代碼的時(shí)候，會(huì)編譯全局代碼并創(chuàng)建全局執(zhí)行上下文，而且在整個(gè)頁面的生存周期內(nèi)，全局執(zhí)行上下文只有一份。

函數(shù)執(zhí)行上下文

當(dāng)調(diào)用一個(gè)函數(shù)的時(shí)候，函數(shù)體內(nèi)的代碼會(huì)被編譯，并創(chuàng)建函數(shù)執(zhí)行上下文，一般情況下，函數(shù)執(zhí)行結(jié)束之后，創(chuàng)建的函數(shù)執(zhí)行上下文會(huì)被銷毀。

eval執(zhí)行上下文

當(dāng)使用eval函數(shù)的時(shí)候，eval代碼也會(huì)被編譯，并創(chuàng)建執(zhí)行上下文。

10.2 包含內(nèi)容

執(zhí)行上下文在不同的版本中定義不同，《重學(xué)前端》中對此進(jìn)行了總結(jié)，目前主要有三個(gè)版本：

執(zhí)行上下文在ES3中，包含三個(gè)部分。

• scope：作用域，也常常被叫做作用域鏈。

• variable object：變量對象，用于存儲(chǔ)變量的對象。

• this value：this值。

在ES5中，我們改進(jìn)了命名方式，把執(zhí)行上下文最初的三個(gè)部分改為下面這個(gè)樣子。

• lexical  environment：詞法環(huán)境，當(dāng)獲取變量時(shí)使用。(通過let、const、with()、try-catch創(chuàng)建的變量存在詞法環(huán)境中)

• variable environment：變量環(huán)境，當(dāng)聲明變量時(shí)使用。(通過var聲明或function(){}聲明的變量存在變量環(huán)境中)

• this value：this值。

在ES2018中，執(zhí)行上下文又變成了這個(gè)樣子，this值被歸入lexical environment，但是增加了不少內(nèi)容。

• lexical environment：詞法環(huán)境，當(dāng)獲取變量或者this值時(shí)使用。

• variable environment：變量環(huán)境，當(dāng)聲明變量時(shí)使用

• code evaluation state：用于恢復(fù)代碼執(zhí)行位置。

• Function：執(zhí)行的任務(wù)是函數(shù)時(shí)使用，表示正在被執(zhí)行的函數(shù)。

• ScriptOrModule：執(zhí)行的任務(wù)是腳本或者模塊時(shí)使用，表示正在被執(zhí)行的代碼。

• Realm：使用的基礎(chǔ)庫和內(nèi)置對象實(shí)例。

• Generator：僅生成器上下文有這個(gè)屬性，表示當(dāng)前生成器。

10.3 執(zhí)行上下文生命周期

在執(zhí)行上下文生命周期部分(將按照ES3階段的內(nèi)容進(jìn)行介紹，因?yàn)樽晕腋杏X后續(xù)定義的名詞內(nèi)容雖然更全面，但背起來確實(shí)不是很容易)，分為創(chuàng)建階段和執(zhí)行階段兩個(gè)階段，每個(gè)階段負(fù)責(zé)不同的事情。(注：，每一部分都是一個(gè)問題，詳細(xì)解釋看后續(xù)百題斬。)

創(chuàng)建階段

創(chuàng)建階段主要負(fù)責(zé)生成變量對象、建立作用域鏈以及確定this指向。

代碼執(zhí)行階段

創(chuàng)建完成之后，就會(huì)開始執(zhí)行代碼，這個(gè)時(shí)候，會(huì)完成變量賦值，函數(shù)引用，以及執(zhí)行其他代碼。

10.4 代碼執(zhí)行過程

百題斬【008-009】介紹了代碼和函數(shù)的執(zhí)行過程，但是這個(gè)介紹只是從宏觀方面進(jìn)行介紹，并沒有進(jìn)行詳細(xì)的介紹，下面將從調(diào)用棧這個(gè)角度詳細(xì)闡述一下代碼的執(zhí)行過程。

1. 創(chuàng)建 全局上下文 (global EC)。將其壓入棧底;

2. 全局執(zhí)行上下文 (caller) 逐行 自上而下 執(zhí)行。遇到函數(shù)時(shí)，函數(shù)執(zhí)行上下文 (callee) 被push到執(zhí)行棧頂層;

3. 函數(shù)執(zhí)行上下文被激活，成為 active EC, 開始執(zhí)行函數(shù)中的代碼，caller 被掛起;

4. 函數(shù)執(zhí)行完后，callee 被pop移除出執(zhí)行棧，控制權(quán)交還全局上下文 (caller)，繼續(xù)執(zhí)行;

下面將舉一個(gè)例子來闡述該執(zhí)行過程。

var a = 1; function f1() {     // …… }  function f2() {     f1();     // …… }  f2();

上述代碼的調(diào)用棧如下所示：

1. 首先創(chuàng)建全局執(zhí)行上下文，并將全局執(zhí)行上下文壓入棧底;其中變量a、函數(shù)f1和f2都將被保存在全局執(zhí)行上下文的變量環(huán)境中;

2. 全局執(zhí)行上下文開始執(zhí)行，變量a被賦值為1，當(dāng)調(diào)用函數(shù)f2時(shí)，會(huì)創(chuàng)建對應(yīng)的函數(shù)執(zhí)行上下文并壓入調(diào)用棧，在函數(shù)f2的執(zhí)行上下文被創(chuàng)建好后，將進(jìn)入代碼執(zhí)行階段;

3. 函數(shù)f2執(zhí)行過程中會(huì)調(diào)用函數(shù)f1，創(chuàng)建對應(yīng)的函數(shù)執(zhí)行上下文并壓入調(diào)用棧;f1進(jìn)行執(zhí)行階段;

4. f1函數(shù)返回時(shí)，該函數(shù)的執(zhí)行上下文從棧頂彈出;

5. 緊接著f2函數(shù)返回，f2函數(shù)對應(yīng)的執(zhí)行上下文也從棧頂彈出;

6. 至此代碼執(zhí)行關(guān)閉，當(dāng)完畢頁面的時(shí)候全局執(zhí)行上下文銷毀。

10.5 結(jié)論

了解了執(zhí)行上下文，需要記住一些結(jié)論性的東西

1. 在調(diào)用棧中只有棧頂?shù)纳舷挛奶幱趫?zhí)行中，其他上下文需要等待;

2. 全局上下文只有唯一的一個(gè)，它在瀏覽器關(guān)閉時(shí)出棧;

3. 函數(shù)的執(zhí)行上下文的個(gè)數(shù)沒有限制;

4. 每次某個(gè)函數(shù)被調(diào)用，就會(huì)有個(gè)新的執(zhí)行上下文為其創(chuàng)建，并把該執(zhí)行上下文壓入調(diào)用棧，然后JavaScript引擎開支執(zhí)行函數(shù)代碼，即使是調(diào)用的自身函數(shù)，也是如此;

5. 當(dāng)前函數(shù)執(zhí)行完畢后，JavaScript引擎會(huì)將該函數(shù)的執(zhí)行上下文彈出棧;

6. 當(dāng)分配的調(diào)用?？臻g被占滿時(shí)，會(huì)引發(fā)“堆棧溢出”問題。

感謝各位的閱讀，以上就是“JavaScript中執(zhí)行上下文的作用是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript中執(zhí)行上下文的作用是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！