超耐心地毯式分析，来试试这道看似简单但暗藏玄机的Promise顺序执行题

壹 ❀ 引

就在昨天，与朋友聊到JS基础时，她突然想起之前在面试时，遇到了一道难以理解的Promise执行顺序题。由于我之前专门写过手写promise的文章，对于部分原理也还算了解，出于兴趣我便要了这道题的代码，想看看自己现在的理解能做到什么程度，顺便也给对方解疑答惑，代码如下：

function doSomething() {
  return Promise.resolve(1);
};

function doSomethingElse() {
  return Promise.resolve(2);
};
// 执行1
doSomething()
  .then(() => {
    return doSomethingElse()
  })
  .then(val => console.log('a', val))
// 执行2
doSomething()
  .then(() => {
    doSomethingElse()
  })
  .then(val => console.log('b', val))
// 执行3
doSomething()
  .then(doSomethingElse())
  .then(val => console.log('c', val))
// 执行4
doSomething()
  .then(doSomethingElse)
  .then(val => console.log('d', val))

// 要求给出上面4个promise的执行顺序，以及输出内容

可以看到这是一个纯Promise的执行顺序题，没有setTimeout和async await的干扰。但在我尝试分析后我发现，这道题考研的细节还挺多，如果没有深入了解过Promise源码，可以毫不夸张的说，这道题不可能做的对。而我自己手写Promise也是2个多月前的事情了，所以初次分析果然做错了。

在我重读了自己手写Promise的文章后，重新捡起了当时记录的部分细节，也非常顺利的把这道题的细节都给挖了出来，为了方便讲给朋友听，也方便自己日后回顾，这里我就做个记录，那么本文开始。

贰 ❀ 前置概念与细节分析

在题解分析之前，我先把这道题的考点单独拧出来先讲一遍。毕竟当一个问题我们觉得难到自己无法理解时，那往往是我们对于需要使用的知识掌握是非常薄弱的。如果知道考什么，我们还能根据现有的知识体系去做分析和猜测，如果考了什么都不知道，那就是猜就不知道怎么猜了。所以这一小节，我们先普及这道题中考察的细节与概念，在此之后我们再去看题解分析，起码能做到有部分概念能为自己做理解支撑。

注意，以下四个细节点在因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解一文中均有讲解，要了解底层原理还是建议阅读此文，当然你也可以先不理解原理，只是作为硬性概念先记忆，这一点大家自行安排。

贰 ❀ 壹 then()中创建微任务的次数

我们知道，new一个Promise的过程是同步的，包括.then()注册callback的行为也是同步的，真正异步的是被注册的成功以及失败的回调（它们得等待状态改变，而且不知道什么时候才会改变），且它们都是微任务。

const P1 = new Promise((resolve, reject) => {
  console.log('new Promise是同步操作')
  resolve(1);
});
setTimeout(() => {
  console.log('我是异步宏任务')
}, 0)
P1.then((e) => {
  console.log('我是异步微任务')
  console.log(e);
})
// new Promise是同步操作
// 我是异步微任务
// 我是异步宏任务

而当存在多个Promise调用需要区分执行顺序时，我们往往以.then()注册callback的顺序来决定执行顺序：

const P1 = Promise.resolve(1);
const P2 = Promise.resolve(2);
P1.then((e) => {
  console.log('我先注册的，所以先输出1')
  console.log(e);
})
P2.then((e) => {
  console.log('我后注册的，所以我后面输出2')
  console.log(e);
})
// 我先注册的，所以先输出1
// 1
// 我后注册的，所以我后面输出2
// 2

而.then的callback中往往也能再返回一个Promise，这时候就是我们所说的链式调用，而当存在多个链式调用时，我们心里会默认，只要你多.then()一次，你的执行就得往后排一次，比如：

const P1 = Promise.resolve(1);
const P2 = Promise.resolve(2);
P1.then((e) => {
    console.log(e)
    return Promise.resolve(3)
  })
  .then((e) => console.log(e));
P2.then((e) => {
  console.log(e);
})
// 1
// 2
// 3

这个例子的3一定是晚于2输出的，我们就站在宏观的角度去理解，因为3多了一层.then()，那么你肯定得比2还要往后面排一排，最后输出毫无疑问，我想很多人对于这个问题的理解都是这样的。

但是，现在请大家记住第一个硬性概念，假设.then()内部返回了一个Promise，那么这个Promise的执行得往后延后两次次，而不是一次，这是因为.then()中的Promise在改变状态到执行，底层会创建2次微任务，导致它的执行往后推两次。

来看个例子：

Promise.resolve()
  .then(() => {
    console.log(0);
    // then内部返回promise，默认理解成延迟2次后执行
    return Promise.resolve(4);
  }).then((res) => {
    console.log(res)
  })

Promise.resolve()
  .then(() => {
    console.log(1);
  }).then(() => {
    console.log(2);
  }).then(() => {
    console.log(3);
  })
// 0 1 2 3 4

先输出0，再输出1肯定毫无悬念，但是由于第一个的then()返回了一个Promise，我们默认它得往后延迟2位，所以2，3先走，4最后执行。这个例子，也是我当时手写Promise的起因，细节如果再在这里展开讲会很复杂，还是建议阅读手写Promise一文，这里大家先作为概念去记忆。

贰 ❀ 贰 Promise.then的有无返回值的区别

我们知道.then()可以返回一个Promise然后使用链式调用，但事实上也存在返回不是Promise或者不返回的情况。我们先说返回的情况。

假设返回的是Promise，那么下一个.then肯定得等待这个Promise状态发生改变才能执行，但其实我们还有返回不是Promise的情况：

Promise.resolve(1)
  .then(
    (e) => {
      console.log(1)
      return 2;
    }
  ).then((e) => {
    console.log(e)
    return 3;
  })
  .then((e) => {
    console.log(e)
  });
// 1 2 3

上述例子中返回的数字，有点类似于：

Promise.resolve(1)
  .then(
    (e) => {
      console.log(1)
      return Promise.resolve(2);
    }
  ).then((e) => {
    console.log(e)
    return Promise.resolve(3);
  })
  .then((e) => {
    console.log(e)
  });

你现在只用知道当返回一个数字或者字符串，只要不是Promise，它本质上都会被resolve转化成成功的状态，需要注意的是return 4和return Promise.resolve(4)还是有区别，比如上面创建2次微任务的例子，我们假设改成return 4：

Promise.resolve()
  .then(() => {
    console.log(0);
    // then内部返回promise，默认理解成延迟2次后执行
    return 4;
  }).then((res) => {
    console.log(res)
  })

Promise.resolve()
  .then(() => {
    console.log(1);
  }).then(() => {
    console.log(2);
  }).then(() => {
    console.log(3);
  })
// 0 1 4 2 3

可以看到此时4跑到了2,3前面，类似于只创建了一次微任务，return 4和return Promise.resolve(4)相比，后者比前者多创建一次微任务，这个细节在手写中也能体现，这里就不花篇幅再说了。

说了返回Promise和非Promise的情况，我们再来聊聊无返回的情况，比如：

Promise.resolve()
  .then(() => {
    console.log(0);
    // 没有返回
  }).then((res) => {
    console.log(res)
  })
// undefined

为什么是undefined，因为函数如果没返回值时，默认表示为返回undefined，那既然return undefined，不就是类似于return Promise.resolve(undefined)，因此输出undefined毫无疑问。

关于返回我们先聊到这，理解了这个知识点，我们可以回到文章开头的题目，看看执行2。

贰 ❀ 叁 Promise.then的值穿透

在手写Promise的文章中，我们特意提及过.then()方法的值穿透问题，如果你没看过本文，那么请将下面的话当成硬性的概念记下来。

当Promise.then()的没有提供callback，或者callback不是一个函数时，Promise会发生值穿透

我们先来看第一个例子，.then()没有提供callback的情况：

const P1 = Promise.resolve('值穿透');
P1.then((res) => {
  console.log(res); // 值穿透;
});

P1.then()
  .then()
  .then()
  .then((res) => {
    console.log(res); //值穿透
  });

上述代码中，我们创建了一个promise P1，那么第一段执行毫无悬念肯定输出值穿透。而第二个执行，我们链式调用了多个.then()并且都没有提供成功或者失败的回调，这种情况就会导致状态和值发生穿透，因此最后一个.then()还是能成功获取到值穿透。

我们再来看callback不是函数的情况，例子如下：

const P1 = Promise.resolve('值穿透');

const fn1 = () => {
  console.log(1)
};

P1.then(fn1())
  .then(1)
  .then('2')
  .then((res) => {
    console.log(res); //值穿透
  });

在这个例子中，我们并没有为任何一个.then提供一个函数，有的.then()直接丢了一个数字进去了，有的then()丢了字符串进去。这时候有同学就要说了，不对啊，你第一个then()传递的fn1()难道不是函数？

这里我们就要搞清楚一个概念了，所谓callback是传递一个函数作为callback，等状态确定了Promise帮你调用，而fn1()这玩意自己直接被调用，它哪里是一个函数呢？

我们用一个最基本的例子来解释函数调用与函数引用：

const fn2 = () => {
  return '函数调用与函数引用的区别';
}

const o = {
  f1: fn2, // 这个叫函数引用
  f2: fn2() // 这个叫函数调用
};
console.log(o.f1()); // 函数调用与函数引用的区别
console.log(o.f2); // 函数调用与函数引用的区别

我们定义了一个函数叫fn2，然后把fn2的引用赋予给了对象o的f1属性，因此我们能通过o.f1()调用fn2，这就是函数引用。

而我们将fn2()赋予给了o的f2属性，因此o.f2根本就不是一个函数，它保存的是fn2()执行之后的返回结果，这就是函数调用。

所以回到上面值穿透第二个例子，我们传递的是一个函数调用，你自己调用了，我堂堂Promise不要面子的吗，你让我等会状态改变了调用什么？而后面的.then(1) .then('2')同理，它们都不是函数，Promise会直接忽略这些无意义的传递，依旧值穿透。

而关于值穿透，若你要问我为什么，我只能说没有为什么，因为Promise就是这么实现的。这就跟你问我为什么1 + 1 = 2一样，没有为什么，因为1 + 1就是等于2，此刻它不是作为要理解的概念，而是已成为我们理解更宏观概念的工具或者基石。值穿透的本质也是为了让Promise实现链式调用，至于Promise是如何实现的这种链式调用，请参考手写Promise一文。

那么关于值穿透就说到这里，这时候你可以根据文章开头题目的执行结果，尝试的去理解题目的执行3了。

贰 ❀ 肆 Promise.then中callback的简写方式

在前文，我们提到了函数引用与函数调用，而.then()的callback在简写上其实也跟函数引用有一定关系，比如：

const fn1 = (e) => {
  console.log(e) // 1
}
Promise.resolve(1)
  .then(fn1);

// 本质上等同于
Promise.resolve(2)
  .then((e) => {
    console.log(e) //2
  })

比如上面的.then(fn1)本质上跟下面的写法是一样的，无非是前者把函数提前定义了，然后把fn1作为callback传递给了.then，后者是直接在.then里面写了一个匿名箭头函数。

同类型的简写还有：

setTimeout(console.log, 0, 'echo'); // echo
// 等同于
setTimeout((e) => {
  console.log(e)
}, 0, 'echo'); // echo

知道了这个，我们可以回头看看文章开头的执行4。

叁 ❀ 题解分析

上文我们阐述了这道题的4个考点，大家可以看完后结合我给的概念再回头根据输出，反向思考下为什么，接下来我来改写上面题目，给出我的题解分析：

function doSomething() {
  return Promise.resolve(1);
};

function doSomethingElse() {
  return Promise.resolve(2);
};
// 执行1
doSomething()
  .then(() => {
    // 因为返回了一个promise,它又在then里面，3次微任务后输出 a 2
    return doSomethingElse()
  })
  .then(val => console.log('a', val))
// 执行2
doSomething()
  .then(() => {
    // 这里有执行，但是没返回，所以等同于resolve(undefined)，2次微任务后输出b undefined
    doSomethingElse()
  })
  .then(val => console.log('b', val))
// 执行3
doSomething()
  // callback直接不是一个函数，值穿透，相当于把前面的状态和值传递下去，所以也是2次微任务后输出 c 1
  .then(doSomethingElse())
  .then(val => console.log('c', val))
// 执行4
doSomething()
  // .then(doSomethingElse)
  // callback是函数引用，等同于
  .then(() => {
    // 与执行1相同，then里面返回promise，3次微任务后输出 d 2
    return doSomethingElse();
  })
  .then(val => console.log('d', val))

// 综合一下，2次微任务的先执行，3次微任务的谁先注册谁先执行，因此输出为：
// b undefined
// c 1
// a 2
// d 2

先看执行1：

doSomething()
  .then(() => {
    return doSomethingElse()
  })
  .then(val => console.log('a', val))

概念1说了，.then里面返回Promise时，创建2次微任务，因为自己又被包裹在.then里面，结合起来就是doSomething().then()创建了一次微任务，然后return的doSomethingElse()自己又是一个Promise，所以doSomethingElse().then()创建了2次微任务，一起三次微任务，我们记录为3-a-2;

再来分析执行2：

doSomething()
  .then(() => {
    // 这里有执行，但是没返回，所以等同于resolve(undefined)，2次微任务后输出b undefined
    doSomethingElse()
  })
  .then(val => console.log('b', val))

根据概念2，很明显这个doSomethingElse()前面没有return，这就导致doSomethingElse返回的Promise不能被二次return出去，既然没返回，那就是默认理解成resolve(undefined)，由于不是返回了一个Promise，所以只会创建2次微任务，我们记录为2-b-undefined。

执行3：

doSomething()
  // callback直接不是一个函数，值穿透，相当于把前面的状态和值传递下去，所以也是2次微任务后输出 c 1
  .then(doSomethingElse())
  .then(val => console.log('c', val))

参考概念3，由于.then()接收的是一个函数调用，根本就不是一个函数，这里直接值穿透，与执行2类似，一共创建2次微任务，这里我们记录为2-c-1。（1是doSomething穿透传递下来的）。

最后看执行4：

doSomething()
  .then(doSomethingElse)
  .then(() => {
    // 与执行1相同，then里面返回promise，3次微任务后输出 d 2
    return doSomethingElse();
  })
  .then(val => console.log('d', val))

参考概念4，这里的doSomethingElse是函数引用，所以等同于：

doSomething()
  .then(() => {
    return doSomethingElse();
  })
  .then(val => console.log('d', val))

这样一改，是不是跟执行1其实是一样的，.then里面返回了一个Promise，创建了一共3次微任务，所以这里我们记录为3-d-2。

综合一下，创建微任务越少，肯定越先执行，而相同微任务次数的，谁先注册谁先执行，因此输出结果以及顺序为：

b undefined, c 1, a 2, d2。

到这里，我们从概念普及到题解分析已经完成结束，不知道与你脑中的理解是否一致呢。

肆 ❀ 总

本来是一道看起来非常简单的执行题，结果真要拆开说，里面真的暗藏玄机，而我也没想到一篇题解居然写了四千多字，我想我自己应该是非常透彻了去介绍了这道题考核的知识点，若还有疑问欢迎留言，我会一一解答，那么到这里本文结束。