JavaScript execution context

All the time, the code execution sequence for JavaScript, most people will think顺序执行

var=function{    console.log(‘foo1‘);}foo();  // foo1var=function{    console.log(‘foo2‘);}foo();// foo2

It all seems reasonable here, but it's not as simple as it might seem.

Looking at this section of code

functionfoo{    console.log(‘foo1‘);}foo();  functionfoo{    console.log(‘foo2‘);}foo();

Two times will print out Foo2

Here are two questions about variable elevation (previously written) function promotion

The JavaScript engine is not a one-line analysis of the execution of the program but a period of execution, when the execution of a piece of code, there will be a "preparatory work", variable promotion function promotion is the preparation of work

How is this section of JavaScript divided?

Executable code

This is about the type of JavaScript executable code (executable code).

In the case of three, the global code, the function code, the eval code (the escaped string is the object).

As an example, when a function is executed, it is ready to work, and here the "preparation",
Let's use a more professional statement called the "execution Context" (execution).

Execution context Stack

The next question comes, the functions we write are much more, how do we manage the many execution contexts we create?

So the JavaScript engine created the execution context stack (execution context stack,ecs) to manage the execution context

To simulate the behavior of the execution context stack, let's define the execution context stack as an array:

ECStack = [];

Just imagine that when JavaScript starts to explain the execution code, the first thing that comes across is the global code,

So when initializing, the execution context stack is first pressed into a global execution context,

We use globalContext it to represent it, and only when the entire application is finished,

Ecstack will be emptied, so before the program ends, there is always a globalcontext at the bottom of the Ecstack:

ECStack = [    globalContext     //全局代码];

JavaScript now encounters the following code:

function fun3() {    console.log(‘fun3‘)}function fun2() {    fun3();}function fun1() {    fun2();}fun1();

Since is the stack, must be advanced after the above code can be processed

//The above code execution is complete//encountered fun1 execution join StackEcstack.Push(<Fun1>Functioncontext);//fun1 inside Execute fun2 join stackEcstack.Push(<Fun2>Functioncontext);//fun1 inside execution fun2 inside execute fun3 join stackEcstack.Push(<Fun3>Functioncontext);//fun3 inside Execute code fun3 popup stackEcstack.Pop();//fun2 Execution Complete popup stackEcstack.Pop();//fun1 Execution Complete popup stackEcstack.Pop();//JavaScript then executes the following code, but there is always a globalcontext at the bottom of the Ecstack

Answer study Questions

The previous blog talked about the static scope of the problem, then use the execution context stack how to handle it?

var="global scope";functioncheckscope(){    var="local scope";    functionf(){        return scope;    }    returnf();}checkscope();

ECStack.push(<checkscope> functionContext);ECStack.push(<f> functionContext);ECStack.pop();ECStack.pop();

var scope = "global scope";function checkscope(){    var scope = "local scope";    function f(){        return scope;    }    return f;}checkscope()();

ECStack.push(<checkscope> functionContext);ECStack.pop();ECStack.push(<f> functionContext);ECStack.pop();

While the results are the same, the code executes differently.

To explain the differences between the two function executions in more detail, we need to explore what the execution context actually contains

Future updates

---restore content ends---

JavaScript execution context