console.trace()在同步与异步闭包调用中输出差异的原因探究

第一段代码示例 #

console.log("First")

function main() { 
    var n = 10;
    
    function nested(argument) {
        console.log(n);
        console.trace();
    }

    setTimeout(nested, 0);

    console.trace();
    console.log("Last command inside main function");   
}

main();

console.trace();

console.log("Last");

这段代码中，nested通过setTimeout异步调用，会在"Last"打印完成后才执行。此时console.trace()显示的执行栈包含所有函数，包括声明nested的main函数。推测原因是：虽然main的执行上下文已经出栈，但nested作为闭包仍能访问main的词法环境。

第二段代码示例 #

console.log("First")

function main() { 
    var n = 10;
    
    function nested(argument) {
        console.log(n);
        console.trace();
    }
    console.trace();

    console.log("Last command inside main function");   
    return nested;
}

var hello = main();

hello();

console.log("Last");

这段代码中，nested从main返回后被同步调用，此时console.trace()仅显示nested和全局匿名函数在执行栈中。

疑问 #

为什么第二种情况的执行栈没有包含所有函数？

解答 #

这是因为执行栈记录的是当前代码的调用链，而闭包保存的是词法环境，二者不是一回事。

在第二段代码的执行流程里：

1. 调用main()时，main进入执行栈，执行完成后main的执行上下文出栈，仅将nested函数（带着对main词法环境的引用）返回给hello变量。
2. 当调用hello()（即nested）时，是在全局上下文直接触发的，此时执行栈的调用链就是「全局匿名函数 → nested」，main已经不在当前的调用链路里了，所以console.trace()不会显示它。

而第一段代码里，setTimeout属于异步任务，它的回调nested会在宏任务队列中等待，直到当前执行栈清空（包括main执行完毕、console.log("Last")执行完成）后才会被推入执行栈执行。浏览器调试工具会额外保留异步回调的调用溯源，把触发它的main函数也显示在栈追踪里，这是浏览器为方便调试异步代码做的优化，并非main真的存在于当前执行栈中。

内容的提问来源于stack exchange，提问作者rohan-verma01