Front-end Advanced (2): Execution Context Diagram

Let’s put a random picture first

We often encounter assessmentvariables in the early stages of learning JS or during interviews Thinking questions about improvement. For example, let’s start with a simpler one.

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

Ignore this example for the time being, let’s introduce the most basic but also the most important concept in JavaScriptExecution Context (Execution Context).

Every time when the controller switches to executable code, it will enter an execution context. Execution context can be understood as the execution environment of the current code, which forms a scope. The running environment in JavaScript roughly includes three situations.

• Global environment: JavaScript code will first enter this environment when running

• Function Environment: When the function is called, it will be executed When, the code will be executed in the current function

• eval

Therefore, in a JavaScript program, multiple execution contexts will be generated. As mentioned in my last article, the JavaScript engine will process them in a stack. This stack is called the function call stack (call 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 encounters the above three situations during execution, an execution context will be generated and placed on the stack. After the context on the top of the stack is executed, it will automatically pop off the stack. In order to understand this process more clearly, we will show it to you based on 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 represent the stack that handles execution context groups. We can easily know that the first step is to push the global context onto the stack.

Step 1: Push the global context onto the stack

After the global context is pushed onto the stack, the executable code in it begins to execute until it encounters changeColor(), this sentence activates the function changeColor to create its own execution context, so the second step is to push the execution context of changeColor onto the stack.

Step 2: Push the execution context of changeColor onto the stack

After the context of changeColor is pushed onto the stack, the controller starts executing the executable code in it , another execution context is activated after encountering swapColors(). Therefore, the third step is to push the execution context of swapColors onto the stack.

The third step: the execution context of swapColors is pushed onto the stack

In the executable code of swapColors, no other execution context is encountered. context, so this code is executed successfully, and the context of swapColors is popped from the stack.

Step 4: The execution context of swapColors pops off the stack

After the execution context of swapColors pops up, continue to execute the executable code of changeColor, also No other execution context is encountered, and it pops up after successful execution. In this way, there is only a global context in ECStack.

Step 5: The execution context of changeColor is popped off the stack

The global context is popped off the stack after the browser window is closed.

Note: In the function, encountering return can directly terminate the execution of the executable code, so the current context will be popped directly from the stack.

The entire process

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

• Single thread

• Synchronous execution, only the context on the top of the stack is executing, other contexts need to wait

• There is only one global context, which is popped when the browser is closed

• There is no limit to the number of execution contexts of a function

• Every time a function is called, a new execution context will be created for it, even if it is the called function itself.

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

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

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

上例演变过程

如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。

下一篇文章继续总结执行上下文的创建过程与变量对象，求持续关注与，谢谢大家。

The above is the detailed content of Front-end Advanced (2): Execution Context Diagram. For more information, please follow other related articles on the PHP Chinese website!