JavaScript的Proxy对象可以在目标对象外层创建一个拦截层，拦截对象的基本操作如属性读取、赋值、删除等，这一特性为实现数据双向绑定提供了更灵活的方案，相比传统的Object.defineProperty，Proxy能处理更多场景的对象操作拦截。
Proxy核心特性回顾
Proxy的构造函数接收两个参数，第一个是目标对象，第二个是处理器对象，处理器对象中定义各种拦截陷阱，常用的陷阱包括get和set：
get(target, prop, receiver)：拦截对象属性的读取操作，target是目标对象，prop是属性名，receiver是Proxy实例本身set(target, prop, value, receiver)：拦截对象属性的赋值操作，value是要赋的新值，赋值成功返回true，失败返回false
下面是一个简单的Proxy使用示例，拦截对象的属性赋值操作并打印日志：
// 定义目标对象
const target = {
name: 'test'
};
// 创建Proxy实例
const proxy = new Proxy(target, {
get(target, prop) {
console.log(`读取属性 ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`设置属性 ${prop} 为 ${value}`);
target[prop] = value;
return true;
}
});
// 测试操作
proxy.name; // 输出：读取属性 name
proxy.age = 20; // 输出：设置属性 age 为 20
双向绑定的核心思路
用Proxy实现双向绑定的核心逻辑分为三个部分：
- 用Proxy劫持数据对象的所有属性操作，在数据变化时触发更新逻辑
- 收集依赖，也就是记录哪些视图元素依赖了当前数据属性，当数据变化时更新这些元素
- 监听视图的变更事件，比如输入框的input事件，当视图变化时同步修改Proxy代理的数据对象
完整实现步骤
1. 定义依赖收集容器
我们需要一个结构来存储每个数据属性对应的依赖，这里使用WeakMap来存储，键是数据对象，值是另一个Map，这个Map的键是属性名，值是依赖该属性的回调函数数组：
// 依赖收集容器
const depMap = new WeakMap();
// 获取某个对象的某个属性对应的依赖数组
function getDep(target, prop) {
if (!depMap.has(target)) {
depMap.set(target, new Map());
}
const targetDep = depMap.get(target);
if (!targetDep.has(prop)) {
targetDep.set(prop, []);
}
return targetDep.get(prop);
}
2. 创建带依赖收集和更新的Proxy
在Proxy的set陷阱中触发对应属性的依赖回调，实现数据变化自动通知：
function createReactive(obj) {
return new Proxy(obj, {
get(target, prop) {
// 这里可以扩展依赖收集逻辑，比如当前有正在执行的副作用函数时将其加入依赖
return target[prop];
},
set(target, prop, value) {
const oldValue = target[prop];
// 赋值操作
target[prop] = value;
// 触发依赖更新
const deps = getDep(target, prop);
deps.forEach(callback => {
callback(oldValue, value);
});
return true;
}
});
}
3. 实现视图与数据的绑定
接下来实现绑定逻辑，支持将输入框的值和数据属性绑定，同时支持将文本节点的内容绑定到数据属性：
// 绑定输入框和数据属性
function bindInput(el, key, reactiveObj) {
// 初始赋值
el.value = reactiveObj[key];
// 监听输入事件，视图变化同步到数据
el.addEventListener('input', () => {
reactiveObj[key] = el.value;
});
// 收集依赖，数据变化同步到视图
const deps = getDep(reactiveObj, key);
deps.push(() => {
el.value = reactiveObj[key];
});
}
// 绑定文本节点和数据属性
function bindText(el, key, reactiveObj) {
// 初始赋值
el.textContent = reactiveObj[key];
// 收集依赖，数据变化同步到视图
const deps = getDep(reactiveObj, key);
deps.push(() => {
el.textContent = reactiveObj[key];
});
}
4. 完整使用示例
下面是完整的调用示例，实现一个简单的数据双向绑定：
// 定义原始数据
const data = {
message: 'hello'
};
// 创建响应式对象
const reactiveData = createReactive(data);
// 获取DOM元素
const inputEl = document.querySelector('#input');
const textEl = document.querySelector('#text');
// 绑定输入框
bindInput(inputEl, 'message', reactiveData);
// 绑定文本节点
bindText(textEl, 'message', reactiveData);
对应的HTML结构如下：
<div> <input type="text" id="input" /> <p id="text"></p> </div>
运行上述代码后，修改输入框的内容，下方的文本会同步更新；如果通过代码修改reactiveData.message的值，输入框和文本节点也会同步更新，实现了双向绑定。
Proxy与Object.defineProperty的对比
| 对比项 | Proxy | Object.defineProperty |
|---|---|---|
| 拦截范围 | 可以拦截对象的所有基本操作，包括新增属性、删除属性、数组索引修改等 | 只能拦截对象的属性读取和赋值，新增属性需要额外处理，数组修改需要重写数组方法 |
| 性能 | 性能更优，不需要遍历所有属性进行劫持 | 需要遍历对象所有属性逐个定义，性能相对较差 |
| 兼容性 | 不支持IE，现代浏览器支持较好 | 兼容性更好，支持IE9及以上 |
总的来说，Proxy实现双向绑定的逻辑更简洁，覆盖的场景更全面，在现代前端项目中是更优的选择，不过如果项目需要兼容低版本浏览器，还是需要选择Object.defineProperty的方案。
Proxy数据双向绑定JavaScriptdefineProperty修改时间：2026-06-20 17:51:36