Proxy允许拦截对象操作，Reflect提供默认行为方法，二者结合可实现数据监听、日志记录等高级功能，如通过get/set捕获器构建响应式系统或监控方法调用。
JavaScript中的代理（Proxy）与反射（Reflect）API为开发者提供了拦截和自定义对象行为的能力，尤其在构建复杂框架、实现数据绑定或进行运行时监控时非常有用。它们不是日常开发中频繁使用的工具，但在高级场景下极具价值。
什么是代理（Proxy）？
Proxy允许你创建一个对象的代理，从而可以拦截并重新定义该对象的基本操作，比如属性读取、赋值、枚举、函数调用等。它接受两个参数：目标对象和一个处理器对象（trap handlers）。
常见捕获器包括：get、set、has、apply、construct等。
例如，实现一个只读视图：
立即学习“Java免费学习笔记（深入）”；
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配合使用，能让你在不侵入原有逻辑的前提下，增强对象的行为控制能力。虽然强大，但也需谨慎使用，避免过度抽象导致调试困难。
