自定义Promise

说明

这是我根据尚硅谷的视频稍微改动了以后的自定义Promise，这里不解释Promise的基本概念和常用API，直接上代码和注释。
在外部调用的时候，比如这个文件命名为Promise.js，那么直接如下：

<script type="text/javascript" src="./Promise.js"></script>

之后就可以像原本的Promise那样用了，实现的函数有

• then
• catch
• resolve（静态）
• reject（静态）
• all（静态）
• race（静态）

代码

// 这里按照原视频，先用了ES5的函数写法，改造成类的写法非常简单，这里不赘述
// 整个就是一个自执行，将window对象传进来，最终把定义好的Promise绑到window对象上，暴露给外部
(function (window) {
   
	// 下面三行定义状态常量，我们知道Promise有三个状态，变更前的pending，成功后的fullfilled和失败后的rejected，由于自定义时经常用到这些字符串，所以直接定义常量
	const PENDING = 'pending'
	const FULLFILLED = 'fullfilled'
	const REJECTED = 'rejected'

	// 下面这个是Promise的构造函数，传入的参数是执行器函数，我们在外面调用Promise的时候一般这样写：
	// new Promise((resolve, reject) => {})
	// 这整个小括号里的就是执行器函数，很显然执行器函数需要两个函数作为参数，一个用来把Promise变为成功，一个用来把Promise变为失败，也就是resolve和reject
	function Promise (excutor) {
   

		const self = this // 由于js的this只有在运行的时候才知道指的是哪个对象，如果后文一直用this，指向的对象迟早会发生错误，所以这里先把当前对象存到self变量里，后文统一用self来代替this
		// 以下这三行是用来初始化的
		self.status = PENDING // 初始化当前Promise对象的状态为pending
		self.data = undefined // 初始化当前Promise对象的数据为undefined，我们知道一个Promise对象成功以后的默认值是undefined
		self.callbacks = []
		// 上面这个初始化的数组涉及到Promise执行顺序的问题，比如：
		// new Promise((resolve, reject) => {执行器函数体}).then(value=>{成功后的回调函数体}, reason=>{失败后的回调函数体})
		// 如果执行器函数体是异步执行的，那么当then被执行的时候，由于Promise的状态仍然是pending，无法确定是成功还是失败，就无法调用相应的回调函数
		// 所以在这种“状态更改”晚于“回调函数”的情况下，我们需要把回调函数先存起来，等到状态更改时再执行
		// 每次存的数据结构就应当是一对成功和失败的回调函数，我们把它们构成一个对象{成功的回调函数, 失败的回调函数}
		// 需要存储的回调函数完全可以是很多对，所以我们用数组这样的数据结构

		// 下面的resolve函数将Promise变为成功，它需要做三件事情：
		// 1. 将当前Promise对象的状态变更为fullfilled
		// 2. 将当前Promise对象的数据变更为传入的参数值
		// 3. 如上文所说，如果存储回调函数的数组callbacks中不为空，则异步执行所有对应的代表成功的回调函数
		function resolve (value) {
   

			if (self.status !== PENDING) {
    // Promise的状态只允许更改一次，只要不是pending，后续所有操作就不需要执行了
				return
			}

			self.status = FULLFILLED // 更改状态
			self.data = value // 更改值

			if (self.callbacks.length > 0) {
    // 如果存储了回调函数，执行所有对应的代表成功的回调函数
				setTimeout