Execution context stack

The sequence of JavaScript code execution is synchronous

    var foo = function(){
        console.log('foo1')
    }
    foo(); // foo1
    var foo = function(){
        console.log('foo2')
    }
    foo(); // f002
Copy the code

How is the following code different

    function foo(){
        console.log('foo1');
    }
    foo(); // foo2
    function foo(){
        console.log('foo2');
    }
    foo(); // foo2
Copy the code

See what the difference is? JavaScript engines execute code in paragraphs, not line by line.

When the execution of one section is complete, proceed to the ‘preparation’ of the next section.

‘Preparation’ also called precompilation is divided into variable promotion function declaration promotion.

Executable code

Here’s what executable code is:

Executable code refers to the code formed by linking the object code, which is simply the code that can be directly executed by the machine.

What are the types of executable code?

There are three types: global code, function code, and eval code

• Global code: Source code text processed as a JavaScript Program.
• Function code: Source code text to be parsed as FunctionBody.
• Eval code: The source code text provided to the eval built-in function.

I will not elaborate on the deep knowledge of executable code here, like you can pay attention to, will be updated to release the relevant knowledge of JavaScript dry goods.

When did the ‘preparation’ take place?

For example, when code is executed, preparation takes place, which is technically called an “Execution Context.”

Execution context stack

Each code execution creates an execution context, so how do we manage that?

The JavaScript engine has an Execution Context stack (ECS) to help you manage it.

Now we simulate the execution context stack, which is defined as an array.

ECStack = []; +Copy the code

When the JavaScript engine starts parsing the code, it first encountered global code, so adding a globalContext called globalContext to the initialization context stack, and the ECStackcai’hui could be emptied only at the end of the program, so before the ECStack could end, ECStack always has a globalContext at the top.

    ECStack = [
        globalContext
    ];
Copy the code

Now look at this code:

    function foo3(){
        console.log('foo3');
    }
    function foo2(){
        foo3();
    }
    function foo1(){
        foo2();
    }
    foo1();
Copy the code

When a function is executed, an execution context is created and added to the execution context stack. When the function is finished, the execution context of the function is removed from the execution context stack.

    // Execute foo1() to create an execution context for foo1()
    ECStack.push(foo1<functionContext>);
    // ECStack = [globalContext,foo1<functionContext>];
    
    Foo2 () is executed in foo1(), creating an execution context for foo2()
    ECStack.push(foo2<functionContext>);
    // ECStack = [globalContext,foo1<functionContext>,foo2<functionContext>];
    
    Foo3 () is executed in foo2(), creating an execution context for foo3()
    ECStack.push(foo3<functionContext>);
    // ECStack = [globalContext,foo1<functionContext>,foo2<functionContext>,foo3<functionContext>];
    
    Foo3 () is executed, and the execution context of foo3() is deleted
    ECStack.pop();
    // ECStack = [globalContext,foo1<functionContext>,foo2<functionContext>];
    
    // when foo2() is executed, delete the execution context for foo2()
    ECStack.pop();
    // ECStack = [globalContext,foo1<functionContext>];
    
    Foo1 () is executed, and the execution context of foo1() is deleted
    ECStack.pop();
    // ECStack = [globalContext];
    
    // Close the program and empty the ECStack
    ECStack.pop();
    // ECStack = [];
Copy the code

Execution context

• Scope chain scope
• Variable object GO AO (precompiled)
• this

All three are removed once the execution context is removed

Last little example

    var scope = 'global scope';
    function checkscope(){
        var scope = 'local scope';
        function f(){
            return scope;
        }
        return f();
    }
    checksope();
Copy the code

    var scope = 'global scope';
    function checkscope(){
        var scope = 'local scope';
        function f(){
            return scope;
        }
        return f;
    }
    checksope()();
Copy the code

What’s the difference between two pieces of code that execute the same?

As you can probably imagine by the end of this article, it is the execution context stack that changes differently

Simulate a change in the execution context stack for two segments

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

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

That’s all for today’s sharing! If you like, you can focus on a wave of praise, thank you!