JavaScript作用域注入或替代方案：异步回调作用域保持问题

背景与问题 #

我正在开发一个JavaScript库，现有核心函数实现如下：

1. executeWithinScope 函数 #

// example 1
function executeWithinScope(callback) {
  // 全局变量存储当前scope
  Tracker.currentScope = new Scope(); // Scope可视为空对象，具体功能无关
  callback();
  Tracker.currentScope = null;
}

2. modifyScope 函数 #

// example 2
function modifyScope() {
  Tracker.currentScope.beModified(); // 对当前scope执行操作
}

该方案在同步回调中运行正常，但在异步回调场景中存在问题：当回调内包含await时，await后的modifyScope调用会丢失上下文，因为executeWithinScope会在callback()调用后立即清空Tracker.currentScope，而await后的逻辑会在微任务队列中执行，此时同步代码已执行完毕。

// example 3
executeWithinScope(async () => {
  modifyScope(); // 此时scope有效
  modifyScope(await somethingAsync()); // 此时Tracker.currentScope已为null
});

我需要找到一种方案，完全保留example3的调用语法（仅允许修改executeWithinScope和modifyScope），避免手动传递scope的繁琐写法（如下所示）：

// example 4（不希望采用）
executeWithinScope(async (scope) => {
  modifyScope(scope);
  modifyScope(scope, await somethingAsync());
});

// example 5（不希望采用）
executeWithinScope(async (scope) => {
  modifyScope.call(scope);
  modifyScope.call(scope, await somethingAsync());
});

可行解决方案 #

方案1：使用AsyncLocalStorage（推荐） #

AsyncLocalStorage 是Node.js 14.18+/16.4+ 原生支持的API，用于在异步操作链中持久化上下文；浏览器环境可使用async_hooks的polyfill（如@ungap/async-local-storage）实现相同能力。

修改核心函数如下：

// 初始化AsyncLocalStorage实例
const asyncLocalStorage = new AsyncLocalStorage();

function executeWithinScope(callback) {
  const scope = new Scope();
  // 将scope存入异步上下文，执行回调并等待其完成
  return asyncLocalStorage.run(new Map([['scope', scope]]), async () => {
    await callback();
  });
}

function modifyScope(...args) {
  // 从异步上下文获取当前scope
  const scope = asyncLocalStorage.getStore().get('scope');
  scope.beModified(...args);
}

无论回调中有多少层await或异步操作，modifyScope都能从当前异步上下文链中获取到对应的scope，完全兼容example3的调用语法。

方案2：异步回调等待与延迟清空 #

如果无法使用AsyncLocalStorage，可以通过判断回调是否返回Promise，延迟清空scope的时机：

function executeWithinScope(callback) {
  const scope = new Scope();
  Tracker.currentScope = scope;
  
  const callbackResult = callback();
  
  // 若回调返回Promise（async函数默认返回Promise），等待其完成后再清空scope
  if (callbackResult instanceof Promise) {
    return callbackResult.finally(() => {
      Tracker.currentScope = null;
    });
  }
  
  // 同步场景，直接清空scope
  Tracker.currentScope = null;
  return callbackResult;
}

// modifyScope保持原实现不变
function modifyScope() {
  Tracker.currentScope.beModified();
}

该方案的核心是：不再在callback()调用后立即清空scope，而是等待async回调的Promise完成后再执行清空操作，确保await后的逻辑执行时scope仍然有效。

注意：此方案仅适用于回调本身返回Promise的场景，若回调内部包含宏任务（如setTimeout），宏任务执行时scope已被清空，此时仍会丢失上下文。

方案3：生成器函数迭代（兼容旧环境） #

若需兼容不支持async/await的环境，可将回调转为生成器函数，手动迭代并维护scope上下文，但此方案要求将async回调改为生成器函数，不符合“完全保留example3语法”的要求，仅作为补充参考：

function executeWithinScope(callback) {
  const scope = new Scope();
  Tracker.currentScope = scope;
  
  const iterator = callback();
  function iterate(value) {
    const result = iterator.next(value);
    if (!result.done) {
      if (result.value instanceof Promise) {
        result.value.then(iterate).catch(err => iterator.throw(err));
      } else {
        iterate(result.value);
      }
    } else {
      Tracker.currentScope = null;
    }
  }
  iterate();
}

// 使用时需将async函数改为生成器
executeWithinScope(function* () {
  modifyScope();
  modifyScope(yield somethingAsync());
});

内容的提问来源于stack exchange，提问作者Tim Nimets