Advanced Front-end BASICS (II): Detailed execution context diagram

Each time the controller is switched to executable code, it enters an execution context. The execution context can be understood as the execution environment of the current Code, which forms a scope. The running environment in JavaScript includes three situations.

At the initial stage of JS learning or during the interview, we often encounter questions about how to improve the evaluation variables. For example, a simple one.

Console. log (a); // What will be printed here? Var a = 20;

For the moment, regardless of this example, we first introduce the most basic JavaScript, but also the most important concept Execution Context (Execution Context ).

Each time the controller is switched to executable code, it enters an execution context. The execution context can be understood as the execution environment of the current Code, which forms a scope. The running environment in JavaScript includes three situations.

1. Global Environment: When JavaScript code runs, it first enters the environment.

2. function environment: When a function is called for execution, the code is executed in the current function.

3. eval

Therefore, in a JavaScript program, multiple execution contexts are generated. As mentioned in my previous article, the JavaScript engine will process them in stack mode. The bottom of the stack is always the global context, and the top of the stack is the context currently being executed.

When the code is executed in the preceding three situations, an execution context is generated and put into the stack. After the context at the top of the stack is executed, the stack is automatically output. In order to better understand this process, we will show you the following examples and diagrams.

var color = 'blue';function changeColor() {    var anotherColor = 'red';    function swapColors() {        var tempColor = anotherColor;        anotherColor = color;        color = tempColor;    }    swapColors();}changeColor();

We use ECStock to process the stack of the execution context group. We can easily know that the first step is to import the global context into the stack.

After learning about this process in detail, we can summarize some conclusions on the execution context.

1. Single thread

2. synchronous execution. Only the context at the top of the stack is in progress and other contexts need to wait.

3. The global context has only one unique one. When the browser is closed, it outputs the stack.

4. There is no limit on the number of execution contexts of the function.

5. Each time a function is called, a new execution context is created for it, even the called function.

To consolidate the understanding of the execution context, let's draw an example of the evolution process. This is a simple closure example.

function f1(){    var n=999;    function f2(){        alert(n);     }    return f2;}var result=f1();result(); // 999

Because f2 in f1 is not called for execution in the executable code of f1, f2 does not create a new context when executing f1 until the result is executed, to create a new one. The specific evolution process is as follows.