What is an execution context?

An execution context is an abstraction of the context in which the current JavaScript code is being parsed and executed.

The significance of the execution context is that it provides an abstract model that makes it easier to understand how JS works. At the same time, the execution context is of great significance for understanding JS memory, closures, garbage collection, etc. It allows us to analyze memory and execution without much understanding of the underlying code.

Execution contexts can be divided into three categories:

  • Global execution context: only one, created on the client by the browser, usually window;
  • Function execution contexts: There can be an infinite number of them, which are created only when the function is called. Each call to the function creates a new execution context.
  • Eval execution context: Refers to code in EVAL. It is not recommended.

So many execution contexts can be managed using the execution stack.

Execution stack

The execution stack, also known as the call stack, is a LIFO structure that stores the context that code needs during execution.

The global execution context is pushed to the bottom of the stack when the code is first executed, and then pushed to the top of the stack based on function calls. When the top function is completed, its corresponding function execution context will Pop out of the execution stack, and the control of the context will be moved to the next execution context of the current execution stack.

var 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'); // Inside first function // Inside second function // Again inside first function // Inside Global Execution ContextCopy the code

Create the execution context

The creation of an execution context is divided into three phases:

  • Make sure this points to
  • Create a lexical environment
  • Create variable environment

Make sure this points to

  • In the global context, this refers to the global object, in the browser, this refers to the window object, and in nodejs, this refers to the module where the file resides.
  • In a function context, the reference to this depends on how the function is called.

Create a lexical environment

The lexical environment consists of two parts:

  • Environment record: stores defined variables and functions;
  • References to external environments: The external lexical environment that can be accessed

Lexical environment can be divided into:

  • Global environment: a lexical environment without an external environment, so the reference to the external environment is NULL, has a global object (window) and its associated properties and methods, as well as user-defined global variables;
  • Function environment: References to external environments can be global or function environments, where variables defined by the user in a function are stored in the environment record.

To make this more intuitive, look at the pseudocode below:

GobelExectionContext = {// global execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: "Object", // Object environment record...... }, outer: <null> // reference to the external environment}} FunctionExectionContext = {// function execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: "Declarative", // Declarative EnvironmentRecord...... }, outer: <GobelEvironment or FunctionEvironment>Copy the code

Create variable environment

The variable environment is also a lexical environment, so it has the same properties as the lexical environment above.

In ES6, the difference between a variable environment and a lexical environment is that the former is used to store variables defined by var, while the latter is used to store declared functions and variables (let,const).

Here’s an example:

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

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

c = multiply(20, 30);
Copy the code

The execution context is as follows:

GobelExectionContext = {// global execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: A: < uninitialized >, b: < uninitialized >, multiply: < func >}, outer: <null> // reference to external environment} VariableEnvironment: {// variable EnvironmentRecord: {Type: "Object", // Object EnvironmentRecord c: Undefined,} outer: <null>}} FunctionExectionContext = {LexicalEnvironment: {// EnvironmentRecord: {// Declarative: {0: 20, 1: 30, length: 2},}, outer: <GobelLexicalEvironment>} VariableEnvironment: {EnvironmentRecord: {Type: "Declarative", // undefined, } outer: <GobelLexicalEvironment> } }Copy the code

Here you can see why variables are promoted: variables are stored in the variable environment as undefine(declared using var); Variables are stored in the lexical environment as uninitialized(using let and const declarations), so using variables before using let and const declarations raises an error.

Execute the execution of the context

At this stage the assignment to the variable is completed, i.e. the execution context above becomes:

GobelExectionContext = {// global execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: Multiply: < func >}, outer: <null> {// EnvironmentRecord: {Type: "Object", // EnvironmentRecord: {c: <multiply>,} outer: <null>}} FunctionExectionContext = {// function execution context LexicalEnvironment: {// lexical EnvironmentRecord: {// EnvironmentRecord Type: "Declarative", // Arguments: {0:20, 1:30, length: 2},}, outer: <GobelLexicalEvironment>} VariableEnvironment: {EnvironmentRecord: {Type: "Declarative", g: 20,} outer: <GobelLexicalEvironment> } }Copy the code

The above content is the author’s personal understanding, if there are mistakes, please point out!

References:

An article to understand the JS execution context

Understand the execution context and execution stack in JavaScript

Js is not that simple (1)– execution context

Js precompiled