JavaScript代理反射_Proxy与Reflect元编程

Proxy用于创建对象代理以拦截和自定义操作，Reflect提供调用默认行为的统一方法，二者结合可实现日志记录、数据绑定、类型校验等功能，如通过get/set捕获器监控属性访问与修改，并利用Reflect保留原始行为，广泛应用于响应式系统（如Vue 3）、数据验证和调试工具中。

JavaScript中的Proxy与Reflect是ES6引入的重要元编程特性，它们让开发者能够更深入地控制对象的行为。通过拦截和自定义对象的基本操作，实现诸如数据绑定、日志记录、权限校验等高级功能。

什么是Proxy

Proxy用于创建一个对象的代理，从而可以拦截并重新定义对该对象的基本操作（如读取、赋值、枚举等）。它接受两个参数：目标对象和处理器对象（handler）。

常见的捕获器（trap）包括：

• get：拦截属性读取
• set：拦截属性设置
• has：拦截in操作符
• deleteProperty：拦截delete操作
• apply：拦截函数调用（仅用于函数对象）
• construct：拦截new操作符

示例：实现一个简单的属性访问日志

const target = { name: 'Alice' };
const proxy = new Proxy(target, {
  get(obj, prop) {
    console.log(`读取属性: ${prop}`);
    return obj[prop];
  },
  set(obj, prop, value) {
    console.log(`设置属性: ${prop} = ${value}`);
    obj[prop] = value;
    return true;
  }
});

proxy.name; // 输出：读取属性: name
proxy.age = 25; // 输出：设置属性: age = 25

Reflect的作用

Reflect不是构造函数，而是一组内置方法的集合，提供了一种统一的方式调用默认行为。它通常与Proxy配合使用，确保在拦截后仍能执行原始操作。

优点包括：

• 方法命名与Proxy trap保持一致，便于对应
• 多数操作可替代Object上的静态方法
• 支持函数式调用方式，更灵活

示例：在Proxy中使用Reflect保留默认行为

const proxy = new Proxy(target, {
  get(obj, prop, receiver) {
    console.log(`访问 ${prop}`);
    return Reflect.get(obj, prop, receiver);
  },
  set(obj, prop, value, receiver) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('年龄必须是数字');
    }
    return Reflect.set(obj, prop, value, receiver);
  }
});

实际应用场景

利用Proxy和Reflect可以构建多种实用模式：

• 响应式系统：Vue 3使用Proxy实现数据劫持，自动追踪依赖并触发更新
• 数据验证：在set中加入类型或格式校验逻辑
• 不可变对象封装：阻止对目标对象的修改操作
• 调试工具：监控对象属性变化，输出跟踪信息

注意点：

代理仅对对象有效，基本类型无法直接代理；深层响应式需要递归代理或惰性代理策略；性能方面，频繁拦截可能带来开销。

基本上就这些。掌握Proxy与Reflect，能让代码更具灵活性和可维护性。