JSProxy拦截操作全解析

从现在开始，努力学习吧！本文《JS Proxy拦截对象操作详解》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

Proxy 是 ES6 提供的原生代理机制，能拦截13种操作；Object.defineProperty 仅劫持已有属性的 get/set，无法代理新增属性、枚举、数组索引等。

Proxy 是什么，为什么不能直接用 Object.defineProperty 替代

Proxy 是 ES6 提供的原生代理机制，能真正拦截对象的读、写、枚举、函数调用等 13 种基本操作；而 Object.defineProperty 只能劫持已有属性的 get/set，对新增属性、in、delete、for...in、Object.keys 等完全无感，也无法代理数组索引赋值或 length 修改。

常见误判：以为给对象加个 set 就算“响应式”，结果 obj.newProp = 1 不触发、delete obj.x 不拦截、Reflect.has(target, 'x') 绕过监听——这些都必须靠 Proxy。

最简可用的 get/set 拦截写法

核心是传入两个参数：目标对象（target）和处理器对象（handler）。不手动转发操作会导致代理失效（比如忘了 return Reflect.get(...)）。

• get 和 set 必须显式返回值，否则读取为 undefined，赋值会静默失败
• 推荐统一用 Reflect API 转发，它和 Object 方法行为一致但更可靠（例如正确处理私有字段、原型链）
• 不要在 set 里直接改 target[key] = value，这会绕过后续可能的其他代理或数据校验逻辑

const obj = { x: 1 };
const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('get', key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log('set', key, value);
    return Reflect.set(target, key, value, receiver);
  }
});
proxy.x = 2; // 输出 set x 2，obj.x 变为 2

拦截 for...in、Object.keys、JSON.stringify 等枚举行为

这些操作底层调用的是 ownKeys + getOwnPropertyDescriptor，不是 get。若只写 get，遍历时根本看不到代理逻辑。

• ownKeys 必须返回数组，内容是希望暴露的键名（字符串或 Symbol）
• 若想隐藏某个属性，别把它放进 ownKeys 返回值；若想让 hasOwnProperty 返回 false，还要配合 getOwnPropertyDescriptor 返回 undefined
• JSON.stringify 会调用 getOwnPropertyDescriptor 获取属性描述符，若该方法没返回有效 descriptor，属性会被忽略

const proxy = new Proxy({ a: 1, b: 2 }, {
  ownKeys() {
    return ['a']; // 只暴露 'a'
  },
  getOwnPropertyDescriptor(target, key) {
    if (key === 'b') return undefined; // 让 b 对 hasOwnProperty / JSON.stringify 不可见
    return Reflect.getOwnPropertyDescriptor(target, key);
  }
});
console.log(Object.keys(proxy)); // ['a']
console.log(JSON.stringify(proxy)); // {"a":1}

注意 trap 的 this 和 receiver 区别

所有 handler 方法中，this 指向 handler 对象本身；而 receiver 是原始触发操作的对象（通常是 proxy 本身），在继承或 Reflect 调用中决定 this 绑定和原型链查找起点。

• 漏传 receiver 到 Reflect.get/Reflect.set 会导致 getter/setter 中的 this 指向错误（变成 target 而非 proxy）
• 如果目标对象有 getter，且你希望它内部的 this 指向 proxy（而非 target），必须把 receiver 传下去
• 多数场景下直接透传 receiver 最安全，除非你明确要切断代理链

这个细节在 Vue 3 响应式实现里被反复验证过：不传 receiver，嵌套对象的 reactive 就会断掉。

理论要掌握，实操不能落！以上关于《JSProxy拦截操作全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！