JavaScript代理与反射使用教程

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript代理与反射详解教程》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

Proxy 与 Reflect 必须协同工作，因 Reflect 提供带 receiver 的标准操作以正确处理访问器、原型链和私有字段；Object.defineProperty 无法监听动态属性或数组索引，而 Proxy 可拦截 13 种操作；Reflect 方法返回布尔值而非抛错，更利于防御性编程。

为什么 set/get 拦截里一定要用 Reflect.set() 和 Reflect.get()

直接写 target[prop] = value 或 target[prop] 看似省事，但会绕过三类关键语义：

• 访问器（getter/setter）里的 this 指向错误：不传 receiver，this 会指向原始 target，而非代理对象，导致 this._name 读写错位
• 原型链查找失效：比如 obj.toString() 可能查不到 Object.prototype 上的方法
• 私有字段（#field）直接报错：target[prop] 不支持私有字段访问，而 Reflect.get(target, prop, receiver) 支持

正确写法始终带 receiver 参数：

const handler = {
  get(target, prop, receiver) {
    console.log('get', prop);
    return Reflect.get(target, prop, receiver); // ✅
  },
  set(target, prop, value, receiver) {
    console.log('set', prop, value);
    return Reflect.set(target, prop, value, receiver); // ✅
  }
};

Proxy 能拦什么，Object.defineProperty 为什么不够用

常见误区是拿 Object.defineProperty 去做响应式或校验，但它只能监听「已存在」的属性；而真实场景中，用户随时可能 obj.newKey = 1 或 delete obj.x。

• Proxy 可拦截 13 种操作，包括 ownKeys（影响 for...in、Object.keys）、has（影响 'x' in obj）、deleteProperty、construct（new 调用）等
• Object.defineProperty 对数组索引赋值（arr[0] = 'x'）完全无反应；Proxy 的 set trap 可捕获
• 无法监听新增属性：给一个空对象加属性，Object.defineProperty 根本没机会介入

哪些场景非用 Proxy + Reflect 不可

这不是炫技工具，而是解决特定工程问题的最小可行方案：

• 响应式系统：Vue 3 的 reactive() 就靠它实现依赖自动收集与触发，get 拦截时记录副作用，set 时批量通知更新
• 运行时类型校验：在 set 中检查 value 类型，但赋值动作仍交由 Reflect.set() 执行，确保描述符（如 writable: false）不失效
• 只读/不可变封装：拦截 set、deleteProperty、defineProperty、preventExtensions 全部可变入口，统一返回 false 或抛错
• 调试代理：所有操作前打日志、记录调用栈（console.trace()），不影响原逻辑执行路径

Reflect 方法返回值和错误处理很特别

它不抛异常，而是用布尔值表示成败，这对防御性编程更友好：

• Reflect.deleteProperty(obj, 'x') 返回 true/false，而 delete obj.x 在严格模式下删不可配置属性会直接报错
• Reflect.has(obj, 'x') 对 null 或 undefined 安全，'x' in null 则抛 TypeError
• Reflect.construct() 是唯一能指定 new.target 的方式，用于继承内置类（如 class MyArray extends Array）

真正难的不是写第一个 Proxy，而是意识到：只要涉及动态属性、原型链、访问器、私有字段或跨框架集成，就绕不开 receiver 和 Reflect 的组合。漏掉任何一个，都可能在某个边界 case 里静默失败。

本篇关于《JavaScript代理与反射使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！