Proxy 可拦截对象操作，Reflect 提供默认行为方法，二者配合实现元编程，如属性读写拦截、函数调用埋点，用于响应式系统、权限控制等场景。
JavaScript 的元编程能力让开发者可以干预对象的底层行为，比如属性的读取、赋值、枚举、函数调用等。其中 Proxy 和 Reflect 是实现这一能力的核心工具。它们常配合使用，为对象操作提供拦截与反射机制。
什么是 Proxy？
Proxy 可以理解为对象的“代理器”。通过它，你可以包装一个对象，并定义一个“处理器（handler）”来拦截对该对象的各种操作。
基本语法：
const proxy = new Proxy(target, handler);- target：要被代理的目标对象
- handler：一个对象，定义了代理的行为，比如 get、set、apply 等陷阱（traps）
例如，拦截属性读取：
立即学习“Java免费学习笔记（深入）”；
const obj = { name: 'Alice' }; const proxy = new Proxy(obj, { get(target, prop) { console.log(`访问了属性: ${prop}`); return target[prop]; } }); proxy.name; // 输出：访问了属性: name常用 Proxy 拦截操作
Proxy 支持多种拦截方式，常见的包括：
- get(target, prop)：拦截属性读取
- set(target, prop, value)：拦截属性赋值，可用于数据校验
- has(target, prop)：拦截 in 操作符
- deleteProperty(target, prop)：拦截 delete 操作
- apply(target, thisArg, args)：用于函数调用拦截（代理函数时）
- construct(target, args)：拦截 new 调用
示例：实现只读属性校验
const readOnlyHandler = { set(target, prop, value) { console.warn(`不能修改属性 ${prop}`); return false; }, deleteProperty(target, prop) { console.warn(`不能删除属性 ${prop}`); return false; } }; const data = { count: 1 }; const readOnly = new Proxy(data, readOnlyHandler); readOnly.count = 2; // 输出警告，赋值失败Reflect 的作用
Reflect 不是一个构造函数，而是一组方法的集合，这些方法与 Proxy 的 trap 名称一一对应。它的主要作用是让 Object 上的操作变成函数调用，并保持默认行为。
php中级教程之ajax技术
下载
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
使用 Reflect 可以更规范地在 Proxy 中调用原生操作。
对比写法：
// 不推荐：直接操作 target get(target, prop) { return target[prop]; } // 推荐：使用 Reflect.get get(target, prop) { return Reflect.get(target, prop); }优势：
- 行为统一，避免遗漏 this 绑定
- 可轻松实现默认行为转发
- 与 Proxy 配合更自然，代码更清晰
完整示例：日志代理 + Reflect 转发
const logHandler = { get(target, prop) { console.log(`GET ${prop}`); return Reflect.get(target, prop); }, set(target, prop, value) { console.log(`SET ${prop} = ${value}`); return Reflect.set(target, prop, value); } }; const user = { name: 'Bob' }; const loggedUser = new Proxy(user, logHandler); loggedUser.name; // GET name loggedUser.age = 30; // SET age = 30实际应用场景
元编程不是炫技，而是解决特定问题的利器。
- 数据绑定与响应式系统：Vue 3 使用 Proxy 替代 defineProperty 实现响应式，能监听新增/删除属性
- API 代理与调试：自动打印对象访问日志，便于开发调试
- 权限控制：限制对敏感属性的访问或修改
- 函数式拦截：对函数调用做参数校验、缓存、埋点等
示例：函数调用埋点
function trackFn(fn) { return new Proxy(fn, { apply(target, thisArg, args) { console.time('函数执行时间'); const result = Reflect.apply(target, thisArg, args); console.timeEnd('函数执行时间'); return result; } }); } const add = (a, b) => a + b; const trackedAdd = trackFn(add); trackedAdd(2, 3); // 输出执行时间基本上就这些。Proxy 与 Reflect 让 JavaScript 更具表达力和控制力，合理使用可提升代码的健壮性与可维护性。注意性能影响，避免过度代理。
