Promise (2) 原型上的方法
I'm Captain Jack Sparrow"
加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆)。
为了周天能去看电影,要赶紧做完手上的活儿,比如总结Promise的方法。
2 Promise基本方法简介
Promise提供了哪些方法了?大招就是放图在控制台输出Promise。
从图中结构看,Promise构造函数上实现了all,race,reject,resolve。Promise构造函数的原型上实现了then,catch的方法。在构造函数原型上实现then,catch的方法是为了让Promise构造函数创建的 实例 共享then,catch方法。(此处提一下,实例和构造函数原型之间存在连接,并不是与构造函数存在连接。对构造函数原型和构造函数,实例之间的关系不理解可以看看《javascript高级程序设计》第六章)。 在Promise构造函数上实现的all,race,reject,resolve,不能在对象的实例中访问,属于Promise构造函数自己,这样做保证了对象的命名空间整洁。所以这几个函数的调用方式是Promise.all(),Promise.race(),Promise.reject(),Promise.resolve()。
Promise简体实现结构大概是:
//Promise构造函数实现的大概结构function Promise(resolver) { //promise 的初始状态 this._PromiseStatus = 'pending'; //promise 的value 值(不同实现这个属性名字不一样) this._PromiseValue = undefined //......接下来要实现的此处省略} //给Promise添加方法Promise.all = all; Promise.race = race; Promise.resolve = resolve; Promise.reject = reject; //重写Promise构造函数原型Promise.prototype = { constructor: Promise, then: then, catch: catch }; //方法具体实现function all( /***/ ) { } // ......方法实现省略
使用new 操作符创建 promise对象实际经历的步骤:(这个摘抄自《javascript高级程序设计》,好书值得多读几遍)
1.创建了一个新的对象。
2.将构造函数的作用域赋给新对象(因此this就指向了这个新的对象)。
3.执行构造函数代码(为这个新对象添加属性)。
4.返回新对象。
第三条加粗了可以解释为什么all,race,reject,resolve,不能在对象的实例中访问。all,race,reject,resolve并没有在构造函数中赋值给新对象的属性。
总结:then,catch方法是供Promise构造函数创建的 实例调用的,all,race,reject,resolve是Promise构造函数自己调用的。(这句描述不是很标准)
2.1 Promise.prototype.then
⑴.为什么promise对象需要状态?(说不清楚就放图)
var testPromiseStatus = new Promise(function(resolve, reject) { //异步操作......成功后执行了resolve(1) resolve(1); }) //从创建了testPromiseStatus,在到执行testPromiseStatus.then中间的时间间隔不确定 testPromiseStatus.then(function onFulfilled(value) { console.log("我到底应该什么时候执行呀?"); }) //resolver 是你传递给Promise构造函数的参数function Promise(resolver) { resolver(function resolvePromise(value) { _resolve( /*......*/ , value); }, function rejectPromise(reason) { _reject( /*......*/ , reason); }); }
Promise处理了异步操作的结果,并提供了规范的接口让你与之交互(理解Promise的由来)。
回到看上图代码,异步操作成功后执行了resolve(1),内部就会执行resolvePromise来调用PromiseStatus.then传递进来处理异步代码执行结果回调函数onFulfilled,意味着Promise构造函数内部实现resolvePromise是一个延迟的。因为testPromiseStatus有调用then传递onFulfilled,至少要让testPromiseStatus.then先执行将onFulfilled方法传递进去后resolvePromise内部才能实现执行onFulfilled。如果PromiseStatus.then没有传递方法,那么resolvePromise内部只需判定有无onFulfilled函数。简单的Promise实现,代码参考自JavaScript Promises ... In Wicked Detail(这篇博文,简单的去实现了一下Promise)。