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

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

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.

• Global Environment: When JavaScript code runs, it first enters the environment.
• Function environment: When a function is called for execution, the code is executed in the current function.
• Eval

Therefore, in a JavaScript program, multiple execution contexts will be generated. As mentioned in my previous article, the JavaScript engine will process them as stacks, we call this function stack ). 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 ECStack 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.

Step 1: global context

After the global context is added to the stack, the executable code in the stack starts to be executedchangeColor(), This sentence activates the FunctionchangeColorCreate its own execution context, so the second step is changeColor's execution context into the stack.

Step 2: Import changeColor execution context to stack

After changeColor context is added to the stack, the controller starts to execute the executable code.swapColors()Then an execution context is activated. Therefore, the third step is to import the execution context of swapColors into the stack.

Step 3: Switch the execution context of swapColors to the stack

In the executable code of swapColors, there is no other situation where the execution context can be generated. Therefore, the code is successfully executed, and the context of swapColors pops up from the stack.

Step 4: swapColors execution context output Stack

After the execution context of swapColors is displayed, the changeColor executable code is executed and no other execution context is encountered. In this way, ECStack has a global context.

Step 5: changeColor execution context output Stack

The global context exits the stack after the browser window is closed.

Note: In a function, the execution of executable code can be terminated directly when return is returned, so the current context will pop up directly.

Entire Process

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

• Single thread
• Synchronous execution. Only the context at the top of the stack is in progress and other contexts need to wait.
• The global context has only one unique one. When the browser is closed, it outputs the stack.
• There is no limit on the number of execution contexts of the function.
• 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.

Evolution of the previous example

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!