
# 学习笔记 - 我的技术成长之路

## 为什么要写学习笔记

在技术领域，知识更新非常快，学习笔记不仅能帮助我巩固所学，还能让我在未来回顾时快速找回当时的思考。

### 笔记的价值

1. **记忆强化**：书写过程本身就是一种记忆强化
2. **知识梳理**：整理笔记时需要思考和归纳
3. **快速回顾**：需要时可以快速查阅
4. **分享交流**：帮助他人，也获得反馈

## 学习笔记分类

我将学习笔记分为以下几个类别：

### 前端技术
- JavaScript/TypeScript
- React/Vue/Next.js
- CSS/Tailwind/动画
- 浏览器原理

### 后端技术
- Node.js/Python/Go
- 数据库/缓存
- API设计/微服务
- 性能优化

### 算法与数据结构
- 经典算法实现
- 复杂度分析
- LeetCode解题记录
- 面试准备

### 系统设计
- 架构设计原则
- 分布式系统
- 高可用方案
- 设计模式

## 笔记整理方法

### 1. 结构化记录

```
├── 核心概念
├── 代码示例
├── 原理图解
├── 实践心得
└── 参考资料
```

### 2. 使用Markdown

Markdown 是最适合写技术笔记的格式：
- 支持代码高亮
- 易于版本控制
- 跨平台兼容

### 3. 定期回顾

每周花时间回顾本周的笔记，每月做一次总结。

## 开始你的学习之旅

```javascript
// 学习的路上，每一天都在进步
const learning = {
  day: 0,
  knowledge: 0,
  
  study(topic) {
    this.day++;
    this.knowledge += Math.random() * 10;
    console.log(`Day ${this.day}: 学习了 ${topic}`);
  },
  
  review() {
    this.knowledge *= 1.1; // 回顾让知识更牢固
    console.log('复习完成，知识巩固！');
  }
};

learning.study('JavaScript闭包');
learning.study('React Hooks');
learning.review();
```

## 结语

学习是一个持续的过程，希望这些笔记能记录我的成长轨迹，也希望能帮助到正在学习路上的你。

> 「Stay hungry, stay foolish.」 - Steve Jobs

记录我的技术学习历程，分享学习心得和笔记整理方法。

学习笔记 - 我的技术成长之路


# JavaScript闭包深入理解

## 什么是闭包

**闭包（Closure）** 是指函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。

## 闭包的形成条件

1. 函数嵌套
2. 内部函数引用外部函数的变量
3. 内部函数被外部引用

```javascript
function outer() {
  const outerVar = '外部变量';
  
  function inner() {
    console.log(outerVar); // inner函数可以访问outerVar
  }
  
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出: 外部变量
```

## 闭包的应用场景

### 1. 数据私有化

```javascript
function createCounter() {
  let count = 0;
  
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
```

### 2. 函数柯里化

```javascript
function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
```

### 3. 模块化

```javascript
const module = (function() {
  const privateVar = '私有变量';
  
  function privateMethod() {
    return privateVar;
  }
  
  return {
    publicMethod() {
      return privateMethod();
    }
  };
})();

console.log(module.publicMethod()); // 私有变量
console.log(module.privateVar); // undefined
```

## 闭包与内存管理

闭包会导致外部函数的作用域不会被垃圾回收，因为内部函数仍然引用着它。

```javascript
function createHeavyObject() {
  const heavyData = new Array(1000000).fill('data');
  
  return function() {
    return heavyData.length;
  };
}

const getLength = createHeavyObject();
// heavyData 仍然被引用，不会被回收
```

**注意**：合理使用闭包，避免不必要的内存泄漏。

## 总结

闭包是JavaScript中非常重要的概念，掌握它对于理解作用域、模块化和函数式编程都非常有帮助。

深入理解JavaScript闭包的概念、原理和应用场景。

JavaScript闭包深入理解


# 二分查找算法详解

## 什么是二分查找

**二分查找（Binary Search）** 是一种高效的搜索算法，适用于有序数组。

## 核心思想

每次将搜索范围缩小一半，直到找到目标元素或搜索范围为空。

## 时间复杂度

- **最优情况**：O(1) - 目标元素在中间
- **最坏情况**：O(log n) - 需要不断缩小范围

## 实现方式

### 方式一：递归实现

```javascript
function binarySearchRecursive(arr, target, left, right) {
  if (left > right) return -1;
  
  const mid = Math.floor((left + right) / 2);
  
  if (arr[mid] === target) {
    return mid;
  } else if (arr[mid] < target) {
    return binarySearchRecursive(arr, target, mid + 1, right);
  } else {
    return binarySearchRecursive(arr, target, left, mid - 1);
  }
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchRecursive(arr, 7, 0, arr.length - 1)); // 3
```

### 方式二：迭代实现

```javascript
function binarySearchIterative(arr, target) {
  let left = 0;
  let right = arr.length - 1;
  
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) {
      return mid;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  return -1;
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchIterative(arr, 9)); // 4
```

## 常见变形

### 查找第一个等于目标的元素

```javascript
function findFirstEqual(arr, target) {
  let left = 0;
  let right = arr.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) {
      result = mid;
      right = mid - 1; // 继续向左查找
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  return result;
}

const arr = [1, 2, 2, 2, 3, 4];
console.log(findFirstEqual(arr, 2)); // 1
```

### 查找最后一个小于等于目标的元素

```javascript
function findLastLessOrEqual(arr, target) {
  let left = 0;
  let right = arr.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    
    if (arr[mid] <= target) {
      result = mid;
      left = mid + 1; // 继续向右查找
    } else {
      right = mid - 1;
    }
  }
  
  return result;
}

const arr = [1, 3, 5, 7, 9];
console.log(findLastLessOrEqual(arr, 6)); // 2
```

## 应用场景

1. **有序数组查找**：数据库索引、排序后的列表
2. **二分答案**：在可能的答案范围内二分查找
3. **边界查找**：寻找插入位置、上下界

## LeetCode推荐题目

- [704. Binary Search](https://leetcode.com/problems/binary-search/)
- [35. Search Insert Position](https://leetcode.com/problems/search-insert-position/)
- [34. Find First and Last Position of Element in Sorted Array](https://leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array/)
- [153. Find Minimum in Rotated Sorted Array](https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/)

## 总结

二分查找是非常高效的搜索算法，但要求数组必须有序。掌握二分查找及其各种变形，对于解决算法问题非常有帮助。

深入理解二分查找算法的原理、实现和应用场景。

二分查找算法详解


# 网络协议

理解网络分层和应用协议。

## 网络分层模型

### TCP/IP四层模型

| 层         | 协议                   | 功能             |
| ---------- | ---------------------- | ---------------- |
| 应用层     | HTTP, HTTPS            | 提供应用服务     |
| 传输层     | TCP, UDP               | 提供数据传输     |
| 网络层     | IP, ICMP,路由器        | 提供路由选择     |
| 物理链路层 | Ethernet, Wi-Fi,交换机 | 提供数据链路服务 |

### TCP/IP五层模型

| 层         | 协议                   | 功能             |
| ---------- | ---------------------- | ---------------- |
| 应用层     | HTTP, HTTPS            | 提供应用服务     |
| 传输层     | TCP, UDP               | 提供数据传输     |
| 网络层     | IP, ICMP,路由器        | 提供路由选择     |
| 数据链路层 | Ethernet, Wi-Fi,交换机 | 提供数据链路服务 |
| 物理层     | 以太网, Wi-Fi          | 提供物理传输     |

### OSI七层模型（参考）

| 层         | 协议                                           | 功能             |
| ---------- | ---------------------------------------------- | ---------------- |
| 应用层     | 应用程序, 会话, 表示, 解密, 加密, 压缩, 解压缩 | 提供应用服务     |
| 表示层     | 数据, 文本, 图像, 音频, 视频                   | 提供数据表示     |
| 会话层     | 会话管理, 协议转换, 数据压缩                   | 提供会话管理     |
| 传输层     | TCP, UDP                                       | 提供数据传输     |
| 网络层     | IP, ICMP,路由器                                | 提供路由选择     |
| 数据链路层 | Ethernet, Wi-Fi,交换机                         | 提供数据链路服务 |
| 物理层     | 以太网, Wi-Fi                                  | 提供物理传输     |

## 应用协议

### HTTP

### URL

统一资源定位符，用于定位网络服务

http://a.com:80/news/detail?id=1234567890#h1

http: schema
a.com: domain
80: port
news/detail: path
id=1234567890: query
#h1: hash

包含一些细节：

> - 当协议是http时，默认端口号是80
> - 当协议是https时，默认端口号是443
> - schema,domain,path 是必填项

### HTTP

#### 传递消息的模式

请求-响应模式

#### 传递消息的格式

HTTP的消息格式是纯文本，文本分为三个部分

> - 请求行
> - 请求头
> - 空行
> - 请求体

```
GET /news/detail?id=1234567890 HTTP/1.1
Host: a.com:80
Content-Type: application/x-www-form-urlencoded


```

##### 请求行

> - 请求方法
> - 请求方法的取值有GET, POST, PUT, DELETE, OPTIONS, TRACE, CONNECT

> - 请求路径
> - 请求路径的取值是资源的路径，例如/news/detail?id=1234567890

> - HTTP版本
> - HTTP版本的取值有HTTP/1.0, HTTP/1.1, HTTP/2.0

##### 请求头

> - Host(request header)
> - Content-Type
>   请求体的媒体类型，例如`application/x-www-form-urlencoded`, `application/json`，`multipart/form-data; boundary=aaa`等


网络和协议


# 代码高亮演示

本文展示博客支持的代码高亮效果，包含多种编程语言示例。

## JavaScript

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to the blog, ${name}`;
}

const users = ["Alice", "Bob", "Charlie"];
users.forEach((user) => greet(user));
```

## Python

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算前10个斐波那契数
for i in range(10):
    print(fibonacci(i))
```

## TypeScript

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
```

## Go

```go
package main

import "fmt"

func main() {
    message := "Hello, World!"
    fmt.Println(message)

    // 计算平方
    for i := 1; i <= 5; i++ {
        fmt.Printf("%d² = %d\n", i, i*i)
    }
}
```

## Rust

```rust
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);

    // 过滤偶数
    let even_numbers: Vec<_> = numbers
        .into_iter()
        .filter(|&x| x % 2 == 0)
        .collect();

    println!("Even numbers: {:?}", even_numbers);
}
```

## HTML

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>示例页面</title>
  </head>
  <body>
    <div class="container">
      <h1>欢迎来到我的博客</h1>
      <p>这是一个段落。</p>
    </div>
  </body>
</html>
```

## CSS

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
```

## SQL

```sql
SELECT
    users.name,
    COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at >= '2024-01-01'
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5
ORDER BY order_count DESC
LIMIT 10;
```

## 效果说明

代码高亮功能支持以下特性：

- 关键字高亮
- 字符串高亮
- 注释高亮
- 数字高亮
- 函数名高亮
- 类型高亮

希望这个演示能帮助你了解博客的代码展示效果！

## 图片

![111](/images/posts/demo/vercel.svg)


这是一个代码高亮效果的演示文章，展示不同编程语言的语法高亮。

代码高亮演示


# Markdown 图片使用演示

本文展示在博客文章中插入图片的几种方式。

## 方式一：本地图片

将图片放在 `public/images/` 目录下，然后使用相对路径引用：

```markdown
![我的图片](/images/example.png)
```

**示例：**

![示例图片占位符](https://via.placeholder.com/800x400/667eea/ffffff?text=Local+Image+Example)

## 方式二：外部图片 URL

直接使用完整的图片 URL：

```markdown
![图片描述](https://example.com/image.jpg)
```

**示例：**

![Unsplash 图片](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80)

## 图片对齐和大小控制

你可以通过 HTML 语法来控制图片的对齐和大小：

### 居中对齐

<center>

![居中图片](https://via.placeholder.com/600x300/764ba2/ffffff?text=Centered+Image)

</center>

### 带标题的图片

> **提示：** 使用 `<center>` 标签可以让图片居中显示。

## 代码中的图片引用

在代码块中引用图片路径时不会被解析为图片：

```markdown
这里不是图片: /images/logo.png
这里才是图片: ![logo](/images/logo.png)
```

## 最佳实践

1. **使用本地图片** - 将博客相关的图片放在 `public/images/` 目录
2. **优化图片大小** - 上传前压缩图片，建议单张不超过 500KB
3. **使用 CDN** - 外部图片建议使用可靠的 CDN 服务
4. **添加 alt 文本** - 记得为图片添加描述性 alt 文本，利于 SEO 和无障碍访问

## 图片文件夹结构

建议的文件夹结构：

```
public/
├── images/
│   ├── posts/
│   │   ├── demo-image-1.png
│   │   └── demo-image-2.jpg
│   └── avatar.png
```

在文章中引用：

- `/images/posts/demo-image-1.png`
- `/images/avatar.png`

这样就可以在文章中方便地使用图片了！


演示在博客文章中如何使用图片

Markdown 图片使用演示


# 前端性能优化思路

## 编译性能

  主要是打包耗时的问题
  - 编译缓存
  - 多线程打包
  - 排除模块
  - 开发环境去hash
  - 升级/更新插件（swc,babel, rollup）
  - 微前端(巨石应用)
## 运行性能
  ## 网络传输体积大
  - 打包优化
    - Tree Shaking
    - 分块打包
    - 公共库使用cdn
  - 异步加载 （defer, async, preload, prefetch）
  ## 网络传输时间长
  - 分包缓存
  - CDN
  - 异步加载
  ## 代码执行效率低
   - Performance选项卡分析
   - 时间复杂度和空间复杂度分析
   - 内存泄漏
  ## 任务集中
    - 任务分片
    - 优先级调度

深入探讨前端性能优化的各种技巧和最佳实践，从加载优化到运行时优化

前端性能优化实战指南


# 合成事件原理以及实现

合成事件是 React 中用于处理事件的机制，它在组件之间共享事件对象，避免了事件对象的频繁创建和销毁，提高了性能。

## 为什么需要合成事件

合成事件的主要原因是性能优化。在 React 中，每个事件对象都是一个独立的实例，每次触发事件时都需要创建一个新的对象。这会导致内存泄漏和性能问题。

通过合成事件，React 能够在组件之间共享事件对象，避免了频繁创建和销毁，提高了性能。

React 通过事件委托的方式，将事件处理函数绑定到根元素上，而不是每个组件上。当事件触发时，React 会根据事件类型和目标元素，将事件处理函数调用到对应的组件上。在 fiber 可以查询到对应的绑定的事件处理函数，从而实现事件的分发。

## 事件委托流程

1. 真实 DOM 触发事件
2. 根元素通过事件委托，拿到这个事件对象
3. 根据 fiber 节点收集事件处理函数
4. 模拟捕获和冒泡流程

## 合成事件实现

### 1. SyntheticEvent 类

合成事件对象需要包装原生事件，并提供统一的 API：

```javascript
class SyntheticEvent {
  constructor(e) {
    // 保存原生事件对象
    this.nativeEvent = e;
  }

  // 合成事件对象需要提供一个和原生事件类型同名的方法阻止冒泡
  stopPropagation() {
    this._stopPropagation = true;

    if (this.nativeEvent.stopPropagation) {
      this.nativeEvent.stopPropagation();
    }
  }

  test() {}
}
```

**关键点**：
- `nativeEvent` 保存原生事件对象，方便后续访问
- `stopPropagation` 方法标记 `_stopPropagation` 为 `true`，用于控制事件流
- 同时调用原生事件的 `stopPropagation`，确保原生事件也被阻止

### 2. 事件类型名称转换

```javascript
const getTypeName = (type) => "bind" + type[0].toUpperCase() + type.slice(1);
```

这个函数将事件类型转换为自定义名称，例如：
- `click` → `bindClick`
- `change` → `bindChange`

### 3. 触发事件流

```javascript
const triggerEventFlow = (paths, type, se) => {
  for (let index = paths.length - 1; index >= 0; index--) {
    const pathNode = paths[index];
    if (!pathNode) {
      return;
    }
    const callback = pathNode[type];
    if (callback) {
      callback.call(null, se);
    }
    if (se._stopPropagation) {
      return;
    }
  }
};
```

**流程解析**：
- 从后往前遍历路径数组（模拟冒泡）
- 找到对应类型的事件处理函数并执行
- 如果检测到 `_stopPropagation` 标记，立即停止事件流

### 4. 收集事件路径

```javascript
const collectPaths = (type, beginFiber) => {
  const paths = [];

  while (beginFiber.tag !== 3) {
    const { memoizedProps, tag } = beginFiber;
    if (tag === 5) {
      // DOM 元素
      const eventHandle = memoizedProps[type];
      paths.push({
        [type]: eventHandle,
      });
    }
    beginFiber = beginFiber.return;
  }
  return paths;
};
```

**关键点**：
- `tag === 5` 表示 DOM 元素节点
- `tag === 3` 表示根节点（HostRoot）
- 从目标 fiber 向上遍历，收集所有绑定的事件处理函数
- `memoizedProps` 中存储了组件的 props，包括事件处理函数

### 5. 事件分发

```javascript
const dispatchEvent = (e, type) => {
  // 实例化合成事件对象
  const se = new SyntheticEvent(e);
  const ele = e.target;

  // 找到目标元素的 fiber 节点
  let fiber;
  for (const prop in ele) {
    if (prop.toLocaleLowerCase().includes("fiber")) {
      fiber = ele[prop];
    }
  }

  // 收集事件路径
  const paths = collectPaths(type, fiber);

  // 模拟捕获
  triggerEventFlow(paths, type + "Capture", se);

  // 模拟冒泡
  if (!se._stopPropagation) {
    triggerEventFlow(paths.reverse(), se);
  }
};
```

**流程解析**：
1. 创建合成事件对象 `se`
2. 从 `e.target` 找到对应的 fiber 节点（DOM 元素上会有 `__reactFiber$xxx` 属性）
3. 收集从目标到根的事件处理函数路径
4. 先执行捕获阶段（`type + "Capture"`）
5. 如果没有阻止冒泡，再执行冒泡阶段（`paths.reverse()`）

### 6. 添加事件监听

```javascript
// 用于根元素绑定事件，自定义事件以 bindClick 为例
export const addEvent = (container, type) => {
  container.addEventListener(type, (e) => {
    // 事件收集
    dispatchEvent(e, getTypeName(type));
  });
};
```

**使用示例**：

```javascript
// 在根元素上绑定点击事件委托
addEvent(document.getElementById('root'), 'click');
```

## 完整流程图

```
用户点击按钮
    ↓
原生事件触发 (click)
    ↓
根元素事件委托捕获
    ↓
dispatchEvent 处理
    ↓
创建 SyntheticEvent
    ↓
找到目标 fiber 节点
    ↓
collectPaths 收集事件路径
    ↓
triggerEventFlow (捕获阶段)
    ↓
triggerEventFlow (冒泡阶段)
    ↓
执行用户定义的事件处理函数
```

## Fiber Tag 类型说明

| Tag | 类型 | 说明 |
|-----|------|------|
| 3 | HostRoot | 根节点 |
| 5 | HostComponent | DOM 元素 |
| 1 | FunctionComponent | 函数组件 |
| 2 | ClassComponent | 类组件 |

## 总结

React 合成事件的核心思想是：

1. **事件委托**：将所有事件绑定到根元素，减少内存占用
2. **事件收集**：通过 fiber 树向上遍历，收集所有事件处理函数
3. **模拟事件流**：按照捕获 → 冒泡的顺序执行事件处理函数
4. **合成事件对象**：包装原生事件，提供统一的 API

这种设计使得 React 能够高效地管理事件，同时保持与原生事件行为的兼容性。

---

> **参考**：React 源码中的事件系统实现，理解 fiber 树结构和事件委托机制是掌握 React 事件处理的关键。

了解 React 合成事件的原理以及实现机制

React 合成事件原理以及实现


# Hook 的原理以及实现

## hook 内部介绍
不同状态下对应的hook 函数调用也是不同的

- HookDispatcherOnMount 负责 初始化阶段
mount 阶段： 函数组件进行初始化，调用的是 mountXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- HooksDispatcherOnUpdate 负责更新阶段
update 阶段： 函数组件进行更新，调用的是 updateXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- ContextOnlyDispatcher 负责上下文只读操作
  - 其他情况（报错）： 调用的是 throwXXX

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:throwCallback,
  useEffect:throwEffect,
  useMemo:throwMemo,
  useReducer:throwReducer,
  useRef:throwRef,
  useState:throwState,
};
```

当FC 进入render 流程的时候会判断出是渲染还是更新

```javascript
  if(current !== null && current.memoizedState !== null) {
    // 更新阶段
    ReactCurrentDIspatcher.current = HooksDispatcherOnUpdate;
  } else {
    // 初始化阶段
    ReactCurrentDIspatcher.current = HookDispatcherOnMount;
  }
```

hook 的数据结构

````javascript
const hook = {
  memoizedState: null,
  baseState: null,
  baseQueue: null,
  queue: null,
  next: null,
}
```


> 注意 memoizedState 字段 ， 在fiberNode 上也有这个阶段，与Hook 对象上存储的东西不一样
>
> - FiberNode.memoizedState 保存的时候Hook 链表中第一个链表
> - Hook 对象上存储的是某个hook 的状态








了解 React Hook 的原理以及实现机制

React Hook 原理以及实现

深入理解事件循环的原理、实现和应用场景。

事件循环


# Promise 详解

## Promise 规范

_规范_： Promise 是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使用异步代码更加清晰，简洁，统一。

这套规范最早诞生于前端社区， 规范名称为 **[Promise A+](https://promisesaplus.com/)**

Promise A+ 规定

1. 所有的异步场景，都可以看做一个异步任务，每个异步任务，在JS中应该表现为一个*对象*
2. 每个任务对象都应该有两个阶段和三个状态
   - 阶段：未决状态（unsettled）、已决状态（settled）
   - 状态：挂起状态（pending）、成功状态（fulfilled）、失败状态（rejected）
3. 状态流转
   - 挂起->成功 称为resolve;可能有一个相关的数据
   - 挂起->失败 称为reject; 可能有一个失败的原因
4. 可以针对任务进行后续处理，针对完成的后续处理称之为 onFulfilled ，针对失败的后续处理称之为 onRejected

## Promise API

ES6 提供了一套API, 实现了 Promise A+ 规范

### catch方法

`.catch(onRejected)` === `.then(null,onRejected)`

`.then(onFulfilled,onRejected)` === `.then(onFulfilled).catch(onRejected)`

### 链式调用

1. then方法 必定会返回一个新的Promise对象，也可以理解后续处理也是一个任务
2. 新任务的状态取决于后续处理的结果
   - 没有相关的后续处理， 新任务的状态和前任务的状态一致，数据为前任务的数据
   - 如果有后续处理，但是后续处理还没有执行，则新任务挂在状态
     - 后续处理执行完成后，新任务的状态和数据会根据后续处理的结果而改变
     - 后续处理失败，新任务的状态为失败状态，数据为后续处理的失败原因
     - 后续执行返回一个新的Promise对象，新任务的状态和数据会根据后续处理的结果而改变

### 静态方法

<br />

| 方法                   | 描述                                                                                                                                |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Promise.resolve(data)  | 将一个成功状态的Promise对象返回                                                                                                     |
| Promise.reject(reason) | 将一个失败状态的Promise对象返回                                                                                                     |
| Promise.all([])        | 返回一个任务数组，<br>全部成功则成功,数据为数组<br>任何一个失败则失败,数据为失败的任务数据                                          |
| Promise.any([])        | 任一成功 → 该成功值 <br> 全部失败报错提示 `AggregateError: All promises were rejected`                                              |
| Promise.allSettled([]) | 全部完成（不论成功/失败） 返回数据格式 <br> `[{"status": "rejected","reason": 1},{"status": "fulfilled","value": 2}]` ,没有失败情况 |
| Promise.race([])       | 返回最先处理好的任务，状态为最先                                                                                                    |

### 消除回调

有了Promise 异步任务有了统一的处理方式
有了统一的处理方式，ES官方就可以对其进一步优化
ES7 提供了 async/await 语法糖，进一步简化了异步代码的编写
`async` 函数的返回值是一个 Promise 对象，`await` 关键字 后面的表达式，必须是一个 Promise 对象，否则会报错

## 练习题

1. 练习1

```javascript
const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);
```

> 1 2 3 4

```javascript
const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    resolve();
    console.log(3);
  }, 0);
});

promise.then(() => {
  console.log(4);
});
console.log(5);
```

> 1 5 2 3 4

2. 练习2

```javascript
Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => console.log(res));

Promise.resolve()
  .then(() => console.log(1))
  .then(() => console.log(2))
  .then(() => console.log(3))

  .then(() => console.log(5))
  .then(() => console.log(6));
```

> 0, 1, 2, 3, 4, 5, 6

```javascript
async function m() {
  const n = await 1;
  console.log(n);
}
m();
console.log(2);
```

> 2, 1

```javascript
async function m() {
  console.log(0);
  const n = await 1;
  console.log(n);
}
(async () => {
  await m();
  console.log(2);
})();
console.log(3);
```

> 0, 3, 1, 2

```javascript
async function m1() {
  return 1;
}
async function m2() {
  const n = await m1();
  console.log(n);
  return 2;
}
async function m3() {
  const n = m2();
  console.log(n);
  return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> promise:pending, promise:pending, 4, 1, 3, 1

```javascript
var a;
var b = new Promise((resolve) => {
  console.log("promise1");
  setTimeout(() => {
    resolve();
  }, 1000);
})
  .then(() => {
    console.log("promise2");
  })
  .then(() => {
    console.log("promise3");
  })
  .then(() => {
    console.log("promise4");
  });

a = new Promise(async (resolve) => {
  console.log(a);
  await b;
  console.log(a);
  console.log("after1");
  await a;
  resolve(true);
  console.log("after2");
});
console.log("end");
```

> promise1, undefined, end, promise2, promise3, promise4, promise:pending

```javascript
async function m1() {
  return 1;
}
async function m2() {
  const n = await m1();
  console.log(n);
  return 2;
}
async function m3() {
  const n = await m2();
  console.log(n);
  return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> 4,1, 1, 2, 2, 3

```javascript
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}

console.log("script start");
setTimeout(() => {
  console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
  console.log("promise1");
  resolve();
}).then(() => {
  console.log("promise2");
});
console.log("script end");
```

> script start , async1 start , async2 , promise1 script end, async1 end, promise2 setTimeout

## 手写Promise

```javascript
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

const runMicroTask = (task) => {
  // node 环境
  if (process.nextTick) {
    return process.nextTick(task);
  }
  // 浏览器环境
  if (window.queueMicrotask) {
    return window.queueMicrotask(task);
  }
  // 其他环境
  return setTimeout(task, 0);
};

const isLikePromise = (promise) => {
  return (
    promise && typeof promise === "object" && typeof promise.then === "function"
  );
};

const isPromise = (promise) => {
  return promise instanceof MyPromise;
};

class MyPromise {
  _state = PENDING;
  _value = undefined;
  #tasks = [];
  constructor(executor) {
    try {
      executor(this._resolve.bind(this), this._reject.bind(this));
    } catch (error) {
      this._reject(error);
    }
  }

  #changeState(state, value) {
    if (this._state !== PENDING) return;
    this._state = state;
    this._value = value;
    this.#runTasks();
  }
  _resolve(value) {
    this.#changeState(FULFILLED, value);
  }
  _reject(reason) {
    this.#changeState(REJECTED, reason);
  }

  #runTasks() {
    if (this._state === PENDING) return;

    while (this.#tasks[0]) {
      const task = this.#tasks.shift();
      this.#runOneTask(task);
    }
  }
  #runOneTask({ onFulfilled, onRejected, resolve, reject }) {
    runMicroTask(() => {
      let executor;
      if (this._state === FULFILLED) {
        executor = onFulfilled;
      } else if (this._state === REJECTED) {
        executor = onRejected;
      }

      if (typeof executor !== "function") {
        if (this._state === FULFILLED) {
          resolve(this._value);
        } else {
          reject(this._value);
        }
        return;
      }

      try {
        const result = executor(this._value);
        if (isLikePromise(result)) {
          result.then(resolve, reject);
        } else {
          if (this._state === FULFILLED) {
            resolve(result);
          } else {
            reject(result);
          }
        }
      } catch (err) {
        reject(err);
      }
    });
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#tasks.push({
        onFulfilled,
        onRejected,
        resolve,
        reject,
      });
      this.#runTasks();
    });
  }
  cache(onRejected) {
    return this.then(null, onRejected);
  }
  finally(onFinally) {
    return this.then(
      (data) => {
        onFinally();
        return data;
      },
      (err) => {
        onFinally();
        throw err;
      },
    );
  }
}
```

### 手写Promise.resolve

```javascript
Promise.resolve = (reason) => {
  if (isPromise(data)) {
    return data;
  }
  return new MyPromise((resolve, reject) => {
    if (isLikePromise(data)) {
      data.then(resolve, reject);
    } else {
      resolve(data);
    }
  });
};
```

### 手写Promise.reject

```javascript
Promise.reject = (reason) => {
  return new MyPromise((resolve, reject) => {
    reject(reason);
  });
};
```

### 手写Promise.all

```javascript
MyPromise.all = (promises) => {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;
    for (const promise of promises) {
      MyPromise.resolve(promise).then((data) => {
        results[count] = data;
        count++;
        if (count === promises.length) {
          resolve(results);
        }
      });
    }
  });
};
```

### 手写Promise.allSettled

```javascript
MyPromise.allSettled = (promises) => {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;
    for (const promise of promises) {
      MyPromise.resolve(promise).then(
        (data) => {
          results[count] = {
            status: "fulfilled",
            value: data,
          };
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        },
        (err) => {
          results[count] = {
            status: "rejected",
            reason: err,
          };
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        },
      );
    }
  });
};
```

### 手写Promise.race

```javascript
MyPromise.race = (promises) => {
  return new MyPromise((resolve, reject) => {
    for (const promise of promises) {
      MyPromise.resolve(promise).then(resolve, reject);
    }
  });
};
```


深入理解Promise的原理、实现和应用场景。

记录学习，沉淀思考

最新文章

学习笔记 - 我的技术成长之路

JavaScript闭包深入理解

二分查找算法详解

网络和协议

代码高亮演示

Markdown 图片使用演示

代码高亮演示

前端性能优化实战指南

React 合成事件原理以及实现

React Hook 原理以及实现

事件循环

Promise详解