JS Execution context

1. What is the execution context

JavaScript is a single-threaded language, meaning that only one task can be performed at the same time. When the JavaScript interpreter initializes the execution code, it first enters the global Execution Environment (execution context) by default, and from this point on, each invocation of the function creates a new execution environment.

2. Classification of the implementation environment

• The Global Environment--javascript the first entry when the code is run.
• function environment-When a function is called, it goes into the current function and executes the code.
• The text inside the eval--eval is executed (because Eval is not encouraged and is not described here in detail).

3. Execution context Stack

Concept :

When the JavaScript code executes, it enters a different execution context, which forms an execution context stack (execution context stack,ecs). The bottom of the stack is always the global context, and the top of the stack is the currently executing context.

When the code encounters the code of the above three execution environments during execution, it generates a corresponding execution context, which is pressed into the execution context stack and is automatically stacked when the context of the top of the stack finishes executing. Here is an example of the above implementation of the environment stack picture

var a = 1; function fn1 () {  function  fn2 () {   console.log (a);} fn2 ();} FN1 ();

The first step, the global execution context into the stack.

The second step, Encounter Fn1 (), execute the code, create your own execution context, into the stack.

In the third step, after fn1 the context into the stack, execute the code in it, Encounter fn2 (), create its own execution context, and enter the stack.

Fourth, a new execution context is not created in the execution context of fn2, and after the code executes, the execution context of the fn2 is stacked.

In the fifth step, after the execution context of the fn2 is out of the stack, the executable code of FN1 is executed, and the new execution context is not created. Only the global execution context is left in the stack at this time.

There are 5 key points to remember about the execution stack (call stack):

• Single Thread.
• Synchronous execution. All execution contexts must wait until the top of the stack is executed before they can be executed sequentially
• There is only one global execution context.
• The function context is unrestricted.
• Each time a function is called, a new execution context is created, including calling its own

3. Composition of the execution context

Three important attributes, variable object (Variable object,vo), scope chain (scope chain), and this. These three attributes are very important to the behavior of the code run

Variable objects (Variable object)

Variable object (abbreviated to VO) is a special object related to the execution context

Variable objects are data scopes that are related to the execution context. It is a special context-sensitive object that stores the variables and function declarations defined in the context. In other words, the following information is included in the general VO:

• Variable (var, Variable Declaration);
• function declaration (Functions Declaration, FD);
• Formal parameters of a function

Inside the JavaScript interpreter, each call to the execution context is divided into two stages:

The creation phase (at which time the function is called but no internal code is executed):

• Set the value of the [Scope] Property
• Set Variable object vo, create variables, functions, and parameters.
• Sets the value of this.

Activation/Code Execution phase:

Runs/interprets the function code on the current context and executes the value of the assigned variable and a reference to the function along with the line of code.

Create phase

1. Create and initialize the arguments object based on the parameters of the function.

2. function declaration of the scan context: for the function declaration found, the functions and function references are stored in Vo, and if VO already has a function of the same name, then overwrite.

3. The variable declaration of the sweep context: For each variable declaration found, the variable name is stored in Vo, and the value of the variable is initialized to undefined. If the name of the variable already exists in the variable object, no action is taken and the scan continues.

Remember: The function scan is before the variable.

4. Lifting (hoisting)

(function() {Console.log (typeofname);//functionConsole.log (typeofanother);//undefined    varname = ' Abby ', another=function() {            return' Lucky ';    }; functionname () {return' Abby '; } console.log (typeofname);//stringConsole.log (typeofanother);//function}())

The process for creating this phase is:

1. The function name and its reference are deposited into VO.

2. Variable name found that there is a property with the same name in VO and is therefore ignored.

3. The variable another is deposited into VO and is assigned a value of undefined. (This is why the function expression will not be promoted.)

The process of activating the stage when the code executes from top to bottom is:

1.console.log (typeof name); At this point, name is a function in Vo.

2.console.log (typeof another); At this point the value of another in Vo is undefined.

3. Indicate a reference to the function name.

4. Assign the name to ' Abby '.

5. Assign the another value to the function expression.

6.console.log (typeof name); The name at this time is the string type because it is overridden by a function.

7.console.log (typeof another); The another at this time is assigned a function expression and is therefore a type of functions.

So after understanding the execution context, it's good to understand why we can access it before the name declaration, why the type value of the name after that has changed, why another is undefined and so on for the first time.

5. Summary

When the JavaScript code is loaded by the browser, the default first entry is a global execution environment. When the execution of a function is called in the global execution environment, the program flow enters the called function, and the JS engine creates a new execution environment for the function and presses it into the top of the execution environment stack. The browser always executes the execution environment that is currently on top of the stack, and once executed, the execution environment is ejected from the top of the stack and then into the execution environment under which execution code is executed. The execution environment in the stack is then executed sequentially and the stack pops up until it returns to the global execution environment.

JS Execution context