JavaScript代理对象是什么，如何使用？

本篇文章向大家介绍《JavaScript代理对象是什么，如何拦截操作？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

Proxy是JavaScript内置构造函数，用于创建可拦截读写、调用等操作的代理对象；通过handler定义get/set等trap实现响应式、校验、日志等功能，但无法拦截私有字段、Object.assign等静态方法及原型链隐式访问。

JavaScript 代理对象（Proxy）是什么

Proxy 是 JavaScript 提供的一个内置构造函数，用来创建一个“代理”，拦截并自定义对目标对象的基本操作。它不是装饰器、也不是继承机制，而是一层运行时的拦截网——所有对代理对象的读写、调用、遍历等行为，都可被显式捕获和重定义。

Proxy 如何拦截 get/set 等基本操作

通过传入 handler 对象，你可以定义如 get、set、has、deleteProperty 等 trap（陷阱）。每个 trap 接收代理本身、操作的 key、值（如 set）、原始目标等参数，返回值会影响原操作结果。

常见使用场景包括：实现响应式数据（如 Vue 3）、属性访问校验、日志记录、不可变封装、虚拟属性注入。

• get(target, prop, receiver)：拦截读取，比如 obj.x 或 obj['x']；注意要手动调用 Reflect.get() 否则不触发原型链查找
• set(target, prop, value, receiver)：拦截赋值；必须返回 true 才算设置成功，否则抛出 TypeError（严格模式下）
• has(target, prop)：影响 prop in proxy 和 with 语句
• ownKeys(target)：控制 Object.keys()、for...in 返回的键列表，需返回数组且包含所有自身可枚举键

const target = { a: 1 };
const proxy = new Proxy(target, {
  get(obj, prop) {
    console.log('get', prop);
    return prop in obj ? obj[prop] : 'default';
  },
  set(obj, prop, value) {
    console.log('set', prop, value);
    obj[prop] = value * 2; // 修改写入逻辑
    return true;
  }
});
<p>proxy.a;     // → 'get a', 1
proxy.b = 5; // → 'set b 5', target.b 变为 10</p>

哪些操作无法被 Proxy 拦截

Proxy 只能拦截「语言内部方法（internal methods）」的显式调用，不能覆盖引擎底层优化或绕过规范的行为。以下操作不会触发对应 trap：

• 直接访问原型上的属性（除非 get 中显式处理 receiver 和原型链）
• Object.getOwnPropertyDescriptor(proxy, 'x') → 触发 getOwnPropertyDescriptor，但若没定义该 trap，则退回到目标对象行为
• 某些 Object 静态方法如 Object.assign()、JSON.stringify() 不走 Proxy trap，而是读取属性值后操作
• 私有字段 #x 的访问完全无法拦截（语法层面禁止代理）
• 代理对象自身属性（如 proxy.constructor）不经过 handler，除非你用 getOwnPropertyDescriptor + defineProperty 显式控制

Proxy 与 Object.defineProperty 的关键区别

两者都能做属性拦截，但 Proxy 是对象级、动态、一次性生效；Object.defineProperty 是属性级、静态、需逐个定义，且无法监听新增属性或数组索引赋值（如 arr[1] = x）。

• Proxy 支持数组索引、Symbol 键、动态添加属性的拦截；defineProperty 对数组索引无效（除非把数组当普通对象用）
• Proxy 无法被 for...in / Object.keys 完全隐藏（除非配合 ownKeys + enumerable: false 在目标上设属性）
• Proxy 创建后不可撤销（ES2022 新增 Proxy.revocable() 可解决）
• 性能上，Proxy 开销略高，尤其高频操作场景需谨慎；defineProperty 则在初始化阶段有明显成本

const { proxy, revoke } = Proxy.revocable({ x: 1 }, {});
proxy.x; // → 1
revoke();
proxy.x; // → TypeError: Cannot perform 'get' on a proxy that has been revoked

代理对象真正的复杂点不在 API，而在 trap 之间的协同：比如 set 中修改了某个值，但 get 没同步更新缓存，或 ownKeys 返回的键没被 getOwnPropertyDescriptor 覆盖，就可能让 Object.keys() 和 in 表现出不一致。这些边界必须手工对齐。

到这里，我们也就讲完了《JavaScript代理对象是什么，如何使用？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！