JavaScript中Callback与Promise是如何实现异步特性的？

首先明确核心逻辑：JavaScript本身确实是单线程同步执行的语言，仅拥有一个调用栈，异步能力并非JS语言内置，而是由其运行的宿主环境（浏览器、Node.js等）配合**事件循环（Event Loop）**机制提供。 #

基础运行规则 #

JS引擎执行代码的逻辑非常明确：

• 同步代码按顺序执行，执行时将函数压入调用栈，执行完成后弹出栈
• 仅当调用栈完全清空时，才会处理队列中存储的异步回调任务

Callback的异步实现逻辑 #

我们日常用到的异步回调（比如setTimeout回调、DOM事件回调、网络请求回调），本质是宿主环境调度的结果：

• 当JS引擎执行到异步调用语句时，会直接将耗时任务交给宿主环境的对应模块处理（比如把setTimeout的计时任务交给浏览器的定时器线程，把Ajax请求交给网络线程），不会阻塞后续同步代码的执行
• 宿主环境的模块完成对应任务后，会将传入的callback函数放入*宏任务队列（Macro Task Queue）*等待执行
• 等JS引擎调用栈清空后，事件循环会依次取出宏任务队列中的回调函数，压入调用栈执行，实现异步执行效果

示例代码：

console.log('同步代码1');
setTimeout(() => {
  console.log('setTimeout异步回调执行')
}, 0);
console.log('同步代码2');
// 实际输出顺序：同步代码1 → 同步代码2 → setTimeout异步回调执行

哪怕延时设置为0，回调也不会立即执行，必须等待调用栈清空后才会被事件循环调度。 #

Promise的异步实现逻辑 #

Promise的回调（.then/.catch/.finally绑定的函数）属于优先级更高的微任务（Micro Task），执行规则和普通回调有差异：

• 当Promise的状态从pending变为fulfilled或rejected时，对应的回调函数会被放入微任务队列
• 事件循环的调度优先级为：调用栈清空后，先执行完微任务队列中的所有任务，才会去宏任务队列取出第一个任务执行

示例代码：

console.log('同步代码1');
setTimeout(() => {
  console.log('宏任务回调执行')
}, 0);
Promise.resolve().then(() => {
  console.log('Promise微任务回调执行')
})
console.log('同步代码2');
// 实际输出顺序：同步代码1 → 同步代码2 → Promise微任务回调执行 → 宏任务回调执行

常见误区说明 #

• Callback和Promise本身只是异步任务的载体，不直接提供异步能力，真正的异步调度由宿主环境和事件循环完成
• 我们常说的JS单线程，指的是JS引擎的执行线程只有一个，宿主环境本身是多线程的，各类耗时任务由宿主的其他线程处理，处理完成后仅把回调推入任务队列等待JS引擎执行，所以不会阻塞主线程的同步代码运行

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