JavaScript_代理与反射API实战解析

Proxy与Reflect配合实现对象操作拦截与默认行为控制，用于响应式系统等场景。

代理（Proxy）和反射（Reflect）是 JavaScript 中强大且灵活的特性，能够让我们拦截并自定义对象的基本操作。它们常用于数据校验、日志记录、响应式系统等场景。下面通过实战方式解析 Proxy 与 Reflect 的核心用法与配合机制。

什么是 Proxy？

Proxy 可以为一个对象创建“代理”，从而拦截其基本操作，比如读取、写入、删除属性等。它接受两个参数：目标对象和一个处理器对象（handler），handler 定义了要拦截的操作及对应的处理逻辑。

const proxy = new Proxy(target, handler);

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

示例：实现属性访问日志

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

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

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

Reflect：让默认行为更可控

Reflect 不是一个构造函数，而是一组内置方法，用于执行对象的默认操作。它与 Proxy 配合使用，可以更清晰地调用原始行为，避免直接操作 target 对象。

ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

112

查看详情

• 使 Proxy 中的操作更一致，例如 set 返回布尔值
• 替代传统 Object 方法，提供更统一的 API
• 避免 this 指向问题

改进上面的例子，使用 Reflect：

const loggedUser = new Proxy(user, {
  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);
  }
});

使用 Reflect.get 和 Reflect.set 能确保正确处理 getter/setter 以及原型链上的属性。

实战：构建响应式系统雏形

Vue 3 利用 Proxy + Reflect 实现了高效响应式系统。我们来模拟一个简化版本。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, property, receiver) {
      let value = Reflect.get(target, property, receiver);
      if (typeof value === 'object' && value !== null) {
        return reactive(value); // 深层代理
      }
      track(target, property); // 收集依赖
      return value;
    },
    set(target, property, value, receiver) {
      let result = Reflect.set(target, property, value, receiver);
      trigger(target, property); // 触发更新
      return result;
    }
  });
}

let activeEffect = null;
function effect(fn) {
  activeEffect = fn;
  fn(); // 执行时触发 get，自动收集
  activeEffect = null;
}

const targetsMap = new WeakMap();
function track(target, property) {
  if (!activeEffect) return;
  let depsMap = targetsMap.get(target);
  if (!depsMap) {
    targetsMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(property);
  if (!dep) {
    depsMap.set(property, (dep = new Set()));
  }
  dep.add(activeEffect);
}

function trigger(target, property) {
  const depsMap = targetsMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(property);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

测试响应式：

const state = reactive({ count: 0 });
effect(() => {
  console.log('count 变为:', state.count);
});

state.count++; // 输出：count 变为: 1
state.count++; // 输出：count 变为: 2

注意事项与最佳实践

• Proxy 不能代理所有对象特性，如对象的内部插槽（如 Date 的时间值）需特殊处理
• 使用 WeakMap 存储依赖，避免内存泄漏
• Reflect 方法应尽量与 Proxy 陷阱一一对应，保持行为一致性
• 深层响应式需递归代理，注意性能与循环引用
• 不可变操作（如 freeze）会影响 Proxy 行为，需提前规划

基本上就这些。Proxy 与 Reflect 的组合为 JavaScript 提供了元编程能力，掌握它们有助于理解现代框架的底层机制，也能在实际项目中实现更智能的对象控制。不复杂但容易忽略细节，多练几次就能上手。

以上就是JavaScript_代理与反射API实战解析的详细内容，更多请关注php中文网其它相关文章！