深入理解Javascript之Callstack&EventLoop

2024-01-15 19:27:59

前言

众所周知，JavaScript是一个单线程的语言。这意味着，在JavaScript中，同一时间只能做一件事情。这样的设计有一些优点，例如简单，避免了多线程中复杂的状态同步，写程序时不用考虑并发访问。但同时也带来了一些其他问题，其中比较突出的一个问题是：代码逻辑不直观。由于JavaScript是单线程的，因此代码的执行顺序与我们编写的顺序并不完全一致。这就导致了我们经常会遇到一些难以理解的现象，例如：回调函数的执行时机、事件循环的运行机制等。

Callstack和EventLoop

为了理解JavaScript是如何运行的，我们需要首先了解Callstack和EventLoop这两个概念。

Callstack

Callstack，也称为调用栈，是JavaScript用来管理函数调用顺序的数据结构。当一个函数被调用时，它会被压入Callstack的顶部。当函数执行完毕后，它会被从Callstack中弹出。

EventLoop

EventLoop，也称为事件循环，是一个不断循环的事件处理机制。它负责从事件队列中获取事件并将其分发给相应的事件处理函数。

JavaScript的执行过程

JavaScript的执行过程可以分为以下几个步骤：

主线程从入口函数开始执行。
当遇到函数调用时，将函数压入Callstack，并开始执行函数。
当函数执行完毕后，将函数从Callstack中弹出。
主线程继续执行，直到遇到下一个函数调用或事件。
当遇到事件时，将事件放入事件队列。
EventLoop从事件队列中获取事件并将其分发给相应的事件处理函数。
事件处理函数执行完毕后，EventLoop继续从事件队列中获取事件并将其分发给相应的事件处理函数。

异步编程

在JavaScript中，我们经常会遇到异步操作。异步操作是指不会立即返回结果的操作，例如：网络请求、定时器、用户交互等。当我们执行异步操作时，JavaScript不会等待操作完成，而是会继续执行后面的代码。当异步操作完成后，JavaScript会将操作的结果放入事件队列中，等待EventLoop将其取出并分发给相应的事件处理函数。

回调函数

回调函数是JavaScript中处理异步操作最常用的方法。回调函数是一个在异步操作完成后被调用的函数。当我们执行异步操作时，我们需要提供一个回调函数作为参数。当异步操作完成后，JavaScript会将操作的结果作为参数传递给回调函数，并执行回调函数。

Promise

Promise是JavaScript中处理异步操作的另一种方式。Promise是一个对象，它代表一个异步操作的结果。当我们执行异步操作时，我们可以创建一个Promise对象。当异步操作完成后，Promise对象的状态会变成“resolved”或“rejected”，并触发相应的事件。我们可以使用.then()方法来监听Promise对象的状态变化，并执行相应的操作。

async/await

async/await是JavaScript中处理异步操作的第三种方式。async/await是一种语法糖，它允许我们使用同步的方式编写异步代码。当我们使用async/await时，我们需要将函数声明为async函数。在async函数中，我们可以使用await来等待异步操作完成。当异步操作完成后，await后面的代码才会执行。