JavaScript execution context stack depth of

JavaScript execution context stack depth of

Order execution?

If you want to ask the JavaScript code execution order, then surely the developers of JavaScript written will have a visual impression that the execution order, after all:

var foo = function () {

    console.log('foo1');

}

foo();  // foo1

var foo = function () {

    console.log('foo2');

}

foo(); // foo2

But look at this code:

function foo() {

    console.log('foo1');

}

foo();  // foo2

function foo() {

    console.log('foo2');

}

foo(); // foo2

Printed result is two foo2.

This is because the JavaScript engine does not line by line analysis and implementation program, but paragraph by paragraph analysis of the implementation. When we execute a piece of code, it will be a "preparatory work", such as the first example of a variable lift, functions, and the second example of improvement.

But this article really want you to think about is: this "piece by piece" in the "segment" is exactly how divided it?

We will do "preparatory work" in the end JavaScript engine when it encounters some kind of code?

Executable code

JavaScript executable code (executable code) types: global code, the function code, the eval code.

For example, when performing a function, it will carry out the preparatory work, the "preparatory work", let us use a more professional point of view, is called "execution context (execution context)".

Execution context stack

We write the function more to go, how to manage the execution context to create so much of it?

JavaScript engine creates an execution context stack (Execution context stack, ECS) to manage the execution context

In order to simulate the behavior of the execution context stack, let's define the execution context stack is an array:

ECStack = [];

Just when JavaScript code began to explain the implementation of, the first global code is encountered, it will first initialize when pressed into a global execution context to an execution context stack, we express it with globalContext, and only when the entire application At the end of, ECStack will be cleared, so before the end of the program, ECStack the bottom will always have a globalContext:

ECStack = [
    globalContext
];

JavaScript is now experiencing the following code:

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

When a function is executed, an execution context is created and pushed on the execution context stack, when the function completes, execution of the function will be ejected from the context stack. Know this works, let's look at how to deal with the above code:

// 伪代码

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中竟然调用了fun2，还要创建fun2的执行上下文
ECStack.push(<fun2> functionContext);

// 擦，fun2还调用了fun3！
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

// javascript接着执行下面的代码，但是ECStack底层永远有个globalContext

Answers Questions:

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


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

As the result of two pieces of code execution, for the local scope, but two pieces of code exactly what difference will it make?

The answer is to change the execution context stack is not the same.

Let's simulate first piece of code:

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

Let us simulate the second paragraph of code:

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