Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现日志、校验、响应式等场景，提升元编程能力。

JavaScript中的Proxy和Reflect是ES6引入的两个重要特性，它们为对象操作提供了更强大的元编程能力。Proxy可以拦截并自定义对象的基本操作，而Reflect则提供了一套统一的方法来执行这些操作，并与Proxy配合使用效果更佳。

Proxy：创建可监听的对象代理

Proxy用于创建一个对象的代理，从而可以拦截并重新定义对该对象的各种操作，比如属性读取、赋值、枚举、函数调用等。它的基本语法如下：

const proxy = new Proxy(target, handler);

其中，target 是要被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被捕获以及如何响应。

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

• get(target, property)：拦截对象属性的读取
• set(target, property, value)：拦截属性设置
• has(target, property)：拦截 in 操作符
• deleteProperty(target, property)：拦截 delete 操作
• apply(target, thisArg, args)：拦截函数调用（仅当目标是函数时）
• construct(target, args)：拦截 new 操作符

示例：实现一个带日志功能的属性访问代理

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

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

Reflect：统一的对象操作API

Reflect不是构造函数，而是一个内置对象，它提供了一系列静态方法，对应于Proxy中可以捕获的操作。例如，Reflect.get() 对应 get 捕获器，Reflect.set() 对应 set 捕获器。

使用Reflect的好处在于：

Bailian Usage Proxy

阿里百炼大模型平台多人共享账号用量统计代理服务。解决公司共用账号时无法区分个人用量的问题。适用场景：1)部署用量统计代理；2)统计多人Token用量和调用次数；3)管理大模型API调用配额。

下载

• 让对象操作更加规范化和函数式
• 避免直接调用Object上的方法可能出现的this问题
• 与Proxy结合时能更方便地转发默认行为

常见Reflect方法：

• Reflect.get(target, property, receiver)
• Reflect.set(target, property, value, receiver)
• Reflect.has(target, property)
• Reflect.deleteProperty(target, property)
• Reflect.apply(func, thisArg, args)
• Reflect.construct(Constructor, args)

改进上面的例子，使用Reflect保持默认行为：

const proxiedObj = new Proxy(obj, {
  get(target, property, receiver) {
    console.log(`读取属性: ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`设置属性: ${property} = ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
});

这样既能添加逻辑，又能确保原有行为不被破坏。

Proxy + Reflect 的典型应用场景

这两个API组合使用非常灵活，适用于多种实际场景：

• 数据绑定与响应式系统：如Vue 3利用Proxy实现响应式，通过拦截get收集依赖，set触发更新
• 参数校验与类型检查：在set时验证数据格式或范围
• 不可变对象封装：阻止对对象的修改操作并抛出错误
• 调试与监控工具：记录所有对象访问行为，便于排查问题
• 私有属性模拟：通过has和get控制某些属性对外不可见

例如，防止非法属性赋值：

const validatedObj = new Proxy({}, {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('age必须是数字');
    }
    return Reflect.set(target, property, value);
  }
});

基本上就这些。Proxy和Reflect共同构成了JavaScript中强大的元编程基础，合理使用能让代码更具表现力和可控性。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！