JavaScript函数定义有三种：function声明（完全提升）、函数表达式（仅变量名提升）、箭头函数（无this绑定）；高阶函数以函数为参数或返回函数，如map、memoize，需注意this、缓存、兼容性及性能。
JavaScript 函数定义的三种常见写法
函数定义不是只有 function 关键字一种方式，不同写法直接影响作用域、提升（hoisting）行为和 this 绑定。选错写法容易在异步或类方法中出问题。
-
function声明：会被完全提升，可在定义前调用；this由调用方式决定 -
const myFn = function() {}（函数表达式）：仅变量名被提升，赋值不提升；适合避免重复声明，也便于条件定义 -
const myFn = () => {}（箭头函数）：不绑定自己的this、arguments，也不能用new调用；适合回调和简短逻辑，但别在需要动态this的地方（比如 Vue 或 React 类组件方法）硬套
高阶函数的核心特征：接收函数或返回函数
高阶函数不是“高级技巧”，而是函数式编程的基本单元。它必须满足至少一条：参数是函数，或返回值是函数。关键不在嵌套多深，而在是否把函数当数据传递和构造。
- 常见误判：只看有没有
return function，却忽略Array.prototype.map(callback)本身就是一个高阶函数——它的参数callback就是函数 - 典型场景：
filter、reduce、debounce、withLoading（React 中封装加载状态的 HOC）都依赖高阶函数模式 - 参数差异：传入函数时，注意是否需要预绑定上下文。例如
arr.map(fn)中的fn默认以数组元素为this，若fn是对象方法，要用arr.map(fn.bind(obj))或改用箭头函数包装
手写一个带缓存的高阶函数：memoize
这是理解高阶函数结构最直观的例子：输入一个函数，输出一个“记住结果”的新函数。重点在于闭包保存缓存，以及参数序列化逻辑是否健壮。
const memoize = (fn) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
};
};
-
为什么用
JSON.stringify(args)？简单场景够用，但会丢失undefined、函数、Symbol 和循环引用；生产环境建议用lodash.memoize或自定义哈希生成器 - 缓存生命周期：闭包中的
cache随返回函数存在，若该函数长期驻留（如全局工具函数），可能内存泄漏 - 不要对有副作用的函数（如
fetch、Math.random()）直接 memoize，否则后续调用永远返回第一次结果
高阶函数容易被忽略的兼容性细节
浏览器兼容性常被低估，尤其涉及新语法时。不是所有“看起来像高阶函数”的写法都能安全运行。
立即学习“Java免费学习笔记（深入）”；
-
async函数本身就是高阶函数（返回 Promise），但async (fn) => await fn()在 IE 完全不支持；需 Babel 编译或降级为Promise链 - 解构参数 + 默认值组合：如
const withDefault = (fn) => (options = {}) => fn({ timeout: 5000, ...options })，IE11 不支持默认参数，需转译 - 箭头函数无法访问
arguments，若高阶函数内部要透传不定参，得用...args扩展运算符代替
真正难的不是写出高阶函数，而是判断什么时候不该用——比如频繁创建匿名函数作为参数，可能影响 V8 的内联优化；或者过度抽象导致调用栈变深、调试困难。先让逻辑跑通，再考虑是否封装成高阶函数。