Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的代理机制，通过 handler 中的 trap（如 get、set、has 等）控制访问行为，支持响应式、验证、日志等场景，但不递归代理嵌套对象且有性能开销。
JavaScript 中的代理（Proxy）是一个包装对象，用来拦截并自定义对目标对象的基本操作——比如读取属性、赋值、调用方法、检查是否存在某个属性等。它不改变原对象，而是在访问原对象前加一层“中间人”，让你能精确控制每一次交互。
代理的核心：handler 和 trap
创建 Proxy 需要两个参数：目标对象（target）和处理器对象（handler）。handler 里定义各种“陷阱”（trap），每个 trap 对应一种对象操作。只要触发了对应操作，就会执行你写的逻辑。
get：拦截读取属性，例如 obj.x 或 obj['x'] set：拦截设置属性，例如 obj.x = 1；可返回 true 表示成功，否则抛错（严格模式下） has：拦截 in 操作符，例如 'x' in obj deleteProperty：拦截 delete obj.x apply：拦截函数调用（当 target 是函数时） construct：拦截 new 调用（当 target 是构造函数时）
一个实用例子：带验证的响应式对象
假设你想让对象在被赋值时自动校验类型：
const person = {};const proxy = new Proxy(person, { set(target, key, value) { if (key === 'age' && typeof value !== 'number') { throw new Error('age 必须是数字'); } target[key] = value; console.log(`已设置 ${key}:`, value); return true; }, get(target, key) { console.log(`正在读取 ${key}`); return target[key]; }});proxy.name = '张三'; // ✅ 输出：已设置 name: 张三proxy.age = 25; // ✅ 输出：已设置 age: 25proxy.age = '二十'; // ❌ 抛出错误console.log(proxy.name); // ✅ 输出：正在读取 name → 张三
注意几个关键细节
Proxy 只代理**直接操作**，不会递归代理嵌套对象——想深度代理，得在 get 中对返回值再套一层 Proxy 不能代理某些内置对象的内部方法（如 Array.prototype.push 的底层行为），但可以代理其调用过程 使用 Reflect 配合 trap 更安全，比如 Reflect.set(target, key, value) 替代直接赋值，它会正确处理原型链和 setter 代理对象与原对象不相等：proxy === person 是 false；但它们的属性和行为一致（除非你主动修改）
它不是万能的，但很精准
Proxy 不会替代 Object.defineProperty，也不用于性能敏感场景（每次访问都有额外开销）。但它提供了最细粒度的对象行为控制能力，Vue 3 的响应式系统、Mock 工具、权限控制层、日志追踪等都依赖它。用得好，能让对象“活”起来。
立即学习“Java免费学习笔记（深入）”；
基本上就这些。
以上就是JavaScript中的代理是什么_它如何拦截和自定义对象操作呢的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543498.html
微信扫一扫 
支付宝扫一扫 
