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 操作符
示例：实现属性访问日志
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 对象。
为什么需要 Reflect？- 使 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 res
ult;
}
});
}
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 提供了元编程能力，掌握它们有助于理解现代框架的底层机制，也能在实际项目中实现更智能的对象控制。不复杂但容易忽略细节，多练几次就能上手。
