函数记忆是通过缓存纯函数的计算结果来避免重复执行的优化策略,核心是用参数序列化作key查Map缓存,但需警惕副作用、动态对象参数、异步操作及this绑定问题。

什么是函数记忆(memoization)
函数记忆不是 JavaScript 原生特性,而是通过缓存已计算结果来避免重复执行的优化策略。它只对「纯函数」有效——即相同输入必然产生相同输出、且无副作用的函数。一旦函数依赖外部变量、修改全局状态或调用 Date.now()、Math.random() 等非常量值,记忆就可能返回错误结果。
手写一个通用 memoize 函数
核心逻辑是用参数序列化作为缓存 key,查表优先返回缓存值。注意:直接用 JSON.stringify(args) 处理简单参数没问题,但遇到 undefined、function、Symbol、循环引用对象会出错或失效。
- 推荐用
args.map(arg => String(arg)).join('|')处理基础类型(数字、字符串、布尔、null),避开 JSON 的坑 - 若需支持对象/数组,应引入更健壮的哈希方案(如
lodash.memoize内部用的Map+ 自定义 key 生成器) - 慎用闭包缓存:长期运行的函数若不清理缓存,会导致内存泄漏
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = args.map(arg => String(arg)).join('|');
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}什么时候不该用 memoize
记忆的收益取决于「重复调用频率 × 单次计算开销」。如果函数本身很快(比如只是加法),加一层哈希和 Map 查找反而更慢;如果参数几乎从不重复,缓存就是纯开销。
- 参数是动态生成的对象字面量(如
{x: i, y: j}),每次都是新引用 → key 永远不同 → 缓存失效 - 函数内部有异步操作(
fetch、setTimeout)→ 记忆无法处理 Promise 状态,需额外封装 - 使用了
this上下文且调用时绑定不同对象 → 手写版本默认忽略this,需显式保存上下文或改用bind
React 中 useMemo 和 useCallback 的区别
它们不是函数记忆的通用实现,而是 React 的渲染优化工具:只在依赖数组变化时重新计算,且缓存生命周期与组件实例绑定。
立即学习“Java免费学习笔记(深入)”;
-
useMemo(fn, deps)缓存的是 计算结果,适合昂贵的同步计算(如排序、过滤大数据) -
useCallback(fn, deps)缓存的是 函数引用,主要防止子组件因父组件重渲染而误触发更新(配合React.memo) - 二者都不保证「跨组件复用」或「全局缓存」,也不会自动清理,依赖项写错(如漏掉函数内使用的 state)会导致陈旧闭包问题
const expensiveList = useMemo(() => {
return list.filter(item => item.active).sort((a, b) => a.score - b.score);
}, [list]); // 必须包含所有影响结果的依赖实际项目中,多数场景用不到自定义 memoize。先确认瓶颈真在计算本身,再决定是否引入缓存——否则只是把问题从 CPU 换成了内存和缓存一致性。











