Promise实现的基本原理（一）

拼搏现实的明天。 2022-10-01 10:51 163阅读 0赞

# 前言 #

前几天在项目中遇到回调地狱的情况，但我在刚开始写这个项目的时候还不会用Promise，只知道它可以用来解决回调地狱，所以就用全都用回调函数解决。我是看《深入理解ES6》这本书来学Promise的，在用法和功能上讲得还是挺详细的，但在原理上没怎么讲，所以用的时候有很多地方有疑问，于是在网上找到一篇自己实现Promise的文章来理解Promise实现原理。

> ### 参考链接：[www.mattgreer.org/articles/pr…][www.mattgreer.org_articles_pr] ###

# 一、最简单的用法 #

new Promise( (resolve, reject) => {
        resolve(42)
    }).then( result => {
        console.log(result)
    })
    
    // 控制台输出
    // 42
    复制代码

这是一段最简单的Promise使用（我们先不讨论拒绝`reject`，假设所有的操作都被接受`resolve`），很开心，终于会用Promise了（心虚~），但我在使用的时候出现了一些疑问，在我说我的疑问之前，我们先说一下函数的回调

> ## 回调函数 ##
> 
> 在js中，函数a作为参数传给另一个函数b，此时函数a就叫做回调函数。在函数b的函数体中调用传进来的函数a，此时函数a就被函数b回调了。

OK，现在我们懂什么是回调函数了，我可以说我的疑问了

# 二、我的疑问 —— `resolve` 和 `then` #

### 首先我们先分析一下上面最简单的例子中有多少个回调函数，我把上面的代码重新写一下： ###

// 现在不用箭头函数，用变量直观点，这里就不写reject了
    let fn1 = function (resolve) {
        resolve(42)
    }
    
    let fn2 = function (result) {
        console.log(result)
    }
    
    new Promise(fn1).then(fn2)  // 42
    复制代码

从 `new Promise(fn1).then(fn2)` 这行代码可以很直观地看出这里有 2 个回调函数，但还没完，再看看`fn1`这个函数

let fn1 = function (resolve) {
        // resolve再这里被调用了，说明resolve是个回调函数
        resolve(42)
    }
    复制代码

## 所以现在我们的会调函数是这样的： ##

在`new Promise`的时候给Promise传入了**一个含有`resolve`这个回调函数的回调函数`fn1`**，创建完Promise对象之后，随即调用了Promise对象中的`then()`方法，给`then`方法传入了一个回调函数`fn2`。（这里涉及到一点点的`new`操作符的作用）

## 好了，分析完回调函数之后我开始想不通了： ##

*  疑问1：什么时候调用`fn1`我都不知道
 *  疑问2：我没有给`fn1`传回调函数啊
 *  疑问3：就先装作我知道`fn1`是什么时候调用的吧，那为什么在`fn1`调用`resolve`的时候，为什么看起来像调用的是我传过去给`then`的回调函数`fn2`呢
 *  啊？

# 三、实现原理 #

终于回到正题了，解决一下我上面的疑问。

在开始的那篇参考的文章中，作者实现了一个还算比较完整的Promise，内容有点长，我就只截取其中能够实现上面写的最简单Promise使用的原理。

## 疑问三解决： ##

前两个疑问的解决请看`fn`的注释

我们在用Promise对象调用then函数的时候给他传了`fn2`，也就是`onResolved`是指向`fn2`的，然后`onResolved`又传给了`handle`,在`handle`里面调用了`onResolved`，也就是说，`fn2`在`handle`里调用。

现在我们知道了`fn2`是在`handle`里被调用了。然后**看`handle`在哪里被调用**：

### 因为例子中没有异步操作，所以先不考虑padding情况： ###

> `handle`函数在`then`函数中调用

### 再看回最简单的Promise用法： ###

let fn1 = function (resolve) {
        resolve(42)
    }
    
    let fn2 = function (result) {
        console.log(result)
    }
    
    new Promise(fn1).then(fn2)  // 42
    复制代码

#### 1. 执行`new Promise(fn1)`时做了什么？ ####

> 当程序执行到`new Promise`时，`Promise`里面的语句`fn(resolve)`会马上执行，调用了我们传过去的回调函数`fn1`,并且给我们传回一个值叫resolve，这个值恰好又是一个回调函数（参数名resolve的指向是`Promise`对象中的`resolve()`函数，我们在这个例子中没有写任何的异步操作，所以东西几乎都是同步执行的）。我们又马上调用了`resolve`回调函数，并给它传入一个值42(newValue)，`state`被置为'resolved'，此时`new Promise`就全部执行完成。***总结一下上面这段话：我们这个例子没有异步操作，所以`resolve`函数在`new Promise`的时候就被调用了完了，状态改成了'resolved'***

#### 2. 执行`then(fn2)`时做了什么？ ####

> 例子中创建完`Promise`对象之后马上调用了`then`函数,并且传入了一个会调函数`fn2`（这里的`then`其实是一个微任务，这里先不做讨论，暂且当它是马上执行的）。调用`then`时，`then`调用了`Promise`对象的函数`handle`并且把onResolved指向了`fn2`，因为在`new Promise`的时候就已经把`status`改成'resolved'了，所以`handle`函数体里面的`if`语句不成立，于是就执行`onResolved(value)`并且把`new Promise`中的到的值传入，也就是说`fn2`被`handle`回调了。***总结上面的这段话：在我们调用`then`的时候调用了`handle`，并且把`new Promise`时得到的值传回给fn2回调函数***

到现在疑问三解决了。

## 总结疑问三： ##

> `fn`被调用的时候，给`fn1`传回了`Promise`的内部函数`resolve`，被`fn1`的resolve参数所接收，所以在`fn1`方法体内调用的`resolve`实际是指向`Promise`的内部函数`resolve`，并未我们给他传了42这个值，被`Promise`的`resolve`函数保存在value当中。在调用`then`函数的时候，value被`handle`传出来给`fn2`。

#### 终于解决完问题了！！ ####

关于Promise的三种状态的作用，还有如何实现串行的Promise，和reject，看完那篇参考文章的还是很好理解的，里面还有很多东西，我就不写了，去看吧。

# 四、Promise 的使用和理解中涉及到的知识点 #

*  new 关键字创建对象
 *  this关键字
 *  原型链
 *  js和浏览器的异步机制
 *  event loop

转载于:https://juejin.im/post/5caf2f51e51d456e8240dcae

[www.mattgreer.org_articles_pr]: https://link.juejin.im?target=https%3A%2F%2Fwww.mattgreer.org%2Farticles%2Fpromises-in-wicked-detail%2F