Array.prototype.map未在调用栈显示的原因及JS同步执行逻辑问询

先看测试代码：

function callback(x) {
  // also tried debugger to find .map in the call stack
  console.trace();

  return 2*x;
}

[1,2,3].map(callback);

console.log('Next line of code');

已知特性：

• 同步执行（synchronous）
• 是基于C/C++实现的原生代码封装（facade for native code）

问题解答 #

1. 为何Array.prototype.map不会出现在调用栈中？ #

Array.prototype.map是JS引擎用C/C++实现的原生函数，这类底层原生函数的栈帧不会被JS层面的调试工具（比如console.trace、浏览器调试器）展示出来，但它实际存在于回调函数的栈帧下方。

JS引擎的调用栈追踪主要聚焦于JS代码执行的栈帧，原生代码属于引擎内部实现逻辑，不属于JS代码范畴，所以调试工具默认不会把这些原生栈帧暴露给开发者。简单说：调用栈里确实有map的执行上下文，但JS层面的工具看不到它。

2. JS如何等待.map迭代完成后再执行后续代码？ #

map是同步执行的原生函数，JS是单线程模型，当调用map时，JS线程会直接进入原生代码的执行逻辑。在这个过程中，原生代码会依次调用传入的回调函数，每一次回调的执行都会被压入调用栈，回调执行完后弹出栈；直到所有元素迭代完成，map的原生代码执行完毕，才会从调用栈中退出，此时JS线程才会继续执行后续的console.log('Next line of code')。

根本不需要“持续压入回调上下文”来占用线程，而是原生函数在执行时直接占据了JS线程，直到它的所有逻辑（包括所有回调调用）都完成，线程才会释放，继续执行后续代码。

内容的提问来源于stack exchange，提问作者Nick_the_Slasher_McGurk