Proxy 和 Reflect 提供 JavaScript 元编程能力，Proxy 可拦截对象操作如 get、set、apply，结合 Reflect 能实现响应式系统、只读代理、自动嵌套对象等高级功能，提升灵活性但需注意性能与调试复杂度。
JavaScript 的元编程能力让开发者可以干预对象的底层行为，比如属性访问、赋值、枚举、函数调用等。其中 Proxy 和 Reflect 是实现这一能力的核心工具。它们不仅可用于调试和数据绑定，还能构建响应式系统、实现不可变代理、访问控制等高级功能。
Proxy：拦截对象操作
Proxy 允许你为一个对象创建“代理”，从而自定义该对象的基本操作行为。它接收两个参数：目标对象和一个“处理器”（handler）对象，handler 中定义了各种“陷阱”（traps），用于拦截对目标的操作。
常见 trap 包括：- get：拦截属性读取
- set：拦截属性赋值
- has：拦截 in 操作符
- deleteProperty：拦截 delete 操作
- apply：拦截函数调用
- construct：拦截 new 操作
例如，实现一个只读代理：
const createReadOnly = (target) => {
return new Proxy(target, {
set() {
throw new Error("Cannot modify readonly object");
},
deleteProperty() {
throw new Error("Cannot delete property from readonly object");
}
});
};
const obj = { name: "Alice" };
const proxy = createReadOnly(obj);
proxy.name = "Bob"; // 抛出错误
Reflect：统一的对象操作 API
Reflect 提供了一组方法，用于以函数形式调用 JavaScript 的默认行为。它的方法与 Proxy traps 对应，通常在 Proxy handler 中配合使用，确保能正确执行原始操作。
立即学习“Java免费学习笔记（深入）”；
使用 Reflect 可以避免直接调用 target 上的方法，提高代码的健壮性和一致性。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
例如，在 set 拦截中验证并调用原逻辑：
const validator = {
set(target, prop, value, receiver) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
return Reflect.set(target, prop, value, receiver);
}
};
const user = new Proxy({}, validator);
user.age = 25; // 成功
user.age = "thirty"; // 抛出 TypeError
注意：传入 receiver 参数是为了保持 this 正确指向代理本身，尤其在 getter/setter 或继承场景中很重要。
高级应用场景
结合 Proxy 与 Reflect，可以实现更复杂的编程模式。
1. 响应式系统（如 Vue 3 的核心原理）
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key); // 收集依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
});
}
// 简化版 track/trigger 示例
let activeEffect = null;
const depsMap = new WeakMap();
function track(target, key) {
if (activeEffect) {
let deps = depsMap.get(target);
if (!deps) {
depsMap.set(target, (deps = new Map()));
}
let dep = deps.get(key);
if (!dep) {
deps.set(key, (dep = new Set()));
}
dep.add(activeEffect);
}
}
function trigger(target, key) {
const deps = depsMap.get(target)?.get(key);
if (deps) {
deps.forEach(effect => effect());
}
}
2. 自动初始化嵌套对象
利用 Proxy 实现“不存在的属性自动变成代理对象”，适合配置管理：
const deepProxy = () => new Proxy({}, {
get(target, key) {
if (!(key in target)) {
target[key] = deepProxy(); // 动态创建嵌套代理
}
return Reflect.get(target, key);
}
});
const config = deepProxy();
config.db.host = 'localhost'; // 无需预先定义 db
console.log(config.db.host); // 'localhost'
3. 函数拦截与日志监控
使用 apply trap 拦截函数调用：
function logCalls(fn, name) {
return new Proxy(fn, {
apply(target, thisArg, args) {
console.log(`Calling ${name} with`, args);
return Reflect.apply(target, thisArg, args);
}
});
}
const add = logCalls((a, b) => a + b, 'add');
add(2, 3); // 输出日志，并返回 5
基本上就这些。Proxy 和 Reflect 的组合为 JavaScript 提供了强大的元编程能力，合理使用可提升代码的灵活性和可维护性，但也要注意性能开销和调试复杂度。不复杂，但容易忽略细节。
