基础-promise的实现过程(1)

Promise是什么?之前已经对这个进行了解释,那现在就来来分析分析它的创建和用法。我们写Promise其实就是在写一个构造器,通过new Promise来给它传一个函数作为参数,这就能创建一个Promise。那现在就来试写一下这个构造器。

js 复制代码
class myPromise {
  constructor() {}
}

这个构造函数有没有参数呢?需要一个参数,而且是函数,其实这个函数就是表示的就是一个任务的执行过程,它描述了一个任务开始做什么,后面做什么的事情。而且这个函数是同步函数,当调用promise的时候立即执行的。

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
 constructor(excutor) {
    excutor()
  }
}

这就是基本的结构了。然后这个excutor会传递两个参数resolvereject

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
  constructor(excutor) {
    excutor(this._resolve, this._reject);
  }

/**
 * @description: 标记当前任务完成
 * @param {*} value 任务完成的相关数据
 */
_resolve(value) {}


/**
 * @description: 标记当前任务失败
 * @param {*} reason 任务失败的相关数据
 */
_reject(reason) {}
}

Promise有三个状态,刚开始的时候是pending,完成之后是fulfilled,失败之后是rejected,所以啊,不管是成功也好,失败也好,实际上是要改变状态的。 因此,

js 复制代码
//myPromise.js

_resolve(value) {
    //改变状态和数据
    console.log(value);
  }
  
 _reject(reason) {
    //改变状态和数据
    console.log(reason);
  }

那状态和数据在哪呢?其实就可以给这个class添加属性嘛。

js 复制代码
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve, this._reject);
  }
 _resolve(value) {
    //改变状态和数据
    this._state = "fulfilled";
    this._value = value;
  }
  _reject(reason) {
    //改变状态和数据
    this._state = "rejected";
    this._value = reason;
  }

然后你会发现报错了,找不到那两个属性。其实就是找不到thisthis的指向取决于谁调用它,那在这里是resolve函数在调用,直接调用,按理说应该是指向全局变量,但这里使用的是class创建的,处在严格模式下,所以这个this指向undefined

我们希望this指向当前的myPromise对象,construtor里的this指向myPromise,那我们修改this._resolve的指向就可以了。

js 复制代码
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve.bind(this), this._reject.bind(this)); //绑定this
  }

到这里,myPromise的基本架子就搭好了。

js 复制代码
class myPromise {
  /**
   * @description: 构造函数
   * @param {*} excutor 执行器,描述任务的执行过程 立即执行
   * @return {*}
   */
  constructor(excutor) {
    this._state = "pending"; //状态
    this._value = undefined; //数据
    excutor(this._resolve.bind(this), this._reject.bind(this)); //绑定this
  }

  /**
   * @description: 标记当前任务完成
   * @param {*} value 任务完成的相关数据
   */
  _resolve(value) {
    //改变状态和数据
    this._state = "fulfilled";
    this._value = value;
  }

  /**
   * @description: 标记当前任务失败
   * @param {*} reason 任务失败的相关数据
   */
  _reject(reason) {
    //改变状态和数据
    this._state = "rejected";
    this._value = reason;
  }
}

const p = new myPromise((resolve, reject) => {
  resolve(1213);
});
相关推荐
飞翔的佩奇2 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪4 分钟前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子14 分钟前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍35 分钟前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星1 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞2 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放用户动作键盘按键特殊处理方案
前端
rocky1912 小时前
playwright里兼容处理回放无界微前端内iframe内部元素事件和不在无界微前端内的iframe元素
前端
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放slide 拖动动作
前端
Devil枫2 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript