代理模式

代理模式

停止和控制与目标对象的交互。

使用 Proxy 对象，我们可以更好地控制与某些对象的交互。代理对象可以决定我们与对象交互时的行为，例如在检索或设置值时。

一般来说，代理人意味着另一个代理人。您将与代表您要联系的人的代理人交谈，而不是直接与此人交谈。 JavaScript 中也是如此：我们不是直接与目标对象交互，而是与代理对象交互。

在这篇文章中，因为我认为最好的学习方式是写作和分享。 模式.dev 我试图为您翻译这篇我觉得有用的文章。我选择不翻译整篇文章中的一些英文术语。祝你阅读愉快：）

John Doe 的代表 人 让我们创建对象。

 常人 = {  
 名称：“约翰·多伊”，  
 年龄：42，  
 国籍：“美国人”  
 };

我们希望与代理对象进行交互，而不是直接与此对象交互。在 JavaScript 中， 代理人 使用类 新 Proxy() 文件 很容易一个新的 代理人 我们可以创造。

 常人 = {  
 名称：“约翰·多伊”，  
 年龄：42，  
 国籍：“美国人”  
 }; const personProxy = new Proxy(person, {}); ：

代理人 的第二个论点 处理程序 表示一个对象。在 Handler 对象中，我们可以根据交互类型定义特定的行为。您可以添加到代理处理程序 很多方法 虽然这两种最常见 得到 ve 放 方法是：

• 得到 : 尝试访问属性时调用
• 放 ：尝试更改属性时调用

最终的结果是：

人 而不是直接与对象交互， 人代理 我们将与 人代理 让我们添加处理程序。当试图改变一个属性时 代理人 '的 放 调用该方法时，我们希望代理记录属性的先前值和新值。当试图访问一个属性时 代理人 '的 得到 方法，我们希望代理记录一个更易读的句子，其中包含属性的键和值。

 const personProxy = 新代理（人，{  
 得到：（obj，道具）=> {  
 console.log(`${prop} 的值为 ${obj[prop]}`);  
 },  
 设置：（obj，prop，值）=> {  
 console.log(`将 ${prop} 从 ${obj[prop]} 更改为 ${value}`);  
 obj[prop] = 值；  
 }  
 });

完美的！让我们看看当我们尝试更改或调用属性时会发生什么。

本节中的代码。 密码箱 您可以通过访问

姓名 在访问 Proxy 属性时，Proxy 返回了一个更好听的句子： name 的值是 John Doe .

年龄 更改属性时，代理返回此属性的先前值和新值： 将年龄从 42 岁更改为 43 岁 .

代理可用于添加验证。一个用户， 人 不能用字符串数据值替换对象的年龄或给它们一个空名称。或者如果用户试图访问对象上不存在的属性，我们应该通知用户。

 const personProxy = 新代理（人，{  
 得到：（obj，道具）=> {  
 如果（！obj [prop]）{  
 控制台日志（  
 `嗯..这个属性似乎在目标对象上不存在`  
 );  
 } 别的 {  
 console.log(`${prop} 的值为 ${obj[prop]}`);  
 }  
 },  
 设置：（obj，prop，值）=> {  
 if (prop === "age" && typeof value !== "number") {  
 console.log(`对不起，你只能传递年龄的数值。`);  
 } else if (prop === "name" && value.length < 2) {  
 console.log(`您需要提供一个有效的名称。`);  
 } 别的 {  
 console.log(`将 ${prop} 从 ${obj[prop]} 更改为 ${value}。`);  
 obj[prop] = 值；  
 }  
 }  
 });

让我们看看当我们尝试传递不正确的值时会发生什么！

本节中的代码。 密码箱 您可以通过访问

代理人， 人 他确保我们没有用不正确的值替换对象，这有助于我们保持数据的纯净！

反映

JavaScript 使我们在使用代理时可以轻松更改目标对象。 反映 提供一个名为的内置对象

以前，我们尝试通过使用括号表示法直接获取或设置值来操作和访问代理内目标对象上的属性。代替 反映 我们可以使用对象。 反映 对象中的方法， 处理程序 与对象中的方法同名。

眼镜 对象[道具] 通过访问或功能 obj[prop] = 值 而不是通过设置 反射.get() ve 反射.set() 我们可以通过以下方式访问或修改目标对象的属性方法采用与处理程序对象中的方法相同的参数。

 const personProxy = 新代理（人，{  
 得到：（obj，道具）=> {  
 console.log(`${prop} 的值为 ${Reflect.get(obj, prop)}`);  
 },  
 设置：（obj，prop，值）=> {  
 console.log(`将 ${prop} 从 ${obj[prop]} 更改为 ${value}`);  
 Reflect.set(obj, prop, value);  
 }  
 });

完美的！ 反映 对象，我们可以轻松访问和修改目标对象的属性。

本节中的代码。 密码箱 您可以通过访问

代理是添加对对象行为的控制的强大方法。代理可以有几个用例：它可以帮助验证、格式化、通知或调试。

代理人 过度使用或使用每个 处理程序 对方法调用执行繁重的操作很容易对应用程序的性能产生负面影响。对于性能关键代码，最好不要使用代理。

资源

• 代理人 — MDN
• JavaScript 代理 — 大卫沃尔什
• 很棒的 ES2015 代理 — GitHub @mikaelbr
• 对 ES6 代理性能的思考 — 瓦列里·卡尔波夫

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33288/42321309