Proxy与Reflect元编程实战-js教程-PHP中文网

Proxy与Reflect元编程实战

狼影

发布： 2025-10-15 10:48:01

原创

718人浏览过

Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现数据监听与响应式系统，如创建只读代理、属性变更通知及简易响应式视图更新机制。

proxy与reflect元编程实战

在JavaScript中，Proxy和Reflect是ES6引入的两个强大元编程工具，它们让开发者可以拦截并自定义对象的基本操作行为。结合使用这两个API，不仅能实现数据监听、访问控制，还能构建更灵活的对象交互机制。

什么是Proxy？

Proxy用于创建一个对象的代理，从而可以拦截对该对象的各种操作，比如读取属性、设置属性、调用方法等。它接受两个参数：目标对象和一个处理器（handler）对象。

常见拦截操作包括：

get：拦截属性读取
set：拦截属性赋值
has：拦截 in 操作符
deleteProperty：拦截 delete 操作
apply：拦截函数调用（针对函数对象）
construct：拦截 new 操作符

示例：实现一个只读对象代理

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

const createReadOnly = (target) => { return new Proxy(target, { set(target, prop, value) { console.error(`Cannot assign to read-only property '${prop}'`); return false; }, deleteProperty(target, prop) { console.error(`Cannot delete property '${prop}'`); return false; } }); }; const obj = { name: "Alice" }; const proxyObj = createReadOnly(obj); proxyObj.name = "Bob"; // 输出错误信息，赋值失败 delete proxyObj.name; // 输出错误信息，删除失败

Reflect的作用与优势

Reflect是一个内置对象，提供了一系列静态方法，用于执行默认的行为。它的方法名与Proxy handler中的方法一一对应。使用Reflect可以让代码更清晰，并确保正确的this绑定。

例如，在Proxy中使用Reflect.get代替target[prop]，能保证原型链上的属性也能正确读取。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

改进上面的例子，加入Reflect：

实战：实现简单的响应式系统

利用Proxy和Reflect，我们可以模仿Vue 3的响应式原理，实现一个极简的响应式系统。

const observers = new WeakMap(); const observe = (target, callback) => { if (!observers.has(target)) { observers.set(target, new Set()); } observers.get(target).add(callback); }; const notify = (target) => { if (observers.has(target)) { observers.get(target).forEach(cb => cb()); } }; const reactive = (target) => { return new Proxy(target, { set(target, prop, value) { const result = Reflect.set(target, prop, value); notify(target); return result; } }); }; // 使用示例 const data = reactive({ count: 0 }); observe(data, () => { console.log("更新视图：", `Count is ${data.count}`); }); data.count = 1; // 视图自动更新 data.count = 2; // 再次更新