闭包挑战：JavaScript实现首次调用后返回相同输出

我懂你现在遇到的这个闭包挑战了——要写一个once函数，让它返回的函数只在第一次调用时执行传入的回调，之后不管怎么调用都直接复用第一次的结果对吧？看你说当前代码能返回6、12、9003，这说明你的函数每次调用都重新执行了回调，没把第一次的结果和执行状态保存下来。

给你一个完整的正确实现，我再拆解下原理：

function once(callback) {
  // 用闭包保存两个状态：是否已经执行过回调，以及第一次执行的结果
  let hasBeenInvoked = false;
  let cachedResult;

  return function(...args) {
    // 只有第一次调用时才执行回调
    if (!hasBeenInvoked) {
      cachedResult = callback(...args);
      hasBeenInvoked = true;
    }
    // 不管是不是第一次，都返回缓存的结果
    return cachedResult;
  };
}

为什么这个实现能正常工作？ #

• 外层的once函数里定义了hasBeenInvoked和cachedResult，这两个变量会被返回的函数通过闭包“记住”，不会因为once函数执行完就被销毁。
• 第一次调用返回的函数时，hasBeenInvoked是false，所以会执行传入的callback，把结果存在cachedResult里，同时把标记改成true。
• 后续所有调用都会直接跳过回调执行的逻辑，直接返回之前缓存好的cachedResult。

测试验证一下 #

你可以用这个测试代码验证功能：

const calculateOnce = once((x, y) => x + y);

console.log(calculateOnce(2, 4));  // 第一次调用，执行回调 → 输出6
console.log(calculateOnce(5, 7));  // 后续调用，直接返回缓存的6，不会输出12
console.log(calculateOnce(9000, 3)); // 同样返回6，不会输出9003

你之前代码可能踩的坑 #

大概率是你把状态变量（比如标记是否执行过的变量）放在了返回的函数内部，而不是外层的once函数里。比如如果写成这样：

// 错误示例：状态变量在返回函数内部，每次调用都会重置
function once(callback) {
  return function(...args) {
    let hasBeenInvoked = false;
    let cachedResult;
    if (!hasBeenInvoked) {
      cachedResult = callback(...args);
      hasBeenInvoked = true;
    }
    return cachedResult;
  };
}

这种写法里，每次调用返回的函数时，hasBeenInvoked都会重新变成false，所以每次都会执行回调，自然返回不同的结果。把状态变量移到外层函数，利用闭包保存状态就解决问题了。

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