在嘗試寫一個 Promise 的時候，沒有看任何的開源代碼，我覺得這樣遇到的問題才足夠真實。

2018-05-15 11:10

目前只能做到這樣：

const Promise = function( callback ) {if(typeof callback !== 'function') {throw new Error(`Promise resolver ${ callback } is not a function`)}const PROMISE_STATUS = '[[PromiseStatus]]';const PROMISE_VALUE = '[[PromiseValue]]';this[PROMISE_STATUS] = 'pending';this[PROMISE_VALUE] = undefined;let resolveFn,rejectFn,isThen,isCatch,finallyFn;Object.defineProperty(this, PROMISE_STATUS, {set: ( newVal ) => {const value = this[ PROMISE_VALUE ];if( newVal === 'fulfilled' && isThen ) {resolveFn && resolveFn( value )}if( newVal === 'rejected' && isCatch ) {rejectFn && rejectFn( value )}finallyFn && finallyFn( value )}});const resolve = ( response ) => {if( isCatch ) return;setTimeout(() => {isThen = true;this[ PROMISE_VALUE ] = response;this[ PROMISE_STATUS ] = 'fulfilled';}, 0)};const reject = ( error ) => {if( isThen ) return;setTimeout(() => {isCatch = true;this[ PROMISE_VALUE ] = error;this[ PROMISE_STATUS ] = 'rejected';}, 0)// const e = new Error( error );// e.stack = '';// e.name = '(in Promise)';// throw e };Promise.prototype.then = function ( callback ) {if( isCatch ) return;resolveFn = callback;return this;};Promise.prototype.catch = function ( callback ) {if( isThen ) return;rejectFn = callback;return this;};Promise.prototype.finally = function( callback ) {finallyFn = callback;return this;};callback( resolve, reject );};

這里是借鑒了 Vue 雙向數據綁定的實現方法，在狀態改變的時候執行對應的 then / catch / finally 方法。

但是這里沒辦法鏈式調用，遇到了一個矛盾的地方。下面的示例僅僅按 .then().catch().finally() 這樣調用的順序講

1、then 方法如果不返回實例本身，那么 catch 和 finally 方法就沒辦法鏈式調用，因為 this 的指向不是原實例了。

2、then 方法如果返回實例本身，那么 .then().then() 第二次 then 方法的 this 那依然只是那一個實例，這里應該是，如果上一次 then 方法的返回值是一個 Promise 則是這個 Promise，如果不是 Promise，則是一個新的 Promise。

所以沖突了，我決定再想想，如果想不出來就只能去參考源碼了。

?

轉載于:https://www.cnblogs.com/xwant/p/9042244.html

總結

以上是生活随笔為你收集整理的浅谈用原生 JS 模仿个Promise 的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。