An execution context is created when a function is called. The execution context, which can be understood as the execution environment of the current code, forms a scope. There are roughly three scenarios for running environments in JavaScript.

• Global environment: This is where the JavaScript code runs first

• Function environment: When a function is called to execute, it enters the current function to execute code

• eval

Therefore, in a JavaScript program, multiple execution contexts are bound to be created, and the JavaScript engine handles them in a stack, which we call the Call stack. The bottom of the stack is always the global context, and the top is the context currently executing.

When the code encounters the above three situations during execution, an execution context will be generated and placed on the stack. When the context at the top of the stack completes execution, it will be automatically removed from the stack. In order to understand this process more clearly, I will show you the following examples and illustrations.

var color = 'blue';

function changeColor() {

    var anotherColor = 'red';

    function swapColors() {

        var tempColor = anotherColor;

        anotherColor = color;

        color = tempColor;

    }

    swapColors();

}

changeColor();
console.log(color)   // red
Copy the code

We use ECStack to represent the stack that processes the execution context group. The first step is to push the global context.

After the global context is pushed, the executable code within it starts executing until it encounters changeColor(), calls the changeColor function and starts creating its own execution context, so the second step is to push the execution context of changeColor.

Once the changeColor context is pushed, the controller starts executing its executable code, and when swapColors() is encountered, an execution context is generated. So the third step is to push the execution context of swapColors.

In the executable code for swapColors, there are no other situations where the execution context is generated (that is, no new function calls), so the code completes without a problem and the swapColors context pops off the stack.

After the execution context of swapColors pops up, the executable code of changeColor continues to be executed without encountering any other execution context, and pops up after successful execution. In this way, the ECStack has its own global context.

The whole process

The process by which a function executes the creation of a context

1. Before calling the function and preparing to execute the function body, create the corresponding function execution context object
2. Preprocessing the data in the function body
   • The variables and parameters declared by var, with values of undipay, become properties of the execution context
   • F is involved in argument unification
   • Function declaration that is added as a method for the execution context
   • This assignment (the object on which the function is called)
3. Execute the function body code

When a function is called, it is pushed onto the execution stack

Global execution context creation process

1. Before executing code, the Window object is identified as a global execution context object
2. Preprocessing global data
   • Var Declares the global variable, with a value of Undipay, as the window property
   • Function A global function declared as a window method
   • This points to the window
3. Start executing the global context