Proxy 和 Object.defineProperty 是 JavaScript 中实现对象属性拦截的两种核心 API。Object.defineProperty 基于 ES5，仅支持单个属性拦截且需预先定义，Vue2 响应式依赖于此；Proxy 基于 ES6，可拦截整个对象操作及新增属性，功能更强大，Vue3 已全面采用。两者在粒度、兼容性、性能及适用场景上存在显著差异。通过原理分析、代码示例及 Vue 实战案例，对比了二者的使用方式、深度监听实现及选型建议，帮助开发者根据项目需求选择合适的技术方案。
在前端开发中，需要对对象属性进行拦截、监听或动态处理时，常会用到两种原生 API：Object.defineProperty 和 Proxy。对象属性拦截是实现响应式编程、数据验证和代理模式的核心技术。ES5 引入了 Object.defineProperty，为对象属性提供了基础拦截能力。而 ES6 引入的 Proxy 则彻底改变了游戏规则，提供了更强大、更灵活的拦截机制。
本章将从原理、使用方式、性能和兼容性等角度，详解两者的区别，并通过实际案例展示它们在现代前端开发中的应用。
推出时间：ES5
原理：在已有对象上为单个属性添加或修改访问器（getter/setter），只能拦截对该属性的读取与写入。
基础语法与使用
const obj = { name: 'Alice' };
Object.defineProperty(obj, 'age', {
enumerable: true, // 可枚举
configurable: true, // 可配置
get() {
console.log('获取 age 属性');
return this._age || 18;
},
set(value) {
console.log('设置 age 属性');
if (value < 0) throw new Error('年龄不能为负');
this._age = value;
}
});
console.log(obj.age); // 获取 age 属性 → 18
obj.age = 25; // 设置 age 属性
console.log(obj.age); // 获取 age 属性 → 25
核心特点
数组处理的局限性
const arr = [1, 2, 3];
arr.forEach((_, index) => {
Object.defineProperty(arr, index, {
get() {
console.log(`获取 index ${index}`);
return this[`_${index}`];
},
set(value) {
console.log(`设置 index ${index}`);
this[`_${index}`] = value;
}
});
});
arr[0] = 10; // 设置 index 0
console.log(arr[1]); // 获取 index 1 → 2
// 但无法检测以下操作：
arr.push(4); // 无拦截
arr.length = 0; // 无拦截
推出时间：ES6
原理：创建一个'代理'对象，所有对原对象的操作都会先经过代理，再由 handler 中对应的 trap（陷阱）方法处理。
基础语法与使用
const target = { name: 'Bob', age: 30 };
const handler = {
get(target, prop) {
console.log(`读取属性：${prop}`);
return Reflect.get(target, prop);
},
set(target, prop, value) {
console.log(`设置属性：${prop} = ${value}`);
return Reflect.set(target, prop, value);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 读取属性：name → Bob
proxy.age = 31; // 设置属性：age = 31
核心特点
完整的数组拦截
const arrayHandler = {
get(target, prop) {
if (prop === 'push') {
return function (...args) {
console.log('数组 push 操作:', ...args);
return Array.prototype.push.apply(target, args);
};
}
return Reflect.get(target, prop);
}
};
const arr = [1, 2, 3];
const proxyArr = new Proxy(arr, arrayHandler);
proxyArr.push(4); // 数组 push 操作：4
console.log(proxyArr); // [1, 2, 3, 4]
| 特性 | defineProperty | Proxy |
|---|---|---|
| 拦截粒度 | 单个属性 | 整个对象 |
| 支持的拦截类型 | get、set | get、set、has、deleteProperty、ownKeys、apply、construct 等 |
| 后续新增属性是否拦截 | 否，需要手动再定义 | 是，代理对象创建后对新增属性自动生效 |
| 性能 | 相对更轻量（只在目标属性上做拦截） | 额外一层代理，性能开销更大 |
| 兼容性 | IE9+ | 现代浏览器，IE 不支持 |
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`获取 ${key}: ${val}`);
return val;
},
set(newVal) {
console.log(`设置 ${key}: ${newVal}`);
val = newVal;
}
});
}
const vue2Data = {};
defineReactive(vue2Data, 'message', 'Hello Vue2');
vue2Data.message = 'Updated'; // 设置 message: Updated
function reactive(target) {
return new Proxy(target, {
get(target, key) {
console.log(`获取 ${String(key)}`);
return Reflect.get(target, key);
},
set(target, key, value) {
console.log(`设置 ${String(key)} = ${value}`);
return Reflect.set(target, key, value);
}
});
}
const vue3Data = reactive({ message: 'Hello Vue3' });
vue3Data.message = 'Updated'; // 设置 message = Updated
const validator = {
set(target, prop, value) {
if (prop === 'age') {
if (typeof value !== 'number') throw new TypeError('年龄必须是数字');
if (value < 0) throw new RangeError('年龄不能为负数');
}
if (prop === 'email') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) throw new Error('邮箱格式无效');
}
return Reflect.set(target, prop, value);
}
};
const user = new Proxy({}, validator);
user.age = 25; // 成功
user.email = '[email protected]'; // 成功
try {
user.age = -5; // 抛出错误：年龄不能为负数
} catch (e) {
console.error(e.message);
}
function observe(obj) {
if (typeof obj !== 'object' || obj === null) return;
Object.keys(obj).forEach(key => {
let value = obj[key];
observe(value); // 递归监听
Object.defineProperty(obj, key, {
get() {
console.log(`获取 ${key}`);
return value;
},
set(newVal) {
if (newVal === value) return;
observe(newVal); // 监听新值
console.log(`设置 ${key} = ${newVal}`);
value = newVal;
}
});
});
}
const data = { user: { name: 'Alice' } };
observe(data);
data.user.name = 'Bob'; // 获取 user → 设置 user.name = Bob
function deepProxy(target) {
if (typeof target === 'object' && target !== null) {
for (const key in target) {
if (typeof target[key] === 'object') {
target[key] = deepProxy(target[key]);
}
}
return new Proxy(target, {
get(target, prop) {
console.log(`读取 ${prop}`);
return Reflect.get(target, prop);
},
set(target, prop, value) {
if (typeof value === 'object') {
value = deepProxy(value);
}
console.log(`设置 ${prop} = ${value}`);
return Reflect.set(target, prop, value);
}
});
}
return target;
}
const data = deepProxy({ user: { name: 'Alice' } });
data.user.name = 'Bob'; // 读取 user → 设置 name = Bob
虽然 Proxy 相较于 Object.defineProperty 具备更高的性能以及更多的支持，但是在某些场景下 Object.defineProperty 还是有必要的，总结如下：
| 场景 | 推荐方案 |
|---|---|
| 只需对少数已知属性监听，且需兼容 IE9+ | Object.defineProperty |
| 需要对大量或不确定属性统一拦截 | Proxy |
需要拦截 delete、in、ownKeys 等 | Proxy |
| 性能敏感、拦截量少 | Object.defineProperty |
| 现代应用，无需兼容 IE | Proxy |
Object.defineProperty 简单、兼容性好，但只能逐个属性配置，难以一次性拦截整个对象。Proxy 功能强大、拦截面广，适合做状态管理、数据双向绑定、权限控制等高级场景，但需要考虑兼容性与性能开销。随着浏览器支持度的提高，Proxy 正成为越来越主流的解决方案。Vue3 的响应式系统全面转向 Proxy 也印证了这一趋势。然而，defineProperty 在特定场景下仍有其价值，特别是在需要支持旧版浏览器或进行精细属性控制时。
希望本文能帮开发者理清两者差异，并在开发中快速落地合适的方案。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online