JavaScript代理反射_Proxy与Reflect元编程-js教程-PHP中文网

JavaScript代理反射_Proxy与Reflect元编程

狼影

发布： 2025-11-29 21:30:07

原创

480人浏览过

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

javascript代理反射_proxy与reflect元编程

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配合使用，确保在拦截后仍能执行原始操作。

立即学习“Java免费学习笔记（深入）”；

牛小影

牛小影 - 专业的AI视频画质增强器

420

查看详情

优点包括：

方法命名与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);
  }
});

登录后复制