Skip to content

构造函数实现 ​

本节目标:理解“构造函数实现”的核心思路,并能把它用于实际开发或面试表达。

  • 构造函数接受一个函数executor作为参数;
  • 构造函数内部定义了五个变量:
    • status:状态
    • Value:成功的值
    • Reason:失败的原因
    • onFulfilledCallbacks:成功时的回调函数
    • onRejectedCallbacks:失败时的回调函数
  • 还定义了两个方法,这两个方法可以修改构造函数的以上的五个变量,并通过传递给构造函数的参数executor来将方法传递给外界,让外界可以修改构造函数内部的变量;
    • resolve方法作用有两个:
      • 用来改变构造函数内部状态成功时的值value;
      • 在状态成功时,调用成功回调函数;
    • reject方法作用也有两个:
      • 用来改变构造函数内部状态失败时的值reason;
      • 在状态操作性时,调用失败回调函数;
  • 最后,我们执行传入的参数execotor,并给这个函数executor传入我们构造函数内部定义的两个方法给这个函数execuotor(resolve,reject),这样,我们在execotor中调用resolve或reject就可以修改构造函数内部定义的五个变量;
  • Executor(resolve,reject)执行时,可能会出错,我们对错误进行捕获,并将捕获的错误通过调用reject方法来修改promise内部的变量,包括状态值、成功的值和失败的原因;
const PENDING = 'PENGDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class Promise {
 constructor(executor) {
 this.value = undefined;
 this.reason = undefined;
 this.status = PENDING;
 this.onFulfilledCallbacks = [];
 this.onRejectedCallbacks = []; //

用来存储then中的回调

 const resolve = (value) => {
 if (this.status == PENDING) {
 this.value = value;
 this.status = FULFILLED;
 this.onFulfilledCallbacks.forEach(fn => fn())
   `}`
`}`
 const reject = (reason) => {
 if (this.status === PENDING) {
 this.reason = reason
 this.status = REJECTED
 this.onRejectedCallbacks.forEach(fn => fn())
   `}`
`}`
 try {
 executor(resolve, reject);
 } catch (e) { //

如果执行时发生了异常就将异常作为失败的原因

 reject(e)
 `}`
 }
}

之前试过将status,value,reason作为构造函数的内部变量,后来由于在实例方法上无法取到这些变量,所以放在实例上,将这些变量放在this对象上。

本站总访问 — 次