Proxy是JavaScript中用于创建对象代理的构造函数，通过拦截get、set、has、apply等操作实现元编程，广泛应用于响应式系统、数据验证、调试监控和虚拟属性等场景。
JavaScript的元编程能力让开发者可以控制对象的行为，其中Proxy是实现这一功能的核心工具之一。通过Proxy，我们可以拦截并自定义对象的基本操作，比如属性读取、赋值、枚举、函数调用等。这种机制在数据绑定、日志记录、验证和响应式系统中非常有用。
什么是Proxy？
Proxy 是一个内置构造函数，用于创建一个对象的代理，从而可以拦截和重新定义该对象的基本操作。语法如下：
new Proxy(target, handler)其中：
- target：要被代理的对象。
- handler：一个对象，定义了代理的行为，即“陷阱（traps）”函数，如 get、set、has、deleteProperty 等。
常用拦截操作示例
以下是一些常见的Proxy拦截方法及其用途：
立即学习“Java免费学习笔记（深入）”；
1. get 拦截属性读取
当访问对象属性时触发，可用于默认值处理或日志输出。
const target = { name: 'Alice' };const proxy = new Proxy(target, {
get(obj, prop) {
console.log(`读取属性: ${prop}`);
return prop in obj ? obj[prop] : `未定义属性: ${prop}`;
}
});
proxy.name; // 输出：读取属性: name
proxy.age; // 输出：读取属性: age，返回 "未定义属性: age"
2. set 拦截属性赋值
常用于数据验证或自动类型转换。
const data = {};const proxy = new Proxy(data, {
set(obj, prop, value) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('age 必须是数字');
}
obj[prop] = value;
console.log(`设置 ${prop} 为 ${value}`);
return true;
}
});
proxy.age = 25; // 正常
proxy.age = '三十'; // 抛出错误
3. has 拦截 in 操作符
控制属性是否存在判断。
const obj = { name: 'Bob' };const proxy = new Proxy(obj, {
has(target, prop) {
if (prop.startsWith('_')) return false;
return prop in target;
}
});
'_secret' in proxy; // false
'name' in proxy; // true
4. apply 拦截函数调用
仅适用于包装函数对象，可用来做参数校验或缓存。
function sum(a, b) {return a + b;
}
const proxyFn = new Proxy(sum, {
apply(target, thisArg, args) {
console.log('调用函数，参数:', args);
return target.apply(thisArg, args);
}
});
proxyFn(2, 3); // 输出日志，并返回 5
实际应用场景
1. 响应式系统基础
Vue 3 的响应式系统就是基于 Proxy 实现的。通过拦截 get 收集依赖，在 set 时触发更新。
2. 数据校验与封装
可以在不修改原始对象逻辑的前提下，加入类型检查、格式化等逻辑。
3. 调试与监控
利用拦截器记录属性访问、修改行为，便于调试复杂对象的状态变化。
4. 虚拟属性或计算属性
通过 get 动态生成某些属性值，对外表现如同普通属性。
firstName: 'John',
lastName: 'Doe'
};
const proxyUser = new Proxy(user, {
get(target, prop) {
if (prop === 'fullName') {
return `${target.firstName} ${target.lastName}`;
}
return target[prop];
}
});
proxyUser.fullName; // "John Doe"
基本上就这些。Proxy 提供了强大的底层控制能力，但也要注意性能开销和调试复杂性。合理使用能让代码更灵活、更具扩展性。不复杂但容易忽略的是，某些操作如遍历（ownKeys）、删除（deleteProperty）也可以被拦截，按需选择即可。
