深入理解JavaScript (1) —— 執行上下文與執行上下文棧

lidashuang 發布于2019-08-22 11:04 / 2365人閱讀

摘要：執行上下文棧通過上文我們知道預處理全局代碼時，會產生一個執行上下文環境。實現這一壓棧出棧過程的機制就是執行上下文棧。

JavaScript的解析(預處理)與執行

詳見：http://www.cnblogs.com/foodoi...

執行上下文

JavaScript在執行一個“代碼段”之前，即解析(預處理)階段，會先進行一些“準備工作”，例如掃描JS中var定義的變量、函數名等，進而生成執行上下文。

JS中的“代碼段”分為三種：全局代碼段、函數體代碼段、eval代碼段。（注：ES6之前，JS不存在“代碼塊”作用域的概念，即除了函數之外所有“{}”里的代碼，都屬于全局作用域）

全局代碼段“準備工作”包括：

1.變量、函數表達式 —— 變量聲明，默認賦值為undefined；
2.this —— 賦值；
3.函數聲明 —— 賦值。

函數體代碼段“準備工作”包括：

1.變量、函數表達式 —— 變量聲明，默認賦值為undefined；
2.this —— 賦值；
3.函數聲明 —— 賦值；
4.參數 —— 賦值；
5.argument —— 賦值；
6.自由變量的取值作用域 —— 賦值。

evel()不推薦使用，所以不再分析evel代碼段。

至此，“執行上下文”的定義可以通俗化為 —— 在執行代碼段之前(預處理階段)，把將要用到的所有變量都事先拿出來，有的直接賦值，有的先用undefined占個空，這些變量共同組成的詞法環境，即為執行上下文環境。

在執行js代碼時，會有數不清的函數調用次數，會產生許多個上下文環境。這么多上下文環境該如何管理，以及如何銷毀并釋放內存呢？這就需要“執行上下文棧”來解釋了。

執行上下文棧

通過上文我們知道：預處理全局代碼時，會產生一個執行上下文環境。每次調用函數的預處理時，都會產生一個執行上下文環境。其實，當這個函數調用完成時，它的執行上下文環境以及其中的數據就會被銷毀，執行過程再重新回到全局上下文環境。同一時刻，處于活動狀態的執行上下文環境只有一個。

實現這一壓棧出棧過程的機制就是“執行上下文棧”。

執行上下文棧的壓棧出棧過程實例代碼：

var a = 10,                 //1.進入全局上下文環境
    fn,
    bar = function(x) {
        var b = 5;
        fn(x+b);            //3.進入fn函數上下文環境
    };

fn = function(y) {
    var c = 5;
    console.log(y+c);
}

bar(10);                    //2.進入bar函數上下文環境

預處理時，首先創建全局上下文環境：

然后執行代碼，全局上下文環境中的變量都被賦值：

當執行到調用bar函數時，跳轉到bar函數內部，對其進行預處理，創建bar函數的執行上下文環境：

并將這個函數上下文環境壓棧，設置為活動狀態，開始執行bar函數體內代碼：

當執行到調用fn函數時，跳轉到bar函數內部，對其進行預處理，創建fn函數的執行上下文環境，并壓棧，設置為活動狀態，開始執行fn函數體內代碼：

fn函數執行完畢后，此次調用fn所生成的上下文環境出棧，并且被銷毀（已經用完了，就要及時銷毀，釋放內存），bar函數的執行上下文環境回到活動狀態：

bar函數執行完畢后，調用bar函數所生成的上下文環境出棧，并且被銷毀（已經用完了，就要及時銷毀，釋放內存），全局上下文環境回到活動狀態：

全局代碼執行完成，全局上下文環境出棧，并且銷毀（已經用完了，就要及時銷毀，釋放內存），代碼執行完畢。

以上是一段代碼執行上下文環境的完整變化過程，但有一種情況的代碼，其執行上下文環境并未按上述過程銷毀，這就是接下來我們的重點研究對象 —— 閉包！

要談閉包，我們還得先認識下作用域和自由變量，敬請期待... ...

GPU云服務器云服務器執行上下文上下文棧深入理解javascript javascript暫停執行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91710.html

深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

silenceboy 2019-08-23 16:00 評論0 收藏0
深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

leiyi 2019-08-02 14:34 評論0 收藏0
【進階1-2期】JavaScript深入之執行上下文棧和變量對象

摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。本計劃一共28期，每期...

Richard_Gao 2019-08-23 13:46 評論0 收藏0
深入理解JavaScript (5) —— 閉包

摘要：以上是從作用域的角度對閉包的理解，我們還可以結合執行上下文棧來理解閉包。這就是需要理解閉包的核心內容。即，執行到第行時，全局上下文環境將變為活動狀態，但是上下文環境依然會在執行上下文棧中。理解了上下文環境、作用域、作用域鏈以及自由變量，我們再來聊聊閉包。我們不急于給出閉包的概念，先從應用閉包的兩種情況 —— 1.函數作為返回值，2.函數作為參數被傳遞 —— 來直觀的認識它。第一，...

longmon 2019-08-22 11:04 評論0 收藏0
【進階1-1期】理解JavaScript 中的執行上下文和執行棧

摘要：首次運行代碼時，會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值，也被稱為。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，，今天是第一天本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進...

import. 2019-08-23 13:46 評論0 收藏0