17370845950

JavaScript函数是“一等公民”，因其可赋值、传参、返回、存储于数据结构中；高阶函数指接受函数为参数或返回函数的函数，如map、debounce；使用时需注意this绑定与闭包陷阱。

JavaScript 函数为什么是“一等公民”？

因为函数在 JavaScript 中可以像字符串、数字一样被赋值、传参、返回、存储在数据结构里——没有特殊限制，也不需要额外包装。

这和其他语言（比如 Java 8 之前）明显不同：Java 里你得用 Runnable 或接口封装行为，而 JS 的 function 本身就能直接当值用。

• const fn = function() {}：可赋值给变量
• arr.push(function() {})：可存进数组
• setTimeout(() => {}, 100)：可作为参数传给另一个函数
• function createLogger(prefix) { return function(msg) { console.log(prefix + msg); }; }：可被另一个函数返回

怎么识别一个函数是不是高阶函数？

只要满足下面任一条件，就是高阶函数：接受函数作为参数，或返回一个函数。不是看它“多高级”，而是看它和函数怎么交互。

常见误判：以为必须嵌套多层才算。其实 Array.prototype.map 就是最典型的高阶函数——它不关心你传的 callback 是箭头函数还是普通函数，只确保调用它。

• map、filter、reduce 都是高阶函数（接收回调）
• debounce、curry、once 也是（返回新函数）
• 写错的典型：把 fn()（执行结果）传进去，而不是 fn（函数本身）

高阶函数实战中容易踩的坑

最常出问题的地方不是语法，而是“执行时机”和“this 绑定”。

const obj = {
  name: 'Alice',
  greet: function() { return `Hello, ${this.name}`; }
};
// ❌ 错误：map 里直接用 obj.greet，this 会丢失
['a', 'b'].map(obj.greet); // "Hello, undefined"

// ✅ 正确：绑定 this，或用箭头函数捕获作用域
['a', 'b'].map(obj.greet.bind(obj));
// 或
['a', 'b'].map(() => obj.greet());
// 或提前绑定
const boundGreet = obj.greet.bind(obj);
['a', 'b'].map(boundGreet);

• 异步场景下，setTimeout(fn, 0) 里的 fn 是高阶使用，但若 fn 依赖外部变量，要注意闭包捕获的是引用还是值
• React 中 useCallback 本质是高阶函数：它接收函数，返回一个记忆化版本，避免子组件重复渲染
• 不要在循环里直接定义并传入匿名函数，除非明确需要闭包；否则用 let 或提取到外部

什么时候该自己写高阶函数，而不是硬编码？

当你发现同一段逻辑反复出现在多个函数里，且差异仅在于“做什么”，而不是“怎么做”时，就该抽了。

比如日志、错误重试、权限校验、节流防抖——这些横切关注点，用高阶函数封装后，业务代码更干净，也更容易测试和替换。

function withRetry(fn, maxRetries = 3) {
  return async function(...args) {
    for (let i = 0; i <= maxRetries; i++) {
      try {
        return await fn(...args);
      } catch (e) {
        if (i === maxRetries) throw e;
      }
    }
  };
}

const fetchWithRetry = withRetry(fetch);

• 别为了“函数式”而强行高阶：如果只有 1 处调用，且逻辑简单，直接写更清晰
• 注意调试难度：高阶函数堆叠后，调用栈变深，错误堆栈可能指向包装器而非原始函数
• TypeScript 下记得给高阶函数写好泛型，否则 ReturnType 和参数类型容易丢失

函数作为一等公民的价值，不在概念多酷，而在你能否在真实需求里自然地“传递行为”。真正卡住人的，往往不是不会写 const compose = (f, g) => x => f(g(x))，而是没想清楚这个 f 和 g 在当前上下文里该不该有副作用、要不要缓存、是否要处理 Promise。