Execution Context in ES6

“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

ES6 divides the execution context into two phases, the creation phase and the execution phase.

Create a stage

In the creation stage, there are three steps: determining this (Binding this), creating LexicalEnvironment (LexicalEnvironment), and creating VariableEnvironment (VariableEnvironment).

Confirm this (Binding this)

In the identify this step, if in the context of global execution, this executes the global object. In the browser environment it is the Window object, in the Node environment it is the global object.

In the context of function execution, the “this” reference depends on how the function is called. In short, it depends on who uses the “this” reference. .

let obj = { 
    fun:function(){
        console.log(this) // obj 
    }
}
obj.fun()
Copy the code

Create a LexicalEnvironment

LexicalEnvironment is divided into EnvironmentRecor and OuterEnvironmentRecor. The OuterEnvironmentRecor is a bit like the scope chain we talked about earlier.

According to the difference of global execution context and function execution context, it can be divided into global lexical environment and function lexical function.

Global lexical environment:


GlobalExectionContext = { // Global execution context
    LexicalEnvironment: { // lexical context
        EnvironmentRecor: {},OuterEnvironmentRecor: null}}Copy the code

Functional lexical environment

FunctionExectionContext = { // Function environment
    LexicalEnvironment: { // function lexical environment
        EnvironmentRecord: { // The type is declarative environment record
        },
        outer: Global // Or the relevant external function environment}};Copy the code

Creating a VariableEnvironment

A VariableEnvironment is similar to a LexicalEnvironment. Used to store variables declared by var.

Execution phase

The create phase is followed by the execute phase, during which values defined in the create phase are assigned.

Practical analysis

Let’s analyze this with a simple example:


let a = 1
const b = 2
var c
function compute(n1,n2){
    var n = 10
    return n1 + n2 + n
}
c = compute(a,b)
Copy the code

The first step is to create the global environment


var GlobalExectionContext = { // Global execution context
    LexicalEnvironment: { // lexical context
        EnvironmentRecor: { 
            a: uninitialized,
            b: uninitialized,
            compute:Function
        },
        OuterEnvironmentRecor: null // Global records have no external records
    },
    VariableEnvironment: { // Variable environment
        EnvironmentRecord: {
            c: undefined.// var Creates the variable c
        },
        OuterEnvironmentRecor: null // Global records have no external records}}Copy the code

Creation of a functional environment


var FunctionExectionContext = { 
    ThisBinding: Global Object.// since the function is called by default, this binding is also the global object LexicalEnvironment: {// LexicalEnvironment
        EnvironmentRecord: { 
             Arguments: [
                 0: 1.1: 2,]},outer: GlobalEnvironment // The external environment is imported as Global
   }, 
   VariableEnvironment: { 
       g: undefined
   },
   outer: GlobalEnvironment // The external environment is imported as Global}}Copy the code

The completion of the creation into the execution phase, I order execution

var GlobalExectionContext = { // Global execution context
    LexicalEnvironment: { // lexical context
        EnvironmentRecor: { 
            a: 1.b: 2.compute:Function
        },
        OuterEnvironmentRecor: null // Global records have no external records
    },
    VariableEnvironment: { // Variable environment
        EnvironmentRecord: {
            c: 13.//
        },
        OuterEnvironmentRecor: null // Global records have no external records}}var FunctionExectionContext = { 
    ThisBinding: Global Object.// since the function is called by default, this binding is also the global object LexicalEnvironment: {// LexicalEnvironment
        EnvironmentRecord: { 
             Arguments: [
                 0: 1.1: 2,]},outer: GlobalEnvironment // The external environment is imported as Global
   }, 
   VariableEnvironment: { 
       n: 10
   },
   OuterEnvironmentRecor: Global
   }
}
Copy the code

Execution Context in ES6