The execution context, also known as context, is not known who translated it, many literature, books use this word. Remember the first contact with this word when melancholy, lost, at a loss, helped the glasses, opened the dictionary, or translated into the environment more grounded gas. JS execution context, that is, the JS execution environment.

Execution Context (EC)

When our code executes, it enters a different execution context, that is, a different environment. In different environments, with different scopes, the code can access different resources. In JS, the execution environment has the following three situations:

  • The global environment

    The default environment in which code is run, and the global environment is first entered when code is executed. It is the outermost execution environment, and objects representing the global environment vary depending on the host environment in which the ECMAScript implementation is implemented. In a Web browser, the global environment is the Window object. Global variables and functions are created as variables and methods of the global object Window.

  • Function of the environment

    The execution environment created when a function is called to execute.

  • eval

    Using eval introduces a new execution environment whose variable objects are either global variable objects or caller variable objects. Due to eval’s cancer nature, it is generally not recommended and can be ignored.

After all the code in an execution environment is executed, the environment is destroyed, along with the variables and functions stored in the environment. These variables and functions are stored in an object called variableObject, which is discussed in detail in the article variable Objects and scope chains.

Execute the lifecycle of the environment

The life cycle of an execution environment is roughly divided into two phases, namely the creation phase and the execution phase:

1. Creation phase

  • Create scope chain (variable object + variable object of parent execution environment)
  • Create variable objects (including local variables, functions, and function parameters)
  • Make sure this points to

Thus, an execution environment can consist of objects containing the scope chain, variable object, and this pointer:

executionContextObj = {
  scopeChain: {},
  variableObject: {},
  this: {}
}
Copy the code

2. Code execution phase

  • Specifies the value of a variable and a reference to a function
  • Interpret and execute the code

Execution Context Stack (ECS)

The interpreter in the browser is implemented as a single thread, which can only handle one task at a time. The multiple execution environments in the JS program will be handled in a stack, which is called the execution stack. The bottom of the stack is always the global environment (popup when the window closes), and the top of the stack is the current executing environment. The foregoing three conditions are created for the execution environment, the execution environment is created by the stack, become an environment of operation (activities), located at the top of the stack environment after the execution will pop up from the stack, and environmental control to the caller stack (before), and the caller continue (or activate the other environment), until the end of its execution environments. The flow of execution in ECMAScript programs is controlled by this convenient mechanism.

Consider the following example:

var firstName = 'snow';

function getName() {
    var lastName = 'John';

    function fullName() {
      var name = lastName + firstName;
      return name;
    }
    var name = fullName();
    return name;
}

getName();
Copy the code

The change process of execution stack is as follows:

  • First, push the global environment onto the stack and start executing the code,

  • Until you hit getName(), you’re ready to call the function, create an execution environment for the function getName, push it to the top of the stack, and start executing the function

  • Until fullName() is encountered, it is ready to call the function, create an execution environment for the function fullName, push it to the top of the stack and start executing the function

  • The fullName function is not generated into an execution environment when it is executed, and is popped from the top of the stack when it is finished

  • After the fullName stack pops up, the control goes back to the getName stack, and the code continues to execute. After the execution, the fullName stack pops up from the top of the stack

  • Finally back to the global environment, the window after closing popup

conclusion

  • Single-threaded, synchronous execution, with only the top of the stack executing and the rest waiting.
  • Execute the JS program, first enter the global environment, the global environment only one and pop up when closing the window.
  • When a function is called, a new execution environment is created, including calling itself.