JavaScript解析 上下文栈

执行上下文栈

JavaScript使用执行上下文栈（Execution context stack，ECS）来管理执行上下文，遇到可执行代码，会进行压栈和出栈操作。

为了模拟执行上下文栈的行为，我们假定执行上下文栈如下

ECStack = [ ];

当JavaScript开始执行代码时，最先遇到的是全局代码，所以初始化时，会先向执行上下文栈中压入应该全局可执行上下文，我们用globalContext表示，当且仅当整个应用程序结束的时候，ECStack 才会被清空，因此，程序结束之前，globalContext永远在栈底。

ECStack = [
    globalContext
];

示例代码

当执行一个函数时，会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕时才会出栈，让我们来看一段示例代码

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

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

上面的代码的处理方式如下：

// 伪代码

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

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

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

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

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

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

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

思考问题

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()();

上面这两段代码的执行结果相同，但究竟有哪里不同呢？

答案就是，执行上下文栈的变化不同。

让我们模拟第一段代码的运行过程：

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

让我们模拟第二段代码的运行过程：

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

函数有括号与无括号的区别

此处还需要补充一下函数调用时有括号与无括号的区别。

function fun() {
	return 1;
};

let a = f();
let b = f;

console.log(a);
console.log(b);
// a是函数，b是5

其中，使用f()时，表示需要调用函数执行，此时，函数实际上等于函数的返回值或者执行效果，也就是说函数带括号代表会即时执行函数体代码。

使用f时，是把函数名作为函数指针，此时返回的不是函数的运行结果，因为函数并不是即时执行，只是传递了函数体所在的地址位置，在需要的时候找到函数体去执行。

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

所以，上面这段代码，函数f要等到checkscope函数返回后（即checkscope函数执行完毕后）才执行。

参考

JavaScript深入之执行上下文栈