如何实现可统计调用次数的JavaScript函数？含foo()实现问询

嘿，我来帮你搞定这个函数调用次数统计的问题！其实核心就是找个靠谱的地方存计数，同时避免意外干扰，下面给你几种实用的实现方式，还有针对foo()的具体改造方案：

闭包的特性刚好能让我们在函数内部维护一个不会被外部随意修改的计数变量，同时还能保留原函数的功能。

通用高阶函数（给任意函数添加计数能力） #

这个方法可以快速给任何现有函数加上调用统计功能，不用修改原函数代码：

function withCallCounter(targetFn) {
  let callCount = 0;
  
  // 返回包装后的函数，保留原函数的参数和上下文
  const wrappedFn = function(...args) {
    callCount++;
    // 确保原函数的this指向正确
    return targetFn.apply(this, args);
  };
  
  // 暴露一个方法来获取当前调用次数
  wrappedFn.getCallCount = () => callCount;
  
  return wrappedFn;
}

// 用法示例
const add = withCallCounter((a, b) => a + b);
add(1, 2);
add(3, 4);
console.log(add.getCallCount()); // 输出 2

针对foo()的改造 #

如果你已经有了foo函数，直接用上面的高阶函数包装即可：

// 原foo函数
function foo() {
  console.log("foo 被调用啦！");
}

// 生成带计数的版本
const fooWithCounter = withCallCounter(foo);

fooWithCounter(); // 输出 "foo 被调用啦！"，计数+1
fooWithCounter(); // 再次调用
console.log(fooWithCounter.getCallCount()); // 输出 2

如果想直接让原foo自带计数，也可以用立即执行函数表达式（IIFE）来创建闭包：

const foo = (function() {
  let callCount = 0;
  
  return function() {
    callCount++;
    console.log("foo 被调用啦！");
    // 把计数挂在函数本身，方便外部获取
    foo.getCallCount = () => callCount;
  };
})();

foo();
foo();
console.log(foo.getCallCount()); // 输出 2

在JavaScript里，函数本质上也是对象，所以我们可以直接给函数添加一个属性来存储调用次数。这种方式更直观，但要注意这个属性是可以被外部修改的。

针对foo()的实现 #

function foo() {
  // 初始化计数（只在第一次调用时执行）
  if (typeof foo.callCount === 'undefined') {
    foo.callCount = 0;
  }
  foo.callCount++;
  console.log("foo 被调用啦！");
}

foo();
foo();
console.log(foo.callCount); // 输出 2

常见的坑点包括：

• 计数变量作用域错误：比如把let callCount = 0写在函数内部，每次调用函数都会重新初始化这个变量，导致计数永远是1
• 全局变量被干扰：用全局变量存计数时，可能被其他代码意外修改，或者多个函数共用时导致计数混乱
• 上下文绑定错误：包装函数时用了箭头函数，导致原函数的this指向丢失，影响原函数的正常功能

内容的提问来源于stack exchange，提问作者Jorge González