Proxy 是用于拦截并自定义对象操作的构造器，通过 target 和 handler 创建代理，支持 get、set、has 等陷阱方法，比 Object.defineProperty 更强大灵活，适用于响应式、只读封装等场景。
Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造器。它不修改原对象，而是创建一个“代理”，把对目标对象的访问（比如读取属性、赋值、删除、遍历等）全部重定向到你定义的处理函数中，从而实现细粒度的控制和响应式逻辑。
Proxy 的基本结构：target + handler
创建 Proxy 需要两个参数：
- target：要代理的原始对象（可以是普通对象、数组、函数，甚至另一个 Proxy）
-
handler：一个配置对象，里面定义各种“陷阱”（trap），即你想拦截的操作方法，如
get、set、has、deleteProperty、ownKeys等
示例：拦截属性读取和赋值
const obj = { name: 'Alice', age: 25 };
const proxy = new Proxy(obj, {
get(target, prop) {
console.log(`读取属性: ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`设置 ${prop} = ${value}`);
target[prop] = value;
return true; // 必须返回 true 表示赋值成功
}
});
proxy.name; // 输出：读取属性: name → "Alice"
proxy.city = 'Beijing'; // 输出：设置 city = Beijing
常用拦截方法及典型用途
每个 trap 对应一种对象操作，下面是高频使用的几个：
立即学习“Java免费学习笔记（深入）”；
- get(target, prop, receiver)：拦截读取属性。可用于默认值、计算属性、日志、权限检查
- set(target, prop, value, receiver)：拦截赋值。常用于数据校验、触发更新、防止非法写入
-
has(target, prop)：拦截
in操作符。可让属性“隐形”（返回 false），但实际存在 -
deleteProperty(target, prop)：拦截
delete obj.prop。可用于禁止删除或记录删除行为 -
ownKeys(target)：拦截
Object.getOwnPropertyNames()和for...in。可控制哪些属性被枚举
注意：receiver 通常指代当前 Proxy 实例，在涉及原型链或 this 绑定时很重要，多数简单场景可忽略。
Proxy 与 Object.defineProperty 的关键区别
两者都能做响应式，但 Proxy 更强大灵活：
-
支持数组索引、新增/删除属性、length 变更：defineProperty 只能监听已存在的属性，且对数组下标无效；Proxy 能直接捕获
arr[0] = 1或arr.push() -
一次性拦截整类操作：比如用
ownKeys控制所有枚举行为，无需逐个定义 - 不可撤销（除非手动封装）：Proxy 创建后无法关闭，但可通过包装成函数+闭包变量模拟“开关”
- 性能略低，兼容性稍差：Proxy 是 ES6+ 特性，不支持 IE；大量使用可能影响性能，生产环境建议按需启用
一个实用小例子：只读视图代理
快速创建一个禁止修改的代理对象：
function readOnly(obj) {
return new Proxy(obj, {
set() {
throw new Error('Cannot modify read-only object');
},
deleteProperty() {
throw new Error('Cannot delete property from read-only object');
},
defineProperty() {
throw new Error('Cannot define property on read-only object');
}
});
}
const data = { x: 1 };
const ro = readOnly(data);
ro.x = 2; // 报错
这种模式在状态管理、配置对象保护、API 响应封装中很常见。
