ES6中如何用Proxy拦截对象操作

在 ES6 中，Proxy 用于拦截并自定义对象的基本操作，通过定义 handler 对象中的拦截方法（trap）实现元编程能力。以下是具体用法和示例：

• target：被代理的目标对象（如普通对象、函数、类磨大等）。
• handler：包含拦截方法的对象，用于定义拦截行为。

• 作用：液空记录日志、修改返回值或控制属性访问。
• 示例：const target = { name: '张三', age: 30 };const handler = { get(target, property, receiver) { console.log(`读取属性：${property}`); if (property === 'age') return target[property] + 5; // 修改返回值 return Reflect.get(target, property, receiver); // 默认行为 }};const proxy = new Proxy(target, handler);console.log(proxy.name); // 输出：读取属性：name → 张三console.log(proxy.age); // 输出：读取属性：age → 35

• 作用：数据验证、格式检查或限制属性修改。
• 示例：const target = {};const handler = { set(target, property, value, receiver) { console.log(`设置属性：${property} = ${value}`); if (typeof value !== 'number') throw new TypeError('值必须为数字'); return Reflect.set(target, property, value, receiver); }};const proxy = new Proxy(target, handler);proxy.age = 30; // 输出：设置属性：age = 30proxy.name = '李四'; // 报错：TypeError: 值必须为数字

• 作用：控制属性存在性检查。
• 示例瞎埋竖：const target = { name: '张三' };const handler = { has(target, property) { console.log(`检查属性：${property} 是否存在`); if (property === 'age') return false; // 拦截 age 的检查 return Reflect.has(target, property); }};const proxy = new Proxy(target, handler);console.log('name' in proxy); // 输出：检查属性：name 是否存在 → trueconsole.log('age' in proxy); // 输出：检查属性：age 是否存在 → false

• 作用：限制属性删除。
• 示例：const target = { name: '张三', age: 30 };const handler = { deleteProperty(target, property) { console.log(`删除属性：${property}`); if (property === 'name') return false; // 阻止删除 name return Reflect.deleteProperty(target, property); }};const proxy = new Proxy(target, handler);delete proxy.name; // 输出：删除属性：name → false（未删除）delete proxy.age; // 输出：删除属性：age → true（删除成功）console.log(target); // { age: 30 }（name 仍存在）

• 作用：控制 Object.getOwnPropertyNames() 或 Object.getOwnPropertySymbols() 的返回结果。
• 示例：const target = { name: '张三', age: 30, [Symbol('secret')]: '隐藏信息' };const handler = { ownKeys(target) { console.log('获取属性键'); return ['name', 'age']; // 只返回 name 和 age }};const proxy = new Proxy(target, handler);console.log(Object.getOwnPropertyNames(proxy)); // ['name', 'age']console.log(Object.getOwnPropertySymbols(proxy)); // []

• 作用：记录调用信息或修改返回值。
• 示例：const target = function() { console.log('函数被调用'); return 'Hello'; };const handler = { apply(target, thisArg, argumentsList) { console.log('拦截函数调用'); return `修改后：${target.apply(thisArg, argumentsList)}`; }};const proxy = new Proxy(target, handler);console.log(proxy()); // 输出：拦截函数调用 → 修改后：Hello

• 作用：控制类实例的创建过程。
• 示例：class Person { constructor(name, age) { this.name = name; this.age = age; } }const handler = { construct(target, argumentsList, newTarget) { console.log('拦截 new 操作'); return new target(...argumentsList); }};const proxy = new Proxy(Person, handler);const person = new proxy('张三', 30); // 输出：拦截 new 操作console.log(person); // Person { name: '张三', age: 30 }

• 数据验证：在 set 中检查属性值是否合法。
• 日志记录：在 get 或 set 中记录操作日志。
• 权限控制：通过 has 或 get 限制属性访问。
• 数据绑定：结合 set 实现响应式更新（如 Vue 的数据劫持）。
• 缓存：在 get 中缓存计算结果。

• Reflect 提供了与 Proxy trap 对应的方法（如 Reflect.get()、Reflect.set()），用于执行默认行为。
• 优势：Reflect 的方法在失败时返回 false 而非抛出错误，便于 Proxy 处理异常情况。

• 性能：Proxy 会增加一层拦截，可能影响性能，需谨慎用于高频操作。
• 兼容性：ES6 特性，旧浏览器（如 IE）不支持。
• 循环引用：避免 Proxy 的 target 是另一个 Proxy，否则可能导致栈溢出。
• 调试：拦截行为可能增加调试难度，需借助开发者工具跟踪执行流程。

通过合理使用 Proxy，可以灵活控制对象行为，但需权衡功能与性能、兼容性等问题。