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 是箭头函数还是普通函数,只确保调用它。
立即学习“Java免费学习笔记(深入)”;
-
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。











