JS魔法中介：Proxy和Reflect为何形影不离？

🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河！

欢迎来到 晷龙烬的博客小窝✨！这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～

原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！欢迎在评论区交流🌟！

引言

你有没有遇到过这种场景：想监控对象属性的读写、想给对象加点"隐藏技能"，又不想直接修改原对象？就像给房子装个智能管家，既能控制访客，又不破坏房子本身。 ES6 带来的 Proxy 和 Reflect 就是干这个的！但很多人 ES6 用得溜，却忽略了这对"黄金搭档"。今天咱们就来说一下他们俩个！

一、Proxy：你的专属"对象中介"

想象你有个对象 user，它像一栋房子：

ini 复制代码

 const user = { name: "晷龙烬", age: 18 };

现在你想监控谁进了这房子（读属性）、谁改了装修（写属性）。直接改 user 代码？太粗暴！ Proxy 登场------它给对象套个"中介壳"，所有操作都得通过它：

javascript 复制代码

 const userProxy = new Proxy(user, {
   get(target, key) {
     console.log(`有人查看了你的${key}！`);
     return target[key]; // 返回原属性值
   },
   set(target, key, value) {
     console.log(`有人把${key}改成了${value}！`);
     target[key] = value; // 修改原属性
     return true; // 告诉JS设置成功
   }
 });
 
 userProxy.age; // 控制台输出：有人查看了你的age！
 userProxy.age = 25; // 输出：有人把age改成了25！

关键点：

Proxy 是个"壳"，不改变原对象。
get 和 set 是最常用的"拦截器"（专业叫 陷阱/trap），还能拦截删除、函数调用等 13 种操作。
适用场景：数据校验、日志监控、自动填充属性... 比如禁止设置非数字属性。

二、Reflect：Proxy的"最佳拍档"

上面代码用 target[key] 直接操作原对象，但这样有个问题：万一原对象有特殊属性（如 getter）可能出错 ！这时就需要 Reflect------它像一套标准化工具，专门安全地操作对象：

javascript 复制代码

 const userProxy = new Proxy(user, {
   get(target, key, receiver) {
     console.log(`拦截查看: ${key}`);
     return Reflect.get(target, key, receiver); // 更安全的读取
   },
   set(target, key, value, receiver) {
     console.log(`拦截修改: ${key}=>${value}`);
     return Reflect.set(target, key, value, receiver); // 更安全的设置
   }
 });

为什么用 Reflect？

行为统一 ：Reflect 的方法和 Proxy 的陷阱一一对应，写起来更顺手。
解决 this 陷阱 ：比如对象方法中的 this，用 Reflect 能正确指向代理对象而非原对象。
减少"魔法" ：ES6 把一些底层操作（如 delete obj.x）变成 Reflect.de leteProperty() 这种清晰函数。

💡 简单记：Proxy 负责拦截，Reflect 负责执行。

三、举个栗子🌰：自动必填校验

假设你要做个表单，要求 name 和 email 必填。用 Proxy + Reflect 轻松实现：

ini 复制代码

 const form = {};
 const formProxy = new Proxy(form, {
   set(target, key, value) {
     if (key === 'name' || key === 'email') {
       if (!value) throw new Error(`${key}不能为空！`);
     }
     return Reflect.set(target, key, value); // 安全设置值
   }
 });
 
 formProxy.name = ""; // 报错：name不能为空！
 formProxy.email = "xx@csdn.net"; // 成功！

这样写：

不侵入原对象 ：form 还是普通对象。
校验逻辑集中：后续加规则只需改 Proxy 配置。
Reflect 兜底：确保操作安全执行。

结语

Proxy + Reflect 就像给你的对象加了个"智能开关"：

Proxy 是门卫，控制谁进谁出、能干啥；
Reflect 是万能钥匙，安全执行门卫的指令。

它们在前端高级应用（如 Vue3 响应式系统）中大放异彩，学会后代码灵活度直线上升✨！下次遇到"监控对象"需求，别写一堆 getXXX() 了，试试这对魔法组合吧！

------ 完 ------

✨ 至此结束 ✨

💡 点赞关注，解锁更多技术干货！

我是晷龙烬期待与你的下次相遇～