JavaScript execution Environment

The execution environment (execution context, also known as the "execution context") is one of the most important concepts in JavaScript. The execution environment defines other data that a variable or function has access to, and determines its behavior. When JavaScript code executes, it goes into different execution environments, and these different execution environments make up the execution environment stack.

There are three main execution environments in javascript:

• Global execution Environment

The default environment for JavaScript code execution. Typically, the Window object is defaulted, and all global variables and functions exist as properties and methods of the Window object. When code in the execution environment is executed, the execution environment is destroyed, and all of the variables and functions are destroyed. For the global execution environment, the environment is destroyed when the Web page or browser is closed.

• Function Execution Environment

When a JavaScript function is executed, the environment of the function is pushed into the environment stack, after execution, the stack will perform the environment rollout and transfer control to the previous execution environment.

• Eval environment

Created when the eval () function is executed.

For the execution environment stack, see the following code:

　　

var a = "global"; function example () {     console.log (a);   } function outer () {     var b = "outer";     Console.log (b);                 function inner () {          var c = "inner";          Console.log (c);          Example ();     }          Inner ();} Outer ();

The code first goes into the global execution environment, then into the execution environment of Outer,inner and example, and the execution environment stack can be represented as:

　　

Each execution environment has three important attributes, variable object (VO), scope chain (scope chain), and this. Let's look at the variable object first.

　　Variable objects and active objects (VO and AO)

Variable Object

Each execution environment has a variable object associated with it (variable object), and all variables and functions defined in the environment are stored in the object. When code executes in an environment, a scope chain (scope chain) of the current variable object is created. The front-end of the scope chain, which is always the variable object of the current execution environment. If the execution environment is a function, its active object (activation object) acts as a variable object. The next variable object of the scope chain comes from the parent execution environment, and then the next variable object comes from the external environment of the parent environment, and so on, which forms the complete scope chain, and the outermost variable object is always the variable object of the global execution environment.

In general, the variable object (VO) contains the following information:

• Variable
• function declaration
• Formal parameters of a function

When the JavaScript code executes, if you try to find a variable or function, you will first look for VO. For the previously mentioned code, the VO for the global execution environment is as follows:

　　

For Vo, a function expression is not included in Vo, and a variable not declared with Var is not included in Vo, which simply adds a property to global.

　　Active Object

　　Only variable objects of the global execution environment allow indirect access through the property name of Vo. However, in the function execution environment, VO is not allowed to be accessed directly. At this point, the active object (Activation object, abbreviation AO) plays the role of Vo. The active object is created when it enters the function execution environment and is initialized with the arguments property of the function, where arguments objects is the inner object of the active object AO in the function execution environment.

The relationship between Vo and Ao is, simply put, that VO has different forms of monetization in different execution environments. In the global execution environment, VO can be used directly, but in the function execution environment, AO is created.

In the preceding code example, when the outer function is started, the AO of the outer function is created as shown:

　　

　　The specific process of executing the environment

When entering an execution environment, the JavaScript interpreter creates a new execution environment, but what exactly does it do? It is divided into two main stages:

• Create phase
  
  • Creating a Scope chain
  • Create Vo/ao
  • Set the value of this
• Implementation phase
  
  • Set the value of a variable
  • To set a reference to a function
  • Interpreting the execution code

For the "Create Vo/ao" step, the JavaScript interpreter mainly does the following things:

• Create and initialize the arguments object according to the function parameters
• Find function declarations based on function internal code
  • For all function declarations found, the functions names and references are all stored in Vo/ao
  • Overwrite if there is a function with the same name
• Find variable declarations based on function internal code
  
  • For all variable declarations found, all are stored in Vo/ao and initialized to "undefined"
  • If the variable name is the same as an already declared parameter or function, then the variable declaration does not interfere with such a property

Look at the following example:

function Example (p) {    var a = ' hello ';     var function B () {...};     function C () {...}} Example (2);

For the example above, in the execution environment creation phase, the following execution environment objects are obtained:

exampleexecutioncontext={     scopechain: {...},     vo:{                arguments:{0:2,                length: 1          }          p:2,          function  C ()             a:undefined,          b:undefined     },       this: {...}}   

During the code execution phase, the Environment object is updated as follows:

exampleexecutioncontext={     scopechain: {...},     vo:{                arguments:{0:2,                length: 1          }          p:2,          function  C ()             A:' hello ',           function  b ()     },       this: {...}}   

JavaScript execution Environment