在JavaScript里，数据响应式指的是当数据发生变化时，能够自动触发对应的更新逻辑，比如页面渲染、依赖函数执行等。Proxy和Reflect是ES6提供的两个核心特性，搭配使用可以优雅地实现这一能力。
Proxy和Reflect基础概念
Proxy是什么
Proxy可以理解为一个代理对象，它用来包装另一个目标对象，拦截该对象的基础操作，比如属性读取、属性赋值、函数调用等。Proxy接收两个参数，第一个是目标对象，第二个是处理器对象，处理器对象里定义各种拦截行为。
Reflect是什么
Reflect是一个内置对象，它提供了一组用于操作对象的方法，这些方法与Proxy的拦截器一一对应。使用Reflect而不是对象本身的操作，是因为Reflect的方法会返回明确的执行结果，比如赋值成功返回true，失败返回false，更符合函数式编程的习惯。
实现基础响应式拦截
我们先实现一个最简单的响应式，拦截对象的读取和赋值操作，在赋值时打印更新提示。
// 目标对象
const target = {
name: '张三',
age: 20
};
// 依赖存储容器，用来存放每个属性对应的更新函数
const depMap = new Map();
// 收集依赖的函数
function track(key, fn) {
if (!depMap.has(key)) {
depMap.set(key, []);
}
depMap.get(key).push(fn);
}
// 触发依赖的函数
function trigger(key, value) {
const fns = depMap.get(key);
if (fns) {
fns.forEach(fn => fn(value));
}
}
// 创建响应式代理
const proxy = new Proxy(target, {
// 拦截属性读取操作
get(target, key, receiver) {
console.log(`读取属性 ${key}，当前值：${target[key]}`);
// 使用Reflect.get获取属性值，保证this指向正确
return Reflect.get(target, key, receiver);
},
// 拦截属性赋值操作
set(target, key, value, receiver) {
const oldValue = target[key];
// 使用Reflect.set执行赋值操作
const result = Reflect.set(target, key, value, receiver);
if (result && oldValue !== value) {
console.log(`属性 ${key} 从 ${oldValue} 更新为 ${value}`);
// 触发该属性对应的所有依赖函数
trigger(key, value);
}
return result;
}
});
// 收集name属性的依赖
track('name', (val) => {
console.log(`name属性更新了，新值是：${val}`);
});
// 测试读取
console.log(proxy.name);
// 测试赋值
proxy.name = '李四';
运行上面的代码，你会看到首先输出读取的日志和新值，赋值之后会输出更新日志，同时触发依赖函数打印更新提示。
完善响应式系统
上面的例子只支持单个对象的响应式，我们可以封装一个通用的响应式函数，支持嵌套对象，同时处理数组的修改操作。
// 判断是否为对象
function isObject(val) {
return typeof val === 'object' && val !== null;
}
// 响应式转换函数
function reactive(target) {
// 如果已经是代理对象，直接返回
if (target.__isProxy) {
return target;
}
// 如果不是对象，直接返回
if (!isObject(target)) {
return target;
}
const depMap = new Map();
function track(key, fn) {
if (!depMap.has(key)) {
depMap.set(key, []);
}
depMap.get(key).push(fn);
}
function trigger(key, value) {
const fns = depMap.get(key);
if (fns) {
fns.forEach(fn => fn(value));
}
}
const proxy = new Proxy(target, {
get(target, key, receiver) {
// 标记代理对象，避免重复代理
if (key === '__isProxy') {
return true;
}
const res = Reflect.get(target, key, receiver);
// 如果读取的值是对象，递归转为响应式
if (isObject(res)) {
return reactive(res);
}
return res;
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (result && oldValue !== value) {
trigger(key, value);
}
return result;
},
// 拦截删除属性操作
deleteProperty(target, key) {
const hasKey = key in target;
const result = Reflect.deleteProperty(target, key);
if (result && hasKey) {
trigger(key, undefined);
}
return result;
}
});
return proxy;
}
// 使用示例
const user = reactive({
name: '王五',
info: {
address: '北京',
hobbies: ['篮球', '足球']
}
});
// 收集嵌套属性依赖
track('info.address', (val) => {
console.log(`地址更新为：${val}`);
});
// 收集数组依赖
track('info.hobbies', (val) => {
console.log(`爱好更新为：${val.join(',')}`);
});
user.info.address = '上海';
user.info.hobbies.push('羽毛球');
Proxy方案对比Object.defineProperty的优势
传统响应式方案常用Object.defineProperty，对比来看Proxy有明显优势：
- Proxy可以拦截对象的所有基础操作，包括新增属性、删除属性、数组的push、pop等方法，而Object.defineProperty只能拦截已有属性的读取和赋值，新增属性需要手动调用方法处理。
- Proxy的性能更好，不需要遍历对象的所有属性逐个定义getter和setter，对大型对象更友好。
- Proxy的拦截行为更丰富，支持13种拦截器，比如has、ownKeys等，能实现更复杂的场景。
- Reflect的方法返回执行结果，处理异常更方便，比如赋值失败时返回false，不需要try catch。
实际应用场景
Proxy和Reflect实现的响应式可以应用在多个场景：
- 轻量级状态管理：自己实现一个小型的状态管理库，替代部分Redux、Pinia的场景。
- 表单双向绑定：监听表单数据的变化，自动同步页面视图。
- 数据校验：在set拦截器里添加校验逻辑，比如限制年龄必须为数字，赋值不符合要求时直接拦截。
- 日志记录：自动记录对象的所有操作日志，方便调试。
掌握Proxy和Reflect的用法，不仅能理解主流框架的响应式原理，还能在实际开发中解决很多复杂的对象操作问题，是JS进阶必备的技能。