可用闭包配合对象或Map实现记忆化:对象缓存适合基本类型参数,用JSON.stringify生成key;Map或WeakMap支持对象等复杂参数,但需注意动态值导致的缓存失效、副作用函数不适用等问题;React中优先使用useMemo/useCallback。

可以用闭包配合一个外部对象(或 Map)来保存历史参数和对应结果,函数每次执行前先查缓存,命中就直接返回,不命中再计算并存入。
用闭包 + 普通对象缓存
适合参数是字符串、数字等基本类型,或能安全转成字符串的简单场景:
- 定义一个空对象作为缓存容器,在外层函数中声明
- 内层返回的函数接收参数,先用 JSON.stringify(args) 或简单拼接生成 key(注意参数顺序和类型)
- 检查 key 是否已存在,存在则返回缓存值;否则调用原逻辑,保存结果再返回
例如:
function memoize(fn) {const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (key in cache) return cache[key];
cache[key] = fn.apply(this, args);
return cache[key];
};
}
用 Map 支持更复杂的参数类型
当参数含对象、数组、函数等引用类型时,JSON.stringify 会丢失区分度(比如 {a:1} 和 {b:1} 都变成 {}),可用 Map 配合自定义 key 生成策略,或直接用 WeakMap(仅限单个对象参数):
- 对单个对象参数:用 WeakMap 缓存,key 就是该对象本身(不阻止 GC)
- 对多参数:可封装成数组后用结构化克隆思路(但浏览器暂不支持通用 deep key),实践中常限制为基本类型或约定参数格式
注意边界与陷阱
记忆化不是万能的,需留意:
- 副作用函数不能随便记忆——比如带
console.log或修改外部状态的,缓存后会跳过执行 - 参数若含时间、随机数、DOM 节点等动态值,缓存可能失效或误命中
- 缓存无限增长?可加数量限制或 LRU 策略(如用
lru-cache库或手动维护队列)
现代替代方案:React 中的 useMemo / useCallback
在 React 组件中,如果目标是“记住上次计算结果”或“避免重复创建函数”,优先用内置 Hook:
- useMemo(fn, deps) 记住计算值,依赖未变就不重算
- useCallback(fn, deps) 记住函数引用,防止子组件无谓重渲染
- 它们本质也是闭包 + 依赖比对,但由框架管理生命周期和清除时机,更安全










