js execution context and execution stack

1. What is the execution context?

Variables, function declarations, parameters, scope chain, this and other information in the current execution environment. It is divided into global execution context and function execution context. The difference is that there is only one global execution context. The function execution context will create a new function execution context every time the function is called.

2. Type of execution context

There are three execution context types in javascript:

  • Global execution context - there is only one. The global object in the browser is the window object, and this points to this global object.

  • Function execution context - there are countless, which can only be created when the function is called. Each time the function is called, a new execution context will be created
    -Eval function execution context -- refers to the code running in the eval function, which is rarely used and is not recommended.

3. Content in execution context:

Execution context is an abstract concept, which can be understood as an object:

const ExecutionContextObj = {
    VO: window, // Variable object
    ScopeChain: {}, // Scope chain
    this: window
};

4. Execution context lifecycle

4.1 creation phase

ExecutionContext = {  
  ThisBinding = <this value>,     // Confirm this 
  LexicalEnvironment = { ... },   // Lexical Environment
  VariableEnvironment = { ... },  // Variable environment
}
  • This Binding

In the global execution context: the value of this points to the global object, the value of this points to the window object in the browser, and the module object of this file in nodejs.
In the context of function execution: the value of this depends on how the function is called. There are: default binding, implicit binding, explicit binding (hard binding), new binding and arrow function.

  • Lexical Environment

1. Global environment: it is a lexical environment without external environment, and its external environment reference is null. It has a global object (window object) and its associated methods and properties (such as array method) as well as any user-defined global variables. The value of this points to this global object.
2. Function environment: the variables defined by the user in the function are stored in the environment record, including the arguments object. A reference to an external environment can be a global environment or an external function environment containing internal functions.

  • Variable environment

The variable environment is also a lexical environment, so it has all the attributes of the lexical environment defined above
Difference: the lexical environment is used to store function declarations and variable (let and const) bindings, while the variable environment is only used to store variable (var) bindings.

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

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

c = multiply(20, 30);

Execution context:

GlobalExectionContext = {

  ThisBinding: <Global Object>,  // Confirm this

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // The identifier is bound here  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // The identifier is bound here  
      c: undefined,  
    }  
    outer: <null>  
  }  
}

FunctionExectionContext = {  
   
  ThisBinding: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // The identifier is bound here  
      Arguments: {0: 20, 1: 30, length: 2},  
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // The identifier is bound here  
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}

4.2 execution phase

After the creation, the code will be executed. At this time, the variable assignment, function reference and other code will be executed.

5. Execution context stack (call stack)

If there are many functions, there will be multiple function execution contexts. Each time a function is called, a new execution context will be created. How to manage so many execution contexts created?

The JavaScript engine creates an execution context stack to manage the execution context. The execution context stack can be regarded as a stack structure for storing function calls, following the principle of first in first out (FILO).

principle:

  • JavaScript is executed on a single thread, and all code is queued for execution.
  • When the browser starts executing global code, first create a global execution context and press it into the top of the execution stack.
  • Each time you enter the execution of a function, the execution context of the function is created and pushed to the top of the execution stack. After the execution of the current function is completed, the execution context of the current function is out of the stack and waits for garbage collection.
  • The browser's JS execution engine always accesses the execution context at the top of the stack.
  • There is only one global context, which comes out of the stack when the browser is closed.
var color = 'blue';
function changeColor() {
    var anotherColor = 'red';
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();

Tags: Javascript Vue.js http

Posted on Wed, 24 Nov 2021 08:34:59 -0500 by wildwobby