V8引擎的实现源码:promise.js
非官方实现,来自:Promise实现原理(附源码)
注:啃官方源码和其他原型链的实现有点烦躁,找了个用class语法糖的源码实现,下面代码主要是这个非官方实现
快速答几个问题先:
1.
setTimeout
设置0延时,并不是同步执行,而是交由定时器线程计时并在指定时间插入到js线程的消息队列,达到延迟(异步)执行。关于chrome的最小1ms延迟参见:定时器(setTimeout/setInterval)最小延迟的问题2.实际Promise中的
resolve
和reject
有这么神奇的表现,其实就是对setTimeout
的一层封装而实现异步(官方实现有出入)3.then的链式调用,实际是每次返回一个全新的Promise,其新的Promise对象在构造时完成对前一个Promise的处理。
4.源码带上all、race这些方法也就恰好199行,不看我废话其实挺少的
正文
非官方代码:
// 判断变量否为function
const isFunction = variable => typeof variable === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class MyPromise {
constructor(handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
// 添加状态
this._status = PENDING
// 添加状态
this._value = undefined
// 添加成功回调函数队列
this._fulfilledQueues = []
// 添加失败回调函数队列
this._rejectedQueues = []
// 执行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
// 添加resovle时执行的函数
_resolve(val) {
const run = () => {
if (this._status !== PENDING) return
// 依次执行成功队列中的函数,并清空队列
const runFulfilled = (value) => {
let cb;
while (cb = this._fulfilledQueues.shift()) {
cb(value)
}
}
// 依次执行失败队列中的函数,并清空队列
const runRejected = (error) => {
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(error)
}
}
/* 如果resolve的参数为Promise对象,则必须等待该Promise对象状态改变后,
当前Promsie的状态才会改变,且状态取决于参数Promsie对象的状态
*/
if (val instanceof MyPromise) {
val.then(value => {
this._value = value
this._status = FULFILLED
runFulfilled(value)
}, err => {
this._value = err
this._status = REJECTED
runRejected(err)
})
} else {
this._value = val
this._status = FULFILLED
runFulfilled(val)
}
}
// 为了支持同步的Promise,这里采用异步调用
setTimeout(run, 0)
}
// 添加reject时执行的函数
_reject(err) {
if (this._status !== PENDING) return
// 依次执行失败队列中的函数,并清空队列
const run = () => {
this._status = REJECTED
this._value = err
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(err)
}
}
// 为了支持同步的Promise,这里采用异步调用
setTimeout(run, 0)
}
// 添加then方法
then(onFulfilled, onRejected) {
const { _value, _status } = this
// 返回一个新的Promise对象
return new MyPromise((onFulfilledNext, onRejectedNext) => {
// 封装一个成功时执行的函数
let fulfilled = value => {
try {
if (!isFunction(onFulfilled)) {
onFulfilledNext(value)
} else {
let res = onFulfilled(value);
if (res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
res.then(onFulfilledNext, onRejectedNext)
} else {
//否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函数执行出错,新的Promise对象的状态为失败
onRejectedNext(err)
}
}
// 封装一个失败时执行的函数
let rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error)
} else {
let res = onRejected(error);
if (res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
res.then(onFulfilledNext, onRejectedNext)
} else {
//否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函数执行出错,新的Promise对象的状态为失败
onRejectedNext(err)
}
}
switch (_status) {
// 当状态为pending时,将then方法回调函数加入执行队列等待执行
case PENDING:
this._fulfilledQueues.push(fulfilled)
this._rejectedQueues.push(rejected)
break
// 当状态已经改变时,立即执行对应的回调函数
case FULFILLED:
fulfilled(_value)
break
case REJECTED:
rejected(_value)
break
}
})
}
// 添加catch方法
catch(onRejected) {
return this.then(undefined, onRejected)
}
// 添加静态resolve方法
static resolve(value) {
// 如果参数是MyPromise实例,直接返回这个实例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
// 添加静态reject方法
static reject(value) {
return new MyPromise((resolve, reject) => reject(value))
}
// 添加静态all方法
static all(list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 数组参数如果不是MyPromise实例,先调用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
if (count === list.length) resolve(values)
}, err => {
// 有一个被rejected时返回的MyPromise状态就变成rejected
reject(err)
})
}
})
}
// 添加静态race方法
static race(list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一个实例率先改变状态,新的MyPromise的状态就跟着改变
this.resolve(p).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
finally(cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
}
}
看代码(类名我直接当作是Promise了,请注意),按步骤分析主要流程(_resolve
、then
):
1.Promise构造函数中先初始化4个成员变量,其中
this._status
代表当前状态
this._value
用来存着结果值
this._fulfilledQueues
和另外一个,用来存着稍后then方法可能push进来的封装过的回调方法
2.Promise构造函数中马上调用传入的handle函数,给他传入我们"封装了setTimeout"的_resolve
方法。_resolve
即我们new Promise( function(resolve,reject){resolve(10)} )
的那个resolve。这个方法只干两件事:暴露它的参数10
给内部run方法;setTimeout(run,0)来异步调用run方法。
而内部run
方法主要干三件事情:修改this._status
; 修改this._value
;从this._fulfilledQueues
(或另一个队列)中取出全部函数并逐一调用(即cb(value)
)。
小结:当value是Promise对象时,run还会做一层处理,此类细节不再叙述,看源码比较不啰嗦。此处已能够帮助我们理解new Promise时发生了什么;为什么函数会被执行但是resolve处又会跳过等等“特性”,都已经非常清晰。
3.then
方法:
上面流程做完,就等着then方法被调用了。此时then方法中会new一个Promise返回,而new Promise需要一个handle函数当参数,所以我们只需要关注这个then方法中怎么写这个“默认handle函数”就行了(注意,new Promise中handle是会被同步执行的,前面提到了)。
很显然,“默认handle”主要只干一件事情:判断如何调用内部的fulfilled(value)
函数。
而fulfilled
主要干两件事情:调用then的参数函数"onFulfilled(value)";调用新Promise对象的参数函数"onFulfilledNext(value)"(即新Promise对象中的_resolve
)。value的处理逻辑看代码不废话了。
判断部分:
1.同步调用then,此时Promise状态为PENDING,也就是run
尚未被调用(只有这个方法会改变状态的值)。那么我们把fulfilled
送进队列就行了,待会run
被调用时,会清空我们的队列并完成调用。
2.异步调用then,如setTimeout(obj.then,100,...省略)
。此时我们的run可能被调用了,从而状态为FULFILLED,意味着this._value
已经也被run给修改了,那么直接调用fulfilled(_value)
(注意this指向问题)
链式调用then:
第一个Promise的then中,最终会调用第二个Promise的_resolve
,从而启动第二个Promise的setTimeout(run,0)
......剩下就是重复的逻辑和流程,当调用第二个Promise的then时,把回调方法同样封装后插进它的队列里面(或异步then导致可能直接执行而不进队列,就上面的步骤)。
必看
micro-task和macro-task,即微任务和宏任务:知乎 Promise的队列与setTimeout的队列有何关联?
即
setTimeout(function () { console.log(4) }, 0);
new Promise(function (resolve) {
console.log(1)
for (var i = 0; i < 10000; i++) {
i == 9999 && resolve()
}
console.log(2)
}).then(function () { console.log(5) });
console.log(3);
结果是1,2,3,5,4。如果改成上面我们的MyPromise,结果是1,2,3,4,5。
原因在于V8引擎中,用的是%EnqueueMicrotask
,是微任务;我们这里是直接setTimeout,是宏任务。而micro-task和macro-task这两个队列的执行逻辑如下:
这里提及了 macrotask 和 microtask 两个概念,这表示异步任务的两种分类。在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。
macro-task: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, Promises(这里指浏览器实现的原生 Promise), Object.observe, MutationObserver
详细点进知乎链接吧,不废话了