17370845950

JavaScript元编程通过Proxy、Reflect、Object.defineProperty等机制在运行时拦截并自定义对象操作；Proxy仅代理引用类型，需递归处理嵌套对象；Reflect建议与Proxy配合以确保行为一致；defineProperty仅能修改已存在属性且受描述符约束。

JavaScript 元编程不是“写代码生成代码”的抽象概念，而是通过 Proxy、Reflect、Object.defineProperty 等原生机制，在运行时拦截并自定义对象的基本操作行为——比如读属性、调用函数、检测 in 操作，甚至 new 实例化。

Proxy 能拦截哪些操作？常见陷阱在哪

Proxy 是最常用也最容易误用的元编程工具。它不修改目标对象本身，而是在其外层加一层“拦截器”。但很多开发者以为设了 get 就能捕获所有访问，其实：

• 普通变量（如 let x = 1）无法被 Proxy 拦截，只能代理对象、数组、函数等引用类型
• for...in 遍历只触发 ownKeys 和 getOwnPropertyDescriptor，不是 get
• 若在 get 中返回原始值（如字符串），后续对该返回值的操作（如 .length）不会再次经过代理——代理只作用于被代理对象本身
• 深层嵌套对象需递归代理，否则内层属性访问完全绕过拦截逻辑

const handler = {
  get(target, prop) {
    console.log(`访问 ${prop}`);
    const value = target[prop];
    // 注意：这里不自动代理子对象
    return typeof value === 'object' && value !== null ? new Proxy(value, handler) : value;
  }
};

Reflect 和 Proxy 必须配对使用吗

不是必须，但强烈建议。因为 Reflect.get()、Reflect.set() 等方法的设计初衷，就是为 Proxy 提供标准化、可预测的底层操作接口。直接用 target[prop] 可能在某些边界场景下失效：

• 当 target 是一个带 get 访问器的对象时，target[prop] 会触发该访问器；而 Reflect.get(target, prop) 行为更一致，且能传入 receiver 控制 this 绑定
• Reflect.setPrototypeOf() 比 Object.setPrototypeOf() 更安全：前者失败时返回 false，后者直接抛错
• 在 set 拦截器中，用 Reflect.set(target, prop, value, receiver) 才能正确处理 receiver（比如 Vue 3 的响应式依赖收集就依赖这个参数）

defineProperty 动态改属性描述符的实际限制

Object.defineProperty 常被当作“轻量级元编程”，但它只能修改**已存在属性**的描述符，且受 configurable 和 writable 标志严格约束：

• 若原属性 configurable: false，后续无法再用 defineProperty 修改其 get/set、writable 或 enumerable
• 不能用它给对象添加新属性（除非先确保目标是可扩展的，且属性名不存在）
• 对数组索引赋值（如 arr[0] = 1）默认不触发 defineProperty 拦截——那是 set 拦截器的事，defineProperty 只管“定义”动作本身
• Vue 2 的响应式核心靠它劫持 set，但这也导致无法检测数组下标直接赋值或 length 修改等操作

真正动态改行为的关键，不在“能不能加钩子”，而在“钩子是否覆盖所有可能路径”。比如想让某个对象所有属性访问都打日志，仅靠 defineProperty 不够，得用 Proxy；但如果只是冻结某几个关键字段的修改，defineProperty 更轻量、兼容性更好。选哪个，取决于你要控制的粒度和运行时环境约束。