Proxy是JavaScript中用于创建代理对象的构造函数，可拦截对目标对象的操作。通过new Proxy(target, handler)语法实现，其中handler定义get、set等陷阱来控制属性读取和赋值行为，常用于数据校验与响应式系统。
JavaScript中的Proxy是一种强大的元编程工具，允许你拦截并自定义对象的基本操作。它让你能在访问、修改、删除属性等行为发生时插入逻辑，非常适合用于数据校验、日志记录、响应式系统构建等场景。
什么是Proxy？
Proxy 是一个内置构造函数，可以创建一个代理对象，用来包装另一个对象（目标对象），从而拦截对该对象的各种操作。基本语法如下：
const proxy = new Proxy(target, handler);其中，target 是被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被拦截以及如何响应。
常用拦截方法详解
Handler对象中可以定义多个“陷阱”（traps），以下是几个最常用的拦截操作：
1. get：拦截属性读取
当你访问对象的某个属性时触发，可用于实现默认值、属性映射或访问控制。
const user = { name: 'Alice' }; const proxy = new Proxy(user, { get(target, prop) { if (prop in target) { console.log(`读取属性: ${prop}`); return target[prop]; } else { return '属性不存在'; } } }); console.log(proxy.name); // 读取属性: name → Alice console.log(proxy.age); // 属性不存在2. set：拦截属性赋值
在设置属性值时调用，常用于数据验证或自动类型转换。
const data = {}; const validatedProxy = new Proxy(data, { set(target, prop, value) { if (prop === 'age') { if (typeof value !== 'number') { throw new TypeError('年龄必须是数字'); } if (value
3. has：拦截 in 操作符
用于控制属性是否被认为存在于对象中。
const obj = { a: 1 }; const hiddenProxy = new Proxy(obj, { has(target, prop) { if (prop.startsWith('_')) return false; // 隐藏以下划线开头的属性 return prop in target; } }); console.log('a' in hiddenProxy); // true console.log('_secret' in hiddenProxy); // false4. deleteProperty：拦截 delete 操作
可以防止某些关键属性被删除。
const config = { apikey: '123', url: 'https://api.example.com' }; const protectedProxy = new Proxy(config, { deleteProperty(target, prop) { if (prop === 'apikey') { throw new Error('apikey 不可删除'); } delete target[prop]; return true; } }); delete protectedProxy.url; // 成功 // delete protectedProxy.apikey; // 抛出错误5. apply：用于函数代理
当代理一个函数时，apply 可以拦截函数调用。
function sum(a, b) { return a + b; } const tracedSum = new Proxy(sum, { apply(target, thisArg, args) { console.log(`调用函数 ${target.name}，参数:`, args); return target.apply(thisArg, args); } }); console.log(tracedSum(2, 3)); // 输出： // 调用函数 sum，参数: [2, 3] // 56. construct：拦截 new 操作符
可用于控制类实例化过程。
class Person { constructor(name) { this.name = name; } } const PersonProxy = new Proxy(Person, { construct(target, args) { console.log('正在创建实例，参数:', args); const instance = new target(...args); instance.created = Date.now(); return instance; } }); const p = new PersonProxy('Bob'); console.log(p); // Person { name: 'Bob', created: 1700000000000 }实际应用场景
- 响应式系统：如Vue 3使用Proxy实现数据劫持，自动追踪依赖和更新视图。
- 数据校验层：统一拦截set操作进行类型、范围检查。
- 调试与监控：记录所有属性访问和修改，便于开发期排查问题。
- 私有属性模拟：通过has或get隐藏特定命名规则的属性。
- API代理封装：对远程接口对象进行透明的日志、重试、缓存处理。
基本上就这些核心用法。Proxy的强大在于它改变了我们对对象行为的控制粒度，使得JavaScript的元编程能力大幅提升。不过要注意性能影响，避免过度代理深层结构。合理使用，能极大提升代码的灵活性和可维护性。
