JavaScript基础-JS 执行机制

JavaScript 作为一门广泛应用于前端开发的脚本语言，其独特的执行机制是理解其行为的关键。本文将深入探讨 JavaScript 的执行机制，包括事件循环、调用栈、任务队列等核心概念，帮助你更好地掌握这门语言。

JavaScript 是单线程的

JavaScript 最显著的特点之一就是它是单线程的。这意味着它只能同时执行一个任务。尽管现代浏览器支持多进程处理（如渲染进程、网络请求等），但 JavaScript 引擎本身在同一时刻只能处理一个操作。这种设计简化了编程模型，避免了复杂的多线程问题，比如死锁和竞争条件。

调用栈与执行上下文

当 JavaScript 引擎开始运行代码时，会使用一种叫做“调用栈”的数据结构来管理函数调用。每当执行到一个新的函数调用，就会将该函数推入调用栈中，并在函数执行完毕后将其弹出。每个函数调用都会创建一个执行上下文，包含变量对象、作用域链以及 this 值等信息。

function foo() {
    console.log('foo');
}

function bar() {
    foo();
    console.log('bar');
}

bar(); // 输出: foo, bar

在这个例子中，bar 函数被调用并压入调用栈，随后 foo 函数也被调用并压入栈顶。当 foo 执行完毕后，它从栈中弹出，接着 bar 完成执行并同样弹出。

事件循环与异步编程

虽然 JavaScript 是单线程的，但它通过事件循环机制实现了异步编程的能力。事件循环不断地检查调用栈是否为空，如果为空，则查看任务队列中是否有待处理的任务。如果有，就从任务队列中取出一个任务并推入调用栈中执行。

• 宏任务（macrotask）：包括 I/O 操作、计时器回调、DOM 事件等。
• 微任务（microtask）：主要包括 Promise 回调、MutationObserver 等。

setTimeout(() => {
    console.log('timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('promise');
});

console.log('start');
// 输出顺序: start -> promise -> timeout

在这个示例中，console.log('start') 首先被执行，之后事件循环检查微任务队列，发现有一个 Promise 回调等待执行，于是立即执行之。最后才轮到宏任务中的 setTimeout 回调被执行。

结语

感谢您的阅读！如果你有任何问题或想法，请在评论区留言交流！