壹 ❀ 引
就在昨天，与朋友聊到JS基础时，她突然想起之前在面试时，遇到了一道难以理解的执行顺序题。由于我之前专门写过手写的文章，对于部分原理也还算了解，出于兴趣我便要了这道题的代码，想看看自己现在的理解能做到什么程度，顺便也给对方解疑答惑，代码如下：
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的执行顺序，以及输出内容可以看到这是一个纯的执行顺序题，没有和的干扰。但在我尝试分析后我发现，这道题考研的细节还挺多，如果没有深入了解过源码，可以毫不夸张的说，这道题不可能做的对。而我自己手写也是2个多月前的事情了，所以初次分析果然做错了。
在我重读了自己手写的文章后，重新捡起了当时记录的部分细节，也非常顺利的把这道题的细节都给挖了出来，为了方便讲给朋友听，也方便自己日后回顾，这里我就做个记录，那么本文开始。
贰 ❀ 前置概念与细节分析
在题解分析之前，我先把这道题的考点单独拧出来先讲一遍。毕竟当一个问题我们觉得难到自己无法理解时，那往往是我们对于需要使用的知识掌握是非常薄弱的。如果知道考什么，我们还能根据现有的知识体系去做分析和猜测，如果考了什么都不知道，那就是猜就不知道怎么猜了。所以这一小节，我们先普及这道题中考察的细节与概念，在此之后我们再去看题解分析，起码能做到有部分概念能为自己做理解支撑。
因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解一文中均有讲解，要了解底层原理还是建议阅读此文，当然你也可以先不理解原理，只是作为硬性概念先记忆，这一点大家自行安排。
贰 ❀ 壹 then(中创建微任务的次数
我们知道，一个的过程是同步的，包括注册的行为也是同步的，真正异步的是被注册的成功以及失败的回调（它们得等待状态改变，而且不知道什么时候才会改变），且它们都是微任务。
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是同步操作
// 我是异步微任务
// 我是异步宏任务而当存在多个调用需要区分执行顺序时，我们往往以注册的顺序来决定执行顺序：
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而的中往往也能再返回一个，这时候就是我们所说的链式调用，而当存在多个链式调用时，我们心里会默认，只要你多一次，你的执行就得往后排一次，比如：
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这个例子的一定是晚于输出的，我们就站在宏观的角度去理解，因为多了一层，那么你肯定得比还要往后面排一排，最后输出毫无疑问，我想很多人对于这个问题的理解都是这样的。
但是，现在请大家记住第一个硬性概念，假设内部返回了一个，那么这个的执行得往后延后两次次，而不是一次，这是因为中的在改变状态到执行，底层会创建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先输出，再输出肯定毫无悬念，但是由于第一个的返回了一个，我们默认它得往后延迟2位，所以先走，最后执行。这个例子，也是我当时手写的起因，细节如果再在这里展开讲会很复杂，还是建议阅读手写一文，这里大家先作为概念去记忆。
贰 ❀ 贰 Promise.then的有无返回值的区别
我们知道可以返回一个然后使用链式调用，但事实上也存在返回不是或者不返回的情况。我们先说返回的情况。
假设返回的是，那么下一个肯定得等待这个状态发生改变才能执行，但其实我们还有返回不是的情况：
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
};你现在只用知道当返回一个数字或者字符串，只要不是，它本质上都会被转化成成功的状态，需要注意的是和还是有区别，比如上面创建2次微任务的例子，我们假设改成：
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可以看到此时跑到了前面，类似于只创建了一次微任务，和相比，后者比前者多创建一次微任务，这个细节在手写中也能体现，这里就不花篇幅再说了。
说了返回和非的情况，我们再来聊聊无返回的情况，比如：
Promise.resolve(
.then(( => {
console.log(0;
// 没有返回
}.then((res => {
console.log(res
}
// undefined为什么是，因为函数如果没返回值时，默认表示为返回，那既然，不就是类似于，因此输出毫无疑问。
关于返回我们先聊到这，理解了这个知识点，我们可以回到文章开头的题目，看看执行2。
贰 ❀ 叁 Promise.then的值穿透
在手写的文章中，我们特意提及过方法的值穿透问题，如果你没看过本文，那么请将下面的话当成硬性的概念记下来。
当Promise.then(的没有提供callback，或者callback不是一个函数时，Promise会发生值穿透
我们先来看第一个例子，没有提供的情况：
const P1 = Promise.resolve('值穿透';
P1.then((res => {
console.log(res; // 值穿透;
};
P1.then(
.then(
.then(
.then((res => {
console.log(res; //值穿透
};上述代码中，我们创建了一个，那么第一段执行毫无悬念肯定输出。而第二个执行，我们链式调用了多个并且都没有提供成功或者失败的回调，这种情况就会导致状态和值发生穿透，因此最后一个还是能成功获取到。
我们再来看不是函数的情况，例子如下：
const P1 = Promise.resolve('值穿透';
const fn1 = ( => {
console.log(1
};
P1.then(fn1(
.then(1
.then('2'
.then((res => {
console.log(res; //值穿透
};在这个例子中，我们并没有为任何一个提供一个函数，有的直接丢了一个数字进去了，有的丢了字符串进去。这时候有同学就要说了，不对啊，你第一个传递的难道不是函数？
这里我们就要搞清楚一个概念了，所谓是传递一个函数作为，等状态确定了帮你调用，而这玩意自己直接被调用，它哪里是一个函数呢？
函数调用与函数引用：
const fn2 = ( => {
return '函数调用与函数引用的区别';
}
const o = {
f1: fn2, // 这个叫函数引用
f2: fn2( // 这个叫函数调用
};
console.log(o.f1(; // 函数调用与函数引用的区别
console.log(o.f2; // 函数调用与函数引用的区别我们定义了一个函数叫，然后把的引用赋予给了对象的属性，因此我们能通过调用，这就是函数引用。
而我们将赋予给了的属性，因此根本就不是一个函数，它保存的是执行之后的返回结果，这就是函数调用。
所以回到上面值穿透第二个例子，我们传递的是一个函数调用，你自己调用了，我堂堂不要面子的吗，你让我等会状态改变了调用什么？而后面的同理，它们都不是函数，会直接忽略这些无意义的传递，依旧值穿透。
而关于值穿透，若你要问我为什么，我只能说没有为什么，因为就是这么实现的。这就跟你问我为什么一样，没有为什么，因为就是等于2，此刻它不是作为要理解的概念，而是已成为我们理解更宏观概念的工具或者基石。值穿透的本质也是为了让实现链式调用，至于是如何实现的这种链式调用，请参考手写一文。
那么关于值穿透就说到这里，这时候你可以根据文章开头题目的执行结果，尝试的去理解题目的执行3了。
贰 ❀ 肆 Promise.then中callback的简写方式
在前文，我们提到了函数引用与函数调用，而的在简写上其实也跟函数引用有一定关系，比如：
const fn1 = (e => {
console.log(e // 1
}
Promise.resolve(1
.then(fn1;
// 本质上等同于
Promise.resolve(2
.then((e => {
console.log(e //2
}比如上面的本质上跟下面的写法是一样的，无非是前者把函数提前定义了，然后把作为传递给了，后者是直接在里面写了一个匿名箭头函数。
同类型的简写还有：
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说了，里面返回时，创建2次微任务，因为自己又被包裹在里面，结合起来就是创建了一次微任务，然后的自己又是一个，所以创建了2次微任务，一起三次微任务，我们记录为;
再来分析执行2：
doSomething(
.then(( => {
// 这里有执行，但是没返回，所以等同于resolve(undefined，2次微任务后输出b undefined
doSomethingElse(
}
.then(val => console.log('b', val根据概念2，很明显这个前面没有，这就导致返回的不能被二次出去，既然没返回，那就是默认理解成，由于不是返回了一个，所以只会创建2次微任务，我们记录为。
执行3：
doSomething(
// callback直接不是一个函数，值穿透，相当于把前面的状态和值传递下去，所以也是2次微任务后输出 c 1
.then(doSomethingElse(
.then(val => console.log('c', val参考概念3，由于接收的是一个函数调用，根本就不是一个函数，这里直接值穿透，与执行2类似，一共创建2次微任务，这里我们记录为。（1是穿透传递下来的）。
最后看执行4：
doSomething(
.then(doSomethingElse
.then(( => {
// 与执行1相同，then里面返回promise，3次微任务后输出 d 2
return doSomethingElse(;
}
.then(val => console.log('d', val参考概念4，这里的是函数引用，所以等同于：
doSomething(
.then(( => {
return doSomethingElse(;
}
.then(val => console.log('d', val这样一改，是不是跟执行1其实是一样的，里面返回了一个，创建了一共3次微任务，所以这里我们记录为。
综合一下，创建微任务越少，肯定越先执行，而相同微任务次数的，谁先注册谁先执行，因此输出结果以及顺序为：
到这里，我们从概念普及到题解分析已经完成结束，不知道与你脑中的理解是否一致呢。
肆 ❀ 总
本来是一道看起来非常简单的执行题，结果真要拆开说，里面真的暗藏玄机，而我也没想到一篇题解居然写了四千多字，我想我自己应该是非常透彻了去介绍了这道题考核的知识点，若还有疑问欢迎留言，我会一一解答，那么到这里本文结束。