proxy本身不提供缓存能力，但可结合map或weakmap实现智能缓存代理：通过get/apply拦截器将读取请求转为可比较的键，命中则返回缓存结果，未命中则计算后缓存。
<p>在 JavaScript 中，Proxy 本身不提供缓存能力，但可以结合 Map 或 WeakMap 实现“智能缓存代理”：对相同参数（如属性名、方法调用参数）的读取操作，自动复用上一次计算结果，避免重复执行昂贵逻辑。</p> <h3>核心思路：用键值对缓存计算结果</h3> <p>关键在于将“读取请求”转化为可比较的缓存键（key），例如属性名字符串、或参数序列化后的字符串。Proxy 的 <code>get</code> 拦截器负责：检查缓存 → 命中则返回 → 未命中则计算 + 存入缓存 + 返回。</p>
- 对纯属性访问（如
obj.prop），键就是属性名（String(key)） - 若需支持带参计算（如
obj.get(id)），需拦截apply，并把参数数组转为稳定 key（如JSON.stringify(args)，注意函数/undefined/Date 等需特殊处理） - 推荐用
Map存储强引用缓存；若目标对象生命周期短，可用WeakMap避免内存泄漏
基础示例：缓存属性 getter 调用结果
假设目标对象有 expensiveProp，其 getter 每次调用都做耗时计算：
<code>const target = {
get expensiveProp() {
console.log('计算中...');
return Date.now(); // 模拟耗时操作
}
};
const cache = new Map();
const proxy = new Proxy(target, {
get(obj, prop) {
if (prop === 'expensiveProp') {
if (!cache.has(prop)) {
cache.set(prop, obj[prop]); // 首次调用并缓存
}
return cache.get(prop);
}
return obj[prop];
}
});
console.log(proxy.expensiveProp); // 输出：计算中... + 时间戳
console.log(proxy.expensiveProp); // 直接输出上次时间戳，无 log</code>
进阶：支持带参方法的缓存代理
当需要缓存类似 obj.getData(id) 这类调用时，需拦截 get + apply：
- 先在
get中拦截方法访问，返回一个包装函数 - 该函数在
apply中生成参数 key，查缓存或执行原方法 - 注意：需保留原方法的
this绑定和上下文
<code>function createCachedProxy(obj, methodNames = []) {
const cache = new Map();
return new Proxy(obj, {
get(target, prop) {
if (methodNames.includes(prop) && typeof target[prop] === 'function') {
return function(...args) {
const key = `${prop}(${JSON.stringify(args)})`;
if (cache.has(key)) return cache.get(key);
const result = target[prop].apply(this, args);
cache.set(key, result);
return result;
};
}
return target[prop];
}
});
}
// 使用
const api = {
getData(id) { console.log('fetching...', id); return {id, value: Math.random()}; }
};
const cachedApi = createCachedProxy(api, ['getData']);
console.log(cachedApi.getData(123)); // fetch + 返回
console.log(cachedApi.getData(123)); // 直接返回缓存，无 fetch</code>
注意事项与优化点
实际使用中需关注几个细节：
-
键稳定性：避免用对象、函数、Symbol 作 key（Map 支持但不易比对），参数含对象时建议用
JSON.stringify+ 预处理（忽略函数、过滤 undefined） -
缓存清理：长期运行需考虑过期（TTL）、最大容量（LRU）、或手动
cache.clear() - 副作用安全：只缓存纯函数或无副作用的 getter；若方法会修改状态，缓存可能引发逻辑错误
- 性能权衡：简单属性访问加 Map 查找几乎无开销；但频繁深参数序列化可能反拖慢，可按场景选择是否启用
