Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现属性代理、数据绑定、验证等高级功能，提升代码控制力与可维护性。
JavaScript的元编程能力让开发者可以干预对象的基本操作行为，其中 Proxy 和 Reflect 是实现这一功能的核心工具。它们从ES6开始引入，为语言带来了前所未有的灵活性和控制力。
Proxy用于创建一个对象的代理，从而可以拦截并自定义该对象的各种基本操作，比如属性读取、赋值、枚举、函数调用等。它就像一道“拦截层”，在目标对象之前处理所有访问请求。
使用语法如下：
const proxy = new Proxy(target, handler);target 是要被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被捕获以及如何响应。
立即学习“Java免费学习笔记（深入）”；
常见捕获器（traps）包括：
示例：实现属性访问的日志记录
const target = { name: 'Alice' }; const loggedObj = new Proxy(target, { get(obj, prop) { console.log(`读取属性: ${prop}`); return obj[prop]; }, set(obj, prop, value) { console.log(`设置属性: ${prop} = ${value}`); obj[prop] = value; return true; // 必须返回true表示赋值成功 } });loggedObj.name; // 输出：读取属性: name loggedObj.age = 25; // 输出：设置属性: age = 25
Reflect 不是一个构造函数，而是一组内置方法的集合，这些方法与Proxy中的trap一一对应。它的出现是为了统一对象操作的底层API，并提供更可靠的默认行为。
例如，使用 Reflect.get(target, key) 可以替代 target[key]，但前者可以在第三个参数传入 thisArg 来控制上下文，更适合在Proxy中调用。
在Proxy中推荐使用Reflect的原因：
改进上面的例子：
const loggedObj = new Proxy(target, { get(obj, prop, receiver) { console.log(`读取属性: ${prop}`); return Reflect.get(obj, prop, receiver); }, set(obj, prop, value, receiver) { console.log(`设置属性: ${prop} = ${value}`); return Reflect.set(obj, prop, value, receiver); } });这里传入的 receiver 是proxy本身，在处理getter/setter或继承场景时非常重要，能确保正确的this指向。
利用Proxy和Reflect可以实现多种高级模式：
数据绑定与响应式系统
Vue 3之前的版本（Vue 2）就使用Object.defineProperty结合Proxy思路进行依赖追踪。通过Proxy可监听整个对象变化，自动触发视图更新。
验证与类型检查
function createValidatedObject(target, validator) { return new Proxy(target, { set(obj, prop, value) { if (validator[prop] && !validator[prop](value)) { throw new Error(`无效的值：${prop} 不能设为 ${value}`); } return Reflect.set(obj, prop, value); } }); }const user = createValidatedObject({}, { age: val => typeof val === 'number' && val > 0 });
user.age = -1; // 抛错
私有属性模拟
虽然JS现在支持#私有字段，但可用Proxy限制对某些属性的外部访问。
const privatePrefix = '_'; const obj = { _secret: '秘密', public: '公开' };const secureObj = new Proxy(obj, {
get(target, prop) {
if (prop.startsWith(privatePrefix)) {
throw new Error(禁止访问私有属性 ${prop});
}
return Reflect.get(target, prop);
}
});
尽管功能强大，但使用Proxy需注意以下几点：
基本上就这些。掌握Proxy与Reflect的关键在于理解它们如何协作：Proxy负责拦截，Reflect负责执行默认行为。合理使用能让代码更具表达力和可维护性。不复杂但容易忽略细节。
以上就是JavaScript元编程_Proxy与Reflect深入的详细内容，更多请关注php中文网其它相关文章！
编程怎么学习？编程怎么入门？编程在哪学？编程怎么学才快？不用担心，这里为大家提供了编程速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
133
收藏
