JS 基础与高级应用: JS运行机制 & Promise

JavaScript 作为一种脚本语言，其运行原理涉及到进程、线程、事件循环等概念。在浏览器环境中，JavaScript 的运行方式和其他语言有所不同，深入了解 JavaScript 的运行原理对于开发者来说至关重要。同时，Promise 作为 JavaScript 中处理异步操作的一种机制，也是 JavaScript 开发中常用的工具之一。本文将从进程、线程、浏览器原理开始介绍 JavaScript 的运行原理，然后深入探讨 Promise 的概念、原理以及手写 Promise 的实现。

JS 运行原理机制

进程与线程

在讨论 JavaScript 的运行原理之前，我们先来了解一下进程和线程的概念。进程是操作系统中资源分配的最小单位，而线程是 CPU 调度的最小单位。在并发与并行的概念中，我们可以理解为并发是指多个任务交替进行，而并行是指多个任务同时进行。进程和线程之间的区别在于进程是独立的资源分配单位，而线程是 CPU 调度的最小单位。

浏览器原理与线程协同方式

在浏览器环境中，JavaScript 是单线程运行的，这意味着它一次只能执行一个任务。但是，浏览器本身是多线程的，它包括了多个线程来处理不同的任务，比如 GUI 渲染线程、JavaScript 引擎线程、定时器线程、异步请求线程、事件触发器等。这些线程需要协同工作，以实现页面的渲染和交互。

JavaScript 引擎线程：
- 作用： 负责解析和执行 JavaScript 代码。
- 协作关系： 当 JavaScript 引擎线程执行 JavaScript 代码时，会阻塞 GUI 渲染线程的执行，因此需要尽量减少 JavaScript 代码的执行时间，以避免页面出现卡顿现象。
GUI 渲染线程：
- 作用： 负责解析 HTML、CSS，构建 DOM 树和 CSSOM，并进行页面的布局和绘制。
- 协作关系： 当 GUI 渲染线程执行页面的布局和绘制时，会阻塞 JavaScript 引擎线程的执行。因此，为了保持页面的流畅性，需要尽量减少 JavaScript 代码的执行时间。
定时器线程：
- 作用： 负责处理定时器任务的执行。
- 协作关系： 定时器线程会接收 JavaScript 引擎线程分配的定时器任务，并按时执行这些任务。定时器任务的执行不会阻塞其他线程的执行。
异步请求线程：
- 作用： 负责处理网络请求等异步操作。
- 协作关系： 异步请求线程会接收 JavaScript 引擎线程分配的异步网络请求任务，并执行这些任务。异步请求的执行不会阻塞其他线程的执行。
事件触发线程：
- 作用： 负责接收和处理事件，并将事件回调插入到任务队列中。
- 协作关系： 事件触发线程接收到各种事件，如鼠标点击、键盘输入等，然后将相应的事件回调插入到任务队列中，等待 JavaScript 引擎线程的执行。

事件循环 & 任务队列

JavaScript 的事件循环机制是其运行的核心机制之一。事件循环由主调用栈和任务队列组成。在 JavaScript 中，永远只有一个线程在执行代码，而事件循环机制确保了任务的顺序执行。当主调用栈为空时, 事件循环的执行顺序遵循先执行微任务，再执行宏任务的原则。微任务包括 Promise 的 then 方法、MutationObserver 等，而宏任务则包括定时器回调、DOM 事件回调等。

事件循环（Event Loop）：
- 定义： 是 JavaScript 引擎处理任务和事件的机制，保证代码的顺序执行。
- 主要组成部分： 主调用栈（Call Stack）和任务队列（Task Queue）。
- 原理： 当主调用栈为空时，事件循环会从任务队列中取出一个任务执行，然后继续等待下一个任务。
- 执行顺序： 遵循先执行微任务（Microtask），再执行宏任务（Macrotask）的原则。
- 示例： 在浏览器中，事件循环负责处理 DOM 事件、定时器回调等任务的执行。
任务队列（Task Queue）：
- 定义： 是存放待执行任务的队列，包括宏任务和微任务。
- 种类： 分为宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。
- 特点：
  - 宏任务队列：存放宿主环境触发的任务，如定时器回调、DOM 事件回调等。
  - 微任务队列：存放 JavaScript 引擎发起的任务，如 Promise 的 then 方法、MutationObserver 的回调等。
- 执行优先级： 微任务的执行优先级高于宏任务，会在宏任务执行之前立即执行。
- 示例： 微任务队列中的任务通常用于处理异步操作的结果或状态更新，宏任务队列中的任务用于处理宿主环境触发的事件和定时器回调等。

宏任务 & 微任务

宏任务（Macrotask）：
- 调度方式： 由宿主环境（浏览器或 Node.js）在合适的时机决定执行。
- 示例： 包括定时器回调、DOM 事件回调、网络请求回调等，这些任务由宿主环境触发并放入任务队列中等待执行。
- 优先级： 宏任务的优先级较低，通常会在微任务执行完毕后才执行。
微任务（Microtask）：
- 调度方式： 由 JavaScript 引擎主动发起调度，通常在宏任务执行完毕之后立即执行。
- 示例： 主要包括 Promise 的 then 方法、MutationObserver 的回调等，这些任务由 JavaScript 引擎在特定时刻触发并放入微任务队列中。
- 优先级： 微任务的优先级较高，会在宏任务执行之前立即执行，确保了优先级较高的任务能够及时执行。

Tick 的概念

Tick 是事件循环中的一个计时单位，可以看作是一个事件循环的周期。在每个 Tick 中，事件循环会执行一次循环，处理主调用栈中的任务和任务队列中的任务。

事件循环的周期

一个完整的事件循环周期包括以下步骤：

执行主调用栈中的任务： 在一个 Tick 开始时，首先执行主调用栈中的任务，直到主调用栈为空。
处理微任务队列中的任务： 当主调用栈为空时，事件循环会检查微任务队列中是否有任务。如果有，会依次执行所有微任务，直到微任务队列为空。
处理宏任务队列中的任务： 如果微任务队列为空，事件循环会检查宏任务队列中是否有任务。如果有，会从宏任务队列中取出一个任务执行，直到执行完所有的宏任务或者遇到一个长时间运行的任务。
更新渲染： 在每个 Tick 结束时，浏览器会检查是否需要更新页面的渲染，然后进行页面的重绘和重排。
等待下一个 Tick： 一次完整的事件循环周期结束后，事件循环会等待下一个 Tick 开始，继续执行下一个周期。

了解事件循环与任务队列的工作原理以及 Tick 的概念对于理解 JavaScript 的异步编程模型至关重要。通过掌握事件循环的周期，我们可以更好地理解 JavaScript 的执行顺序，并优化代码以提高性能和用户体验。

Promise

出现背景

在 Web 开发中，处理异步操作是一项常见的任务，例如发起网络请求、读取文件、处理定时器等。在早期，这些异步操作通常通过回调函数来处理，但随着业务复杂度的增加，回调函数嵌套的问题变得越来越突出，导致代码难以理解和维护，形成了所谓的 "回调地狱"。为了解决这个问题，Promise 应运而生。

Promise 的状态：

pending（等待）：Promise 对象初始状态，表示异步操作还在进行中，还未完成也未失败。
fulfilled（已履行）：表示异步操作成功完成，此时会调用 Promise 的 resolve 方法，将结果值传递给 then 方法。
rejected（已拒绝）：表示异步操作失败，此时会调用 Promise 的 reject 方法，将错误原因传递给 then 方法或 catch 方法。

执行流程：

创建 Promise 对象：通过 new Promise() 创建一个 Promise 实例，传入执行器函数 executor。
executor 函数执行：executor 函数立即执行，可能是异步操作，也可能是同步操作。
状态变更 ：
- 如果 executor 函数调用了 resolve 方法，Promise 的状态变为 fulfilled，并将结果值传递给 then 方法。
- 如果 executor 函数调用了 reject 方法，Promise 的状态变为 rejected，并将错误原因传递给 then 方法或 catch 方法。
注册回调函数 ：
- 使用 then 方法注册回调函数，then 方法接收两个参数：onFulfilled 和 onRejected，分别表示状态变为 fulfilled 和 rejected 时的回调函数。
- 使用 catch 方法注册错误处理函数，捕获 Promise 链中的错误。
链式调用 ：
- then 方法返回一个新的 Promise 对象，可以实现链式调用，即可以在一个 then 方法中继续调用下一个 then 方法。
- catch 方法也返回一个新的 Promise 对象，可以用于捕获前面 then 方法中的错误。
状态传递 ：
- then 方法中的回调函数可以返回一个新的 Promise 对象，以实现状态传递，即将一个 Promise 对象的状态传递给另一个 Promise 对象。
执行顺序 ：
- 执行顺序遵循先执行微任务（Promise 的 then 方法、MutationObserver 等），再执行宏任务（定时器回调、DOM 事件回调等）的原则。
- 在每个任务（微任务或宏任务）执行完毕后，会检查是否有微任务需要执行，如果有，则立即执行微任务队列中的所有微任务，直到微任务队列为空为止。

Promise 的组成部分

Promise 是 JavaScript 中处理异步操作的对象，它代表了一个异步操作的最终完成或失败，并可以返回其结果值或错误原因。

executor 函数：

Promise 构造函数接收一个执行器函数（executor），该函数在 Promise 对象被创建时立即执行。executor 函数有两个参数：resolve 和 reject，用于改变 Promise 的状态为成功态（fulfilled）或失败态（rejected）。

实例方法：

then 方法：Promise 实例的 then 方法用于注册在 Promise 对象状态发生变化时的回调函数，接收两个参数：onFulfilled 和 onRejected，分别表示状态变为 fulfilled 和 rejected 时的回调函数。then 方法返回一个新的 Promise 对象，可以实现链式调用。
catch 方法：Promise 实例的 catch 方法是 then 方法的简化版本，用于注册 Promise 对象状态变为 rejected 时的回调函数。它等价于 then(null, onRejected)，用于捕获 Promise 链中的错误。

全局 API：

Promise.all：接收一个 Promise 数组作为参数，当所有 Promise 对象都变为 fulfilled 时，返回一个新的 Promise 对象，并将所有 Promise 的结果值以数组形式传递给 then 方法。
Promise.race：接收一个 Promise 数组作为参数，返回一个新的 Promise 对象，一旦有任何一个 Promise 对象变为 fulfilled 或 rejected，就立即将该 Promise 对象的结果传递给 then 方法。

手写 Promise

js 复制代码

const PENDING = 'PENDING'; // 定义常量 PENDING，表示 Promise 的初始状态
const FULFILLED = 'FULFILLED'; // 定义常量 FULFILLED，表示 Promise 的成功状态
const REJECTED = 'REJECTED'; // 定义常量 REJECTED，表示 Promise 的失败状态

// 完整版 Promise 类
class myPromise {
    constructor(executor) {
        // 初始化 Promise 的状态、值和原因
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;

        // 存储成功和失败状态下的回调函数
        this.onResolvedCallbacks = [];
        this.onRejectedCallbacks = [];

        // 定义 resolve 函数，用于将状态从 pending 变为 fulfilled，并执行成功状态下的回调函数
        let resolve = value => {
            if (this.status === PENDING) {
                this.status = FULFILLED;
                this.value = value;
                this.onResolvedCallbacks.forEach(fn => fn());
            }
        };

        // 定义 reject 函数，用于将状态从 pending 变为 rejected，并执行失败状态下的回调函数
        let reject = reason => {
            if (this.status === PENDING) {
                this.status = REJECTED;
                this.reason = reason;
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        };

        try {
            // 执行执行器函数 executor，并传入 resolve 和 reject 函数
            executor(resolve, reject);
        } catch (error) {
            // 如果执行过程中出现异常，则将状态变为 rejected，并将异常原因传递给 reject 函数
            reject(error);
        }
    }

    // then 方法用于注册成功和失败状态下的回调函数，并返回一个新的 Promise 对象
    then(onFulfilled, onRejected) {
        // 判断回调函数是否为函数类型，如果不是，则返回一个默认的回调函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : error => { throw error };

        let promise2 = new myPromise((resolve, reject) => {
            // 处理状态为 fulfilled 时的逻辑
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        this.resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0);
            }

            // 处理状态为 rejected 时的逻辑
            if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason);
                        this.resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0);
            }

            // 处理状态为 pending 时的逻辑
            if (this.status === PENDING) {
                // 将成功和失败状态下的回调函数添加到对应的数组中
                this.onResolvedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            this.resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });

                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            this.resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
            }
        });

        // 返回新的 Promise 对象
        return promise2;
    }

    // catch 方法用于捕获 Promise 链中的错误，并返回一个新的 Promise 对象
    catch(onRejected) {
        // 调用 then 方法，注册失败状态下的回调函数
        return this.then(null, onRejected);
    }

    // resolvePromise 方法用于处理 Promise 的链式调用
    resolvePromise(promise2, x, resolve, reject) {
        // 如果 promise2 和 x 指向同一个对象，则抛出错误，防止循环引用
        if (promise2 === x) {
            return reject(new TypeError('Chaining cycle detected for promise'));
        }

        // 标识是否已经调用过成功或失败状态的回调函数
        let called = false;

        // 如果 x 是 Promise 对象，则递归地调用 resolvePromise 方法
        if (x instanceof myPromise) {
            x.then(
                y => {
                    this.resolvePromise(promise2, y, resolve, reject);
                },
                error => {
                    reject(error);
                }
            );
        }
        // 如果 x 是对象或函数，则尝试调用其 then 方法
        else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
            try {
                let then = x.then;
                if (typeof then === 'function') {
                    then.call(
                        x,
                        y => {
                            if (called) return;
                            called = true;
                            this.resolvePromise(promise2, y, resolve, reject);
                        },
                        error => {
                            if (called) return;
                            called = true;
                            reject(error);
                        }
                    );
                } else {
                    // 如果 x 是普通对象，则直接将其作为成功状态的返回值
                    resolve(x);
                }
            } catch (error) {
                if (called) return;
                called = true;
                reject(error);
            }
        } else {
            // 如果 x 是基本类型，则直接将其作为成功状态的返回值
            resolve(x);
        }
    }
}

// 测试用例
const asyncOperation = new myPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('异步逻辑 等待1s');
    }, 1000);
});

asyncOperation
    .then(value => {
        console.log('then:', value);
        return '1. 第一个then的返回';
    })
    .then(value => {
        console.log('Second then:', value);
        return new myPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('2. 第二个then的返回');
            }, 500);
        });
    })
    .then(value => {
        console.log('Third then:', value);
        throw new Error('3. 第三个then会报一个错误');
    })
    .catch(error => {
        console.error('Catch:', error.message);
    });

扩展

栈（Stack）

栈是一种后进先出（Last In First Out，LIFO）的数据结构，类似于我们日常生活中的一摞书或者一堆盘子。在栈中，最后入栈的元素会被最先弹出。

特点：

后进入栈的元素会先出栈，先进入栈的元素会后出栈。
只允许在栈顶进行插入（压栈）和删除（弹栈）操作。
栈的操作主要包括压栈（Push）和弹栈（Pop）。

应用场景：

函数调用栈：函数调用时会将函数调用信息压入栈中，每次函数返回时会从栈顶弹出。
浏览器历史记录：浏览器的后退按钮可以通过栈来实现。
表达式求值：编译器和解释器常常使用栈来对表达式进行求值。

队列（Queue）

队列是一种先进先出（First In First Out，FIFO）的数据结构，类似于我们日常生活中排队的场景。在队列中，先进入队列的元素会先出队列。

特点：

先进入队列的元素会先出队列，后进入队列的元素会后出队列。
队列允许在队尾进行插入（入队）操作，在队首进行删除（出队）操作。
队列的操作主要包括入队（Enqueue）和出队（Dequeue）。

应用场景：

任务调度：操作系统中的任务调度通常使用队列来管理任务的执行顺序。
网络数据传输：网络通信中，数据包通常按照先进先出的顺序进行传输。
缓存：缓存队列可以用于限制系统资源的使用，并控制请求的处理速度。