JS 执行机制|极客笔记

JS 执行机制

JavaScript 是一种高级的、解释型的编程语言，广泛应用于 Web 开发中。学习 JavaScript 不仅仅是学习语法规则和各种 API，还需要深入了解其执行机制。了解 JavaScript 的执行机制，有助于我们编写高效且可靠的代码。

1. 单线程执行

JavaScript 是单线程执行的语言，意味着一次只能执行一个任务。这与其他多线程语言不同，比如 Java 或 Python 等。这里的单线程，指的是 JavaScript 引擎在执行 JavaScript 代码时，一次只会有一个主线程用于处理任务。

2. 执行上下文

在 JavaScript 中，每当调用函数时，都会创建一个执行上下文（Execution Context）。执行上下文是一个抽象概念，用来描述 JavaScript 代码在运行时的环境。

执行上下文包括三个重要组成部分：

变量对象（Variable Object）：用于存储变量、函数声明和函数参数。
作用域链（Scope Chain）：用于解析变量的访问权限。
this 指向：指向函数执行的上下文。

3. 执行栈

执行栈（Execution Stack）是用来存储执行上下文的栈结构，遵循“后进先出”的原则。当 JavaScript 引擎执行代码时，会将当前执行上下文压入执行栈，执行完毕后再弹出执行上下文。

下面是一个简单的示例代码：

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

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

bar();

在这个示例中，执行栈的变化如下：

执行全局上下文，将 bar() 函数压入执行栈。
执行 bar() 函数，将 console.log("bar") 压入执行栈。
执行 console.log("bar")，输出 “bar”，弹出执行栈。
调用 foo() 函数，将 foo() 函数压入执行栈。
执行 foo() 函数，将 console.log("foo") 压入执行栈。
执行 console.log("foo")，输出 “foo”，弹出执行栈。
foo() 函数执行完毕，弹出执行栈。
bar() 函数执行完毕，弹出执行栈。

4. 事件循环

JavaScript 是事件驱动的语言，主要依靠事件循环（Event Loop）机制来实现异步编程。事件循环是 JavaScript 运行时的一个特性，用于处理异步事件和回调函数。

事件循环的机制包括以下几个步骤：

从任务队列中取出一个任务：主要分为微任务队列（Microtask Queue）和宏任务队列（Macrotask Queue）。
执行任务：执行任务并更新执行栈。
检查是否存在微任务：如果存在微任务，则依次处理微任务队列中的任务。
检查是否存在宏任务：如果存在宏任务，则取出一个宏任务放入执行栈执行。
重复上述步骤：不断循环执行，直到所有任务队列为空。

5. 宏任务和微任务

在执行异步任务时，会将任务分为宏任务（Macrotask）和微任务（Microtask）。宏任务主要包括定时器（setTimeout/setInterval）、事件监听器、I/O 等，而微任务则包括 Promise、process.nextTick 等。

下面是一个简单的示例代码：

console.log("Start");

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

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

console.log("End");

在这个示例中，执行顺序如下：

执行全局上下文，打印 “Start”。
将 setTimeout 和 Promise 任务放到任务队列中，并执行 console.log("End")。
主线程空闲时，先执行微任务队列中的 Promise 任务。
执行 Promise 任务，打印 “Promise”。
继续检查，执行宏任务队列中的 setTimeout 任务，打印 “setTimeout”。

6. 异步编程

在 JavaScript 中，常常要处理异步任务。常见的异步编程方式包括回调函数、Promise、Generator、Async/Await 等。

下面是一个使用 Promise 处理异步任务的示例代码：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 2000);
  });
}

fetchData().then((data) => {
  console.log(data);
});

在这个示例中，通过 Promise 封装异步任务，可以更加方便地处理异步操作。当任务执行完毕后，通过 then 方法来处理返回的数据。