JS execution context (execution Environment) detailed plot

JS execution context (execution Environment) detailed plot

Let's just put a picture.

At the beginning of the JS study or interview, we often encounter the study questions of the evaluation variable promotion. Let's start with a simple one, for example.

console.log(a);   // 这里会打印出什么？var a = 20;

For the time being, let's first introduce a basic, but also the most important, concept execution context in JavaScript (execution context).

Each time the controller goes 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 operating environment in JavaScript probably includes three scenarios.

• Global environment: JavaScript code runs first into the environment.
• Function Environment: Executes code in the current function when the function is called to execute
• Eval

So in a JavaScript program, it's bound to produce multiple execution contexts, as mentioned in my previous article, and the JavaScript engine handles them as a stack. The bottom of the stack is always the global context, and the top of the stack is the currently executing context.

When the code in the execution process, encountered in the above three cases, will generate an execution context, put in the stack, and at the top of the stack after the completion of the context, will automatically out of the stack. In order to understand the process more clearly, according to the following example, combined with the diagram to show you.

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

We use Ecstock to represent the stack that handles the execution context group. It is easy to know that the first step, first, is the global context into the stack.

First step: Global context into the stack

After the global context is in the stack, the executable code begins execution until it encounters the changeColor() activation function that changeColor creates its own execution context, so the second step is to changecolor the execution context into the stack.

Step Two: ChangeColor execution context into the stack

After the ChangeColor context is in the stack, the controller starts executing the executable code in it, and then swapColors() activates an execution context after it encounters it. So the third step is to swapcolors the execution context into the stack.

Step three: Swapcolors execution context into the stack

In the executable code of Swapcolors, there is no other situation where the execution context can be generated, so the code executes smoothly and the swapcolors context pops up from the stack.

Fourth step: swapcolors execution context out of the stack

After the Swapcolors execution context pops up, it continues execution of the ChangeColor executable code, and no additional execution context is encountered, and then pops up after a smooth execution. In this way, the ecstack in the overall context.

Fifth step: ChangeColor execution context out of the stack

The global context is out of the stack after the browser window is closed.

Note: In a function, a return can terminate the execution of the executable code directly, so the current context is ejected directly from the stack.

The whole process

After a detailed understanding of the process, we can summarize some conclusions about the execution context.

• Single Thread
• Synchronous execution, only the context of the top of the stack is in execution, other contexts need to wait
• The global context has only one, which is the stack when the browser is closed
• There is no limit to the number of execution contexts for a function
• Each time a function is called, a new execution context is created for it, even if the function is called itself.

To solidify the understanding of the execution context, let's draw an example of the evolutionary process, which is a simple closure example.

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

Because the function in F1 is F2 in the executable code of F1 and is not invoked, F2 does not create a new context when the F1 is executed, and a new one is created until result is executed. The specific evolution process is as follows.

The evolution process of the above example

JS execution context (execution Environment) detailed plot