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

## 为什么要写学习笔记

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

### 笔记的价值

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闭包深入理解


# React Hooks完全指南

## 什么是Hooks

Hooks是React 16.8引入的新特性，让函数组件可以使用状态和其他React特性。

## 常用Hooks

### useState - 状态管理

```jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}
```

### useEffect - 副作用处理

```jsx
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // 异步获取用户数据
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
    };
    
    fetchUser();
    
    // 清理函数
    return () => {
      console.log('组件卸载或依赖变化');
    };
  }, [userId]); // 依赖数组
  
  if (!user) return <div>Loading...</div>;
  
  return <div>{user.name}</div>;
}
```

### useContext - 上下文传递

```jsx
import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeButton />
    </ThemeContext.Provider>
  );
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>Click me</button>;
}
```

### useReducer - 复杂状态逻辑

```jsx
import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        +
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        -
      </button>
    </div>
  );
}
```

## Hooks规则

1. **只在函数组件顶层调用Hooks**
2. **不要在循环、条件或嵌套函数中调用**
3. **只在React函数组件或自定义Hooks中调用**

## 自定义Hooks

```jsx
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
  
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);
  
  return [storedValue, setStoredValue];
}

// 使用自定义Hook
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <div>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}
```

## 总结

Hooks让React函数组件功能更强大，代码更简洁。掌握常用Hooks和自定义Hooks的编写方法，能极大提升开发效率。

详细讲解React Hooks的使用方法和最佳实践。

React Hooks完全指南


# 二分查找算法详解

## 什么是二分查找

**二分查找（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 图片使用演示


# 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闭包深入理解

React Hooks完全指南

二分查找算法详解

网络和协议

代码高亮演示

Markdown 图片使用演示

代码高亮演示

Promise详解