当前位置：首页 > JavaScript

deferred实现原理 js

2026-03-16 05:48:41JavaScript

deferred实现原理

在JavaScript中，deferred通常指一种延迟对象模式，用于管理异步操作的状态和回调。jQuery的$.Deferred是经典实现，现代JavaScript已由Promise替代，但原理类似。

核心概念

延迟对象包含三个状态：

pending：初始状态，未完成也未拒绝
resolved：操作成功完成
rejected：操作失败

状态一旦改变（resolved/rejected）便不可逆。

实现机制

状态管理：通过内部变量存储当前状态，提供resolve()和reject()方法修改状态：

function Deferred() {
  let state = 'pending';
  let callbacks = [];
  let errCallbacks = [];

  this.resolve = function(value) {
    if (state !== 'pending') return;
    state = 'fulfilled';
    callbacks.forEach(fn => fn(value));
  };

  this.reject = function(reason) {
    if (state !== 'pending') return;
    state = 'rejected';
    errCallbacks.forEach(fn => fn(reason));
  };
}

回调注册：通过then()方法添加成功/失败回调，若状态已变更则立即执行：

this.then = function(onFulfilled, onRejected) {
  if (state === 'fulfilled') onFulfilled(value);
  else if (state === 'rejected') onRejected(reason);
  else {
    callbacks.push(onFulfilled);
    errCallbacks.push(onRejected);
  }
  return this;
};

链式调用

每次then()返回新Deferred对象，实现链式调用：

this.then = function(onFulfilled, onRejected) {
  const newDeferred = new Deferred();
  // 包装回调以处理新Deferred的状态
  callbacks.push(value => {
    try {
      const result = onFulfilled(value);
      newDeferred.resolve(result);
    } catch (e) {
      newDeferred.reject(e);
    }
  });
  return newDeferred;
};

与Promise的关系

ES6的Promise是标准化的Deferred模式：

deferred实现原理 js

new Promise()相当于Deferred构造函数
resolve/reject方法对应Deferred的相应方法
then/catch实现相同的回调管理

实际应用示例

const deferred = new Deferred();
deferred.then(
  value => console.log('Success:', value),
  error => console.error('Error:', error)
);
setTimeout(() => deferred.resolve('Done'), 1000);

这种模式解耦了异步操作与回调逻辑，为复杂的异步流程控制提供了统一接口。