JavaScript中的代理与反射API高级应用_技术教程

Proxy允许拦截对象操作，Reflect提供默认行为方法，二者结合可实现数据监听、日志记录等高级功能，如通过get/set捕获器构建响应式系统或监控方法调用。

JavaScript中的代理（Proxy）与反射（Reflect）API为开发者提供了拦截和自定义对象行为的能力，尤其在构建复杂框架、实现数据绑定或进行运行时监控时非常有用。它们不是日常开发中频繁使用的工具，但在高级场景下极具价值。

什么是代理（Proxy）？

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

常见捕获器包括：get、set、has、apply、construct等。

例如，实现一个只读视图：

const target = { name: 'Alice' };
const readOnly = new Proxy(target, {
  set() {
    throw new Error("Cannot modify a read-only object");
  },
  deleteProperty() {
    throw new Error("Cannot delete property");
  }
});

尝试修改readOnly.name会抛出错误，有效保护原始数据。

反射（Reflect）的作用

Reflect不是构造函数，而是一组内置方法，用于执行默认的对象操作。它的方法与Proxy捕获器一一对应，常在Proxy中调用以保留原始行为。

使用Reflect的好处是统一了操作接口，并且多数方法与Object上的方法类似，但更侧重于可编程操作。

例如，在get捕获器中使用Reflect.get：

const reactive = new Proxy(target, {
  get(target, key, receiver) {
    console.log(`GET ${String(key)}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`SET ${String(key)} = ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
});

receiver参数确保this正确指向代理本身，避免访问器属性丢失上下文。

实现简单的响应式系统

借助Proxy和Reflect，可以模拟Vue 3中的响应式机制核心逻辑。

基本思路是：当属性被访问时收集依赖，被修改时触发更新。

简化实现：

const subscribers = new Set();

function track() {
  // 模拟依赖收集
  const effect = activeEffect;
  if (effect) {
    subscribers.add(effect);
  }
}

function trigger() {
  // 触发所有副作用函数
  subscribers.forEach(effect => effect());
}

const reactive = (obj) => {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track();
      return typeof result === 'object' ? reactive(result) : result;
    },
    set(target, key, value, receiver) {
      const oldVal = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldVal !== value) {
        trigger();
      }
      return result;
    }
  });
};

这样就能监听对象变化并自动执行副作用函数，适合构建轻量级状态管理。

使用Proxy实现方法调用拦截与日志记录

对于类实例，可用Proxy包装其实例来监控方法调用。

示例：记录所有方法调用及其参数

class UserService {
  getUser(id) {
    return { id, name: 'Bob' };
  }
  saveUser(user) {
    // 模拟保存
  }
}

const service = new UserService();
const loggedService = new Proxy(service, {
  get(target, key, receiver) {
    const prop = Reflect.get(target, key, receiver);
    if (typeof prop === 'function') {
      return function(...args) {
        console.log(`Calling method: ${key} with`, args);
        const result = Reflect.apply(prop, target, args);
        console.log(`Method ${key} returned`, result);
        return result;
      };
    }
    return prop;
  }
});

这种方式无需修改原类代码即可添加横切关注点，如日志、性能监控或权限检查。

基本上就这些。Proxy和Reflect配合使用，能让你在不侵入原有逻辑的前提下，增强对象的行为控制能力。虽然强大，但也需谨慎使用，避免过度抽象导致调试困难。