JavaScript中執行上下文和執行棧是什麼?

来源:https://www.cnblogs.com/smileZAZ/p/18196295
-Advertisement-
Play Games

一、執行上下文 簡單的來說,執行上下文是一種對Javascript代碼執行環境的抽象概念,也就是說只要有Javascript代碼運行,那麼它就一定是運行在執行上下文中 執行上下文的類型分為三種: 全局執行上下文:只有一個,瀏覽器中的全局對象就是 window對象,this 指向這個全局對象 函數執行 ...


一、執行上下文

簡單的來說,執行上下文是一種對Javascript代碼執行環境的抽象概念,也就是說只要有Javascript代碼運行,那麼它就一定是運行在執行上下文中

執行上下文的類型分為三種:

  • 全局執行上下文:只有一個,瀏覽器中的全局對象就是 window對象,this 指向這個全局對象
  • 函數執行上下文:存在無數個,只有在函數被調用的時候才會被創建,每次調用函數都會創建一個新的執行上下文
  • Eval 函數執行上下文: 指的是運行在 eval 函數中的代碼,很少用而且不建議使用

下麵給出全局上下文和函數上下文的例子:

紫色框住的部分為全局上下文,藍色和橘色框起來的是不同的函數上下文。只有全局上下文(的變數)能被其他任何上下文訪問

可以有任意多個函數上下文,每次調用函數創建一個新的上下文,會創建一個私有作用域,函數內部聲明的任何變數都不能在當前函數作用域外部直接訪問

二、生命周期

執行上下文的生命周期包括三個階段:創建階段 → 執行階段 → 回收階段

創建階段

創建階段即當函數被調用,但未執行任何其內部代碼之前

創建階段做了三件事:

  • 確定 this 的值,也被稱為 This Binding
  • LexicalEnvironment(詞法環境) 組件被創建
  • VariableEnvironment(變數環境) 組件被創建

偽代碼如下:

ExecutionContext = {  
  ThisBinding = <this value>,     // 確定this 
  LexicalEnvironment = { ... },   // 詞法環境
  VariableEnvironment = { ... },  // 變數環境
}

This Binding

確定this的值我們前面講到,this的值是在執行的時候才能確認,定義的時候不能確認

詞法環境

詞法環境有兩個組成部分:

  • 全局環境:是一個沒有外部環境的詞法環境,其外部環境引用為null,有一個全局對象,this 的值指向這個全局對象

  • 函數環境:用戶在函數中定義的變數被存儲在環境記錄中,包含了arguments 對象,外部環境的引用可以是全局環境,也可以是包含內部函數的外部函數環境

偽代碼如下:

GlobalExectionContext = {  // 全局執行上下文
  LexicalEnvironment: {       // 詞法環境
    EnvironmentRecord: {     // 環境記錄
      Type: "Object",           // 全局環境
      // 標識符綁定在這裡 
      outer: <null>           // 對外部環境的引用
  }  
}

FunctionExectionContext = { // 函數執行上下文
  LexicalEnvironment: {     // 詞法環境
    EnvironmentRecord: {    // 環境記錄
      Type: "Declarative",      // 函數環境
      // 標識符綁定在這裡      // 對外部環境的引用
      outer: <Global or outer function environment reference>  
  }  
}

變數環境

變數環境也是一個詞法環境,因此它具有上面定義的詞法環境的所有屬性

在 ES6 中,詞法環境和變數環境的區別在於前者用於存儲函數聲明和變數( let 和 const )綁定,而後者僅用於存儲變數( var )綁定

舉個例子

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}

c = multiply(20, 30);

執行上下文如下:

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {  // 詞法環境
    EnvironmentRecord: {  
      Type: "Object",  
      // 標識符綁定在這裡  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {  // 變數環境
    EnvironmentRecord: {  
      Type: "Object",  
      // 標識符綁定在這裡  
      c: undefined,  
    }  
    outer: <null>  
  }  
}

FunctionExectionContext = {  
   
  ThisBinding: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 標識符綁定在這裡  
      Arguments: {0: 20, 1: 30, length: 2},  
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 標識符綁定在這裡  
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}

留意上面的代碼,letconst定義的變數ab在創建階段沒有被賦值,但var聲明的變數從在創建階段被賦值為undefined

這是因為,創建階段,會在代碼中掃描變數和函數聲明,然後將函數聲明存儲在環境中

但變數會被初始化為undefined(var聲明的情況下)和保持uninitialized(未初始化狀態)(使用letconst聲明的情況下)

這就是變數提升的實際原因

執行階段

在這階段,執行變數賦值、代碼執行

如果 Javascript 引擎在源代碼中聲明的實際位置找不到變數的值,那麼將為其分配 undefined 值

回收階段

執行上下文出棧等待虛擬機回收執行上下文

二、執行棧

執行棧,也叫調用棧,具有 LIFO(後進先出)結構,用於存儲在代碼執行期間創建的所有執行上下文

Javascript引擎開始執行你第一行腳本代碼的時候,它就會創建一個全局執行上下文然後將它壓到執行棧中

每當引擎碰到一個函數的時候,它就會創建一個函數執行上下文,然後將這個執行上下文壓到執行棧中

引擎會執行位於執行棧棧頂的執行上下文(一般是函數執行上下文),當該函數執行結束後,對應的執行上下文就會被彈出,然後控制流程到達執行棧的下一個執行上下文

舉個例子:

let a = 'Hello World!';
function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}
function second() {
  console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');

轉化成圖的形式

簡單分析一下流程:

  • 創建全局上下文請壓入執行棧
  • first函數被調用,創建函數執行上下文並壓入棧
  • 執行first函數過程遇到second函數,再創建一個函數執行上下文並壓入棧
  • second函數執行完畢,對應的函數執行上下文被推出執行棧,執行下一個執行上下文first函數
  • first函數執行完畢,對應的函數執行上下文也被推出棧中,然後執行全局上下文
  • 所有代碼執行完畢,全局上下文也會被推出棧中,程式結束

參考文獻

  • https://zhuanlan.zhihu.com/p/107552264

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近年來,新質生產力、數據要素及數據資產入表等新興概念猶如一股強勁的浪潮,持續衝擊並革新著企業數字化轉型的觀念視野,昭示著一個以數據為核心驅動力的新時代正穩步啟幕。 面對這些引領經濟轉型的新興概念,為了更好地服務於客戶並提供切實可行的實踐指導,自3月20日起,袋鼠雲將推出全新《袋鼠雲大數據實操指南》系 ...
  • AutoMySQLBackup備份配置了加密選項過後,它會將資料庫的備份文件加密。測試解密這些加密的備份文件時遇到錯誤(密鑰做了脫敏處理)。 $ openssl enc -aes-256-cbc -d -in daily_mysql_2024-05-14_09h09m_Tuesday.sql.gz. ...
  • 本文分享自華為雲社區《JDBC連接openGauss6.0和PostgreSQL16.2性能對比》,作者: Gauss松鼠會小助手。 PostgreSQL vs openGauss 01 前置準備 安裝JDK: 詳細安裝步驟請問度娘,輸入能正常返回即已安裝 [root@db06 ~]# java - ...
  • 一、服務卡片介紹 1.服務卡片的概念 在HarmonyOS中,服務卡片是一種提供即時信息和快速操作的小組件,類似於Android中的通知欄。服務卡片可以顯示各種類型的信息,包括通知、天氣、日曆事件、音樂播放器、快捷方式等。用戶可以根據自己的需求配置服務卡片,並通過輕掃或點擊來查看詳細信息或執 ...
  • 一、ExtensionAbility組件 1.概念 HarmonyOS中的ExtensionAbility組件是一種能夠擴展系統功能的能力組件。它可以通過擴展系統能力介面,為應用程式提供一些特定的功能,以滿足應用程式的特殊需求。 ExtensionAbility組件的特點包括: 系統組件:E ...
  • 一、UIAbility組件 1.概述 HarmonyOS中的Stage模型是一種基於UIAbility組件的應用程式架構。UIAbility是HarmonyOS系統中用於構建用戶界面的基本組件之一。它負責處理應用程式界面的顯示和交互。 在Stage模型中,每個應用程式都有一個或多個Stage ...
  • 說來慚愧,作為差不多10年的開發者,第一次嘗試提審,結果卻收穫來了蘋果無休止的等待 我從4月24日替身,後續到現在沒有任何回饋,只告訴你 other 原因拒絕, 請問蘋果是只針對中國開發者,還是所有開發者? 如果一個賬戶按年計費,一次等待按照一個月起算,耽誤多少開發者的時間和金錢。 我知道蘋果一向傲 ...
  • 有時候,我們需要在網頁判斷用戶是否處與非活躍狀態,如果用戶長時間沒有在頁面上進行任何操作,我們則判定該用戶是非活躍的。 在 javascript 中我們可以通過監聽某些滑鼠或鍵盤相關的事件來判定用戶是否在活躍中。 ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...