🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
1. 前言
在前端开发中，需要对对象属性进行拦截、监听或动态处理时，常会用到两种原生 API：Object.defineProperty 和 Proxy。对象属性拦截是实现响应式编程、数据验证和代理模式的核心技术。ES5 引入了 Object.defineProperty，为对象属性提供了基础拦截能力。而 ES6 引入的 Proxy 则彻底改变了游戏规则，提供了更强大、更灵活的拦截机制。
本章将从原理、使用方式、性能和兼容性等角度，详解两者的区别，并通过实际案例展示它们在现代前端开发中的应用。
2. 背景与原理
2.1 Object.defineProperty
推出时间：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
核心特点
- 属性级拦截：只能拦截特定属性的读写操作
- 需预先定义：必须在属性访问前定义拦截器
- 直接修改对象：会修改原始对象的结构
- Vue2 的响应式基础：Vue2 使用它实现数据响应式
数组处理的局限性
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; // 无拦截
2.2 Proxy
推出时间：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
核心特点
- 对象级拦截：拦截整个对象的所有操作
- 13 种拦截类型：支持 get, set, has, deleteProperty 等
- 非侵入式：不修改原始对象，创建代理对象
- 动态代理：可在运行时创建和修改
完整的数组拦截
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]
3. 使用方式对比
| 特性 | defineProperty | Proxy |
|---|---|---|
| 拦截粒度 | 单个属性 | 整个对象 |
| 支持的拦截类型 | get、set | get、set、has、deleteProperty、ownKeys、apply、construct 等 |
| 后续新增属性是否拦截 | 否，需要手动再定义 | 是，代理对象创建后对新增属性自动生效 |
| 性能 | 相对更轻量（只在目标属性上做拦截） | 额外一层代理，性能开销更大 |
| 兼容性 | IE9+ | 现代浏览器，IE 不支持 |
4. 实战应用案例
4.1 Vue2 响应式原理 (defineProperty)
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
4.2 Vue3 响应式原理 (Proxy)
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
4.3 高级验证器实现 (Proxy)
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);
}
5. 深度监听实现对比
5.1 defineProperty 深度监听
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
5.2 Proxy 深度监听
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
6. 场景与选型建议
虽然 Proxy 相较于 Object.defineProperty 具备更高的性能以及更多的支持，但是在某些场景下 Object.defineProperty 还是有必要的，建议如下：
| 场景 | 推荐方案 |
|---|---|
| 只需对少数已知属性监听，且需兼容 IE9+ | Object.defineProperty |
| 需要对大量或不确定属性统一拦截 | Proxy |
需要拦截 delete、in、ownKeys 等 | Proxy |
| 性能敏感、拦截量少 | Object.defineProperty |
| 现代应用，无需兼容 IE | Proxy |
7. 结语
Object.defineProperty简单、兼容性好，但只能逐个属性配置，难以一次性拦截整个对象。Proxy功能强大、拦截面广，适合做状态管理、数据双向绑定、权限控制等高级场景，但需要考虑兼容性与性能开销。
随着浏览器支持度的提高，Proxy 正成为越来越主流的解决方案。Vue3 的响应式系统全面转向 Proxy 也印证了这一趋势。然而，defineProperty 在特定场景下仍有其价值，特别是在需要支持旧版浏览器或进行精细属性控制时。
希望本文能帮助开发者理清两者差异，并在开发中快速落地合适的方案。
