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，否则后续调用永远返回第一次结果

高阶函数容易被忽略的兼容性细节

浏览器兼容性常被低估，尤其涉及新语法时。不是所有“看起来像高阶函数”的写法都能安全运行。

• async 函数本身就是高阶函数（返回 Promise），但 async (fn) => await fn() 在 IE 完全不支持；需 Babel 编译或降级为 Promise 链
• 解构参数 + 默认值组合：如 const withDefault = (fn) => (options = {}) => fn({ timeout: 5000, ...options })，IE11 不支持默认参数，需转译
• 箭头函数无法访问 arguments，若高阶函数内部要透传不定参，得用 ...args 扩展运算符代替

真正难的不是写出高阶函数，而是判断什么时候不该用——比如频繁创建匿名函数作为参数，可能影响 V8 的内联优化；或者过度抽象导致调用栈变深、调试困难。先让逻辑跑通，再考虑是否封装成高阶函数。