JSProxy是什么？如何拦截对象操作？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JS中Proxy是什么？如何拦截对象操作？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

Proxy通过handler对象拦截13种操作，最常用的是get、set、has、deleteProperty、ownKeys和defineProperty；应优先用Reflect方法而非直接操作target以确保receiver正确和流程完整。

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造器，它本身不修改对象，而是创建一个“代理层”来捕获对目标对象的访问行为。

Proxy 能拦截哪些操作？

它通过 handler 对象定义各种 trap（陷阱），覆盖 13 种底层操作。最常用的是 get、set、has、deleteProperty、ownKeys 和 defineProperty。比如：

• get(target, prop, receiver) 拦截读取属性（包括继承链上的）
• set(target, prop, value, receiver) 拦截赋值，返回 false 可拒绝写入（严格模式下会抛错）
• ownKeys(target) 拦截 Object.getOwnPropertyNames() 和 for...in 等枚举行为
• has(target, prop) 拦截 prop in obj 判断

注意：Proxy 无法拦截属性是否存在本身的语义（如 obj.xxx === undefined 不触发 get），必须用 in 或 hasOwnProperty 才能被 has trap 捕获。

为什么不能直接改 target，而要用 Reflect？

在 trap 中若需执行默认行为（比如正常读属性、设值），应优先调用 Reflect.get()、Reflect.set() 等，而不是直接操作 target[prop]。原因有二：

• Reflect 方法与 trap 参数一一对应，能正确处理 receiver（影响 this 绑定，尤其在访问 getter 时）
• 直接写 target[prop] = value 可能绕过其他代理逻辑或原型链上的 setter，而 Reflect.set() 会按规范走完整赋值流程
• 某些操作（如 deleteProperty）直接 delete target[prop] 返回布尔值，但 Reflect.deleteProperty() 更一致且可被其他 proxy 层继续拦截

const target = { x: 1 };
const proxy = new Proxy(target, {
  get(target, prop) {
    console.log(`读取 ${prop}`);
    return Reflect.get(target, prop); // ✅ 推荐
    // return target[prop]; // ❌ 可能丢失 receiver 或跳过 getter
  }
});

Proxy 的限制和常见坑

它不是万能的，很多操作天然无法拦截：

• 无法拦截普通对象的属性存在性检测（obj.prop !== undefined 不触发任何 trap）
• 无法拦截 Object.keys() —— 它内部调用 ownKeys + getOwnPropertyDescriptor，但只过滤 enumerable 属性；若想控制结果，必须同时重写 ownKeys 和 getOwnPropertyDescriptor
• 无法代理非对象类型（Proxy(42, ...) 报 TypeError）
• 代理后的对象与原对象不相等（proxy === target 为 false），且 proxy 无法被 instanceof 原构造器识别（除非在 getPrototypeOf 或 isExtensible 中手动处理）

另外，嵌套对象不会自动被代理——你得递归包装，或者在 get 中按需返回新代理，否则深层属性访问就“脱钩”了。

终于介绍完啦！小伙伴们，这篇关于《JSProxy是什么？如何拦截对象操作？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！