如何在不修改原函数的情况下消除once()函数的undefined返回值

嘿，刚好我之前处理过类似的需求，结合你提到的两个add函数版本，我来给你拆解怎么写出符合要求的once函数：

核心逻辑拆解 #

once函数是个典型的高阶函数，要满足"首次执行回调、后续直接返回结果"的要求，关键靠闭包来存状态：

• 需要一个变量缓存回调首次执行的返回值
• 需要一个标记判断回调是否已经被执行过
• 返回的包装函数每次被调用时，先检查标记：没执行过就跑回调存结果，执行过了直接吐缓存的值

为什么你的两个add版本表现不同？ #

你提到的两个add版本，核心差异就在有没有返回值，这直接影响once的效果：

原版本（用console.log） #

这个版本没有明确的return语句，默认返回undefined，所以哪怕用once包装，后续调用也只能返回undefined，这大概率就是它通不过测试的原因：

function add(y) {
  console.log(2 + y); // 只输出，不返回结果
}

可通过测试的版本（用return） #

这个版本有明确的返回值，once可以把这个值缓存起来，后续调用直接返回，完全符合测试对返回结果的预期：

function add(y) {
  return 2 + y; // 返回计算结果，供once缓存
}

once函数的完整实现 #

下面是写好的once函数，每一步都加了注释，一看就懂：

function once(callback) {
  // 闭包变量：存储首次执行的结果
  let cachedResult;
  // 标记：记录回调是否已经执行过
  let isExecuted = false;

  // 返回包装后的函数
  return function(...args) {
    if (!isExecuted) {
      // 首次调用：执行回调，缓存结果，标记为已执行
      cachedResult = callback.apply(this, args);
      isExecuted = true;
    }
    // 不管是不是第一次调用，都返回缓存的结果
    return cachedResult;
  };
}

测试一下效果 #

我们用能通过测试的add版本来验证：

// 用once包装add，得到只执行一次的函数
const addOnce = once(add);

console.log(addOnce(3)); // 输出5，此时add被执行了一次
console.log(addOnce(5)); // 输出5，add没被执行，直接返回缓存的5
console.log(addOnce(10)); // 还是输出5，完全符合要求

如果用原版本的add，效果是这样的：

const addOnceLog = once(add);

addOnceLog(3); // 控制台输出5，但函数返回undefined
addOnceLog(5); // 控制台没输出，函数还是返回undefined

这就解释了为什么return版本能过测试——测试应该是在验证返回值是否符合预期，而console.log版本没有有效返回值。

额外小细节 #

• 这个实现支持给回调传任意参数（用...args和apply处理）
• 保留了原回调的this上下文（如果需要绑定特定的this，调用时可以自己处理）

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