Execution context

concept

An execution context is an abstraction of the context in which JS code is evaluated and executed. Whenever JS code is run, it is run in an execution context

type

  • Global execution context

The default context, code that is not in the function is in the global context. It creates a global Window object and sets this to be equal to that object.

  • Function execution context

When a function is called, a new execution context is created for the function. Each function has its own execution context. Each time a new context is created, she performs a sequence of actions in the order defined.

  • The Eval function executes the context

Code executed inside Eval also has its own execution context.

Execution stack

An execution stack is a stack with LIFO data structures that are used to manage all execution contexts created by code runtime.

When the JS engine runs, it creates a global execution context and compacts the current execution stack. Each time the engine encounters a function call, it creates a new execution context for the function and pushes it to the top of the stack.

The engine executes the function at the top of the stack first, and when the function finishes, the execution context pops out of the stack and starts executing the next context in the stack.

How is the execution context generated

Create a stage

  1. The binding of this value
In the global execution context, this is the global object, and in the function execution context, this depends on how the function is called. If called by an object, this refers to that object, otherwise it is set to global or undefinedCopy the code
  1. Create a lexical environment

The lexical environment consists of two parts

  • Environment logging, storing variable and function declarations
  • A reference to an external environment through which you can access the external lexical environment

The environmental record consists of two parts

  • Declarative environment logger: Stores variables, functions, and parameters, mainly for functions and catch lexical environments.
  • Object environment logger: Used primarily for with and global lexical environments

There are two types of lexical environment

  • The global environment logger is the object environment logger
  • Function environment Environment loggers are life function loggers
  1. Create variable environment

A variable environment is also a lexical environment, the main difference being that lexical environments are used to store function declarations and variables (those declared by let and const), whereas variable environments are only used to store variables (those declared by var)

Note: The ES3 specification is slightly different from ES5

ES3 specification: ① Create scope chain. ② Create variable object VO (including parameters, functions, variables). ③ Determine the value of this.Copy the code

Execution phase

The execution phase completes the assignment of variables and finally executes the code.

Pseudocode sample

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

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

c = d(20.30);
Copy the code
// Global environment
GlobalExectionContext = {

  this: <Global Object>,
    // lexical context
  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object".// Environment record category: Object environment record
      a: < uninitialized >,  // Not initialized
      b: < uninitialized >,  
      d: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object".// Environment record category: Object environment record
      c: undefined,  // undefined
    }  
    outer: <null>}}// Function environment
FunctionExectionContext = {  

  this: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative".// Environmental record classification: declare environmental record
      Arguments: {0: 20.1: 30, length: 2},  // In the function environment, the environment record has more arguments than in the global environment
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative".// Environmental record classification: declare environmental record
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}
Copy the code

example

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

// Perform stack changes
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
Copy the code
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

// Perform stack changes
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
Copy the code

Refer to the article

Understand the execution context and execution stack in JavaScript

“Js-learning” understands the JS execution environment