Proxy 是用于拦截和自定义对象底层行为的控制层，适用于响应式、数据校验、API 代理等场景；需递归代理嵌套对象并注意性能与陷阱。
Proxy 不是用来替代普通对象的，它是用来拦截和自定义对象底层行为的“控制层”。直接用它不会让代码变快或更简洁，但当你需要监听属性访问、实现响应式、做数据校验、或构建 API 代理时，它几乎是唯一干净的方案。
拦截 get/set 实现响应式更新
Vue 3 的响应式系统核心就是基于 Proxy。相比 Object.defineProperty，Proxy 能监听动态新增属性、数组索引赋值、甚至 in 操作符和 delete 行为。
常见错误是只代理第一层：如果 obj.user.name 改变，但没对 user 做递归代理，name 的变化就不会被捕捉。必须在 get 中判断返回值是否为对象，并自动包装成新 Proxy。
性能上要注意：每次 get 都做 typeof value === 'object' 判断并代理，会带来开销；生产环境建议加缓存（比如 WeakMap 存已代理对象）。
立即学习“Java免费学习笔记（深入）”；
const handlers = {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
if (res && typeof res === 'object' && !isProxy(res)) {
return new Proxy(res, handlers);
}
track(target, key); // 例如触发依赖收集
return res;
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 例如通知更新
return result;
}
};用 construct 和 apply 拦截 new 和函数调用
Proxy 可以同时代理对象和函数——关键看传给 new Proxy() 的第一个参数是不是函数。若目标是函数，apply 拦截函数调用，construct 拦截 new 实例化。
典型用途包括：函数节流封装、参数校验、日志打点、Mock 构造函数返回值。
注意：construct 必须返回一个对象，否则会抛 TypeError: function must return an object；而 apply 返回值无限制。
-
apply(target, thisArg, args)：thisArg 是原调用时的 this，args 是实参数组 -
construct(target, args, newTarget)：newTarget 是 new 调用时的构造器（可能与 target 不同，如继承场景）
const loggedFn = new Proxy(function (x) { return x * 2; }, {
apply(target, thisArg, args) {
console.log('call with:', args);
return Reflect.apply(target, thisArg, args);
},
construct(target, args) {
console.log('new called with:', args);
return Reflect.construct(target, args);
}
});用 has、ownKeys、getOwnPropertyDescriptor 响应 in / for...in / Object.keys
仅靠 get/set 无法控制 key in obj 或 Object.keys(obj) 的结果。这些行为分别由 has、ownKeys、getOwnPropertyDescriptor 拦截。
例如实现“隐藏属性”：让某个字段不被 for...in 遍历到，但依然能通过点操作符读写——只需在 ownKeys 中过滤掉该 key，并在 getOwnPropertyDescriptor 中同步处理。
兼容性注意：ownKeys 返回的必须是数组，且必须包含所有不可枚举属性（否则 Object.getOwnPropertyNames 结果异常）；has 返回布尔值，不能返回 undefined。
const hiddenKeys = ['__internal'];
const proxy = new Proxy({ a: 1, __internal: 'secret' }, {
ownKeys(target) {
return Reflect.ownKeys(target).filter(k => !hiddenKeys.includes(k));
},
getOwnPropertyDescriptor(target, key) {
if (hiddenKeys.includes(key)) return undefined;
return Reflect.getOwnPropertyDescriptor(target, key);
},
has(target, key) {
if (hiddenKeys.includes(key)) return false;
return key in target;
}
});陷阱：Proxy 无法代理非对象、不可扩展对象需谨慎、this 绑定易出错
Proxy 第一个参数必须是对象（包括函数、数组、RegExp 等），传原始值（string、number）会报 TypeError: Cannot create proxy with a non-object as target。想代理字符串方法？得先包装成对象：new Proxy(new String('abc'), {...})。
如果目标对象已被 Object.preventExtensions()，你又在 ownKeys 中返回了不存在的 key，会触发静默失败（某些引擎下直接报错）。建议代理前检查 Object.isExtensible(target)。
最隐蔽的问题是 this：当代理函数被其他对象作为方法调用时（如 obj.method()），apply 中的 thisArg 是 obj，但如果你在 handler 里用了箭头函数或未正确绑定上下文，内部逻辑可能丢失原始 this。
真正难的不是写几个 trap，而是保证所有 trap 之间行为一致——比如 has 返回 false，但 get 还返回值，就会违反 JavaScript 语义，导致不可预期的 bug。
