如何在 JavaScript 中使用代理对象
阅读：11
点赞：0
JavaScript 中的对象是一种非常有用的数据类型，它允许我们使用键值对（类似字典）来定义复杂的数据结构。有时候，我们可能希望改变 JavaScript 对象的默认行为。这时，Proxy 对象就派上了用场。在本文中，我们将探讨什么是代理对象，为什么它们有用，以及如何使用它们。
一、什么是代理对象？
在了解什么是代理对象之前，我们先来看一下“代理”的概念。代理是指行为类似于原始事物但并不是原始事物本身的东西。同理，代理对象是由原始对象创建的对象，它可以在不改变原始对象的情况下拦截和改变其行为。
Proxy 构造函数
Proxy 构造函数接受两个参数：
-
target：要为其创建代理的对象； -
handler：包含一系列用来重新定义或拦截操作的对象。
const proxyObject = new Proxy(target, handler); // 创建一个新的代理对象
代码解释
-
new Proxy(target, handler)：创建一个代理对象。 -
target：需要代理的目标对象。 -
handler：一个对象，其中包含了各种拦截器方法。
二、代理对象是如何工作的？
当我们使用具有特定操作的处理程序创建一个 Proxy Object 时，它会拦截这些操作，并在目标对象上调用时运行您定义的自定义逻辑。
这些操作被称为“陷阱”，它们实际上是对象的内部方法。以下是一些常见的陷阱：
-
get：当读取属性时触发。 -
set：当设置属性时触发。 -
deleteProperty：当删除属性时触发。
代理对象工作原理的可视化
为了更好地理解 Proxy Object 的工作原理，我们可以创建一个简单的可视化例子。当我们试图访问或设置一个值时，它会拦截并执行处理程序中定义的操作（即陷阱）。
// 创建一个简单的对象作为目标
const platform = {
type: "peerlist.io", // 平台类型
handle: "sachin87", // 用户句柄
};
// 创建一个代理对象，并定义处理程序
const proxyPlatformObj = new Proxy(platform, {
get(target, key) { // 当访问属性时触发
console.log(`[Info]: Accessing ${key} at ${Date.now()}`); // 记录访问信息
return target[key]; // 返回属性值
},
});
// 尝试访问属性
proxyPlatformObj.type; // 输出：[Info]: Accessing type at 当前时间戳
// 输出：'peerlist.io'
代码解释
-
const platform = {...};：定义一个普通的 JavaScript 对象。 -
const proxyPlatformObj = new Proxy(platform, {...});：创建一个代理对象。 -
get(target, key) {...}：定义一个陷阱来捕捉对属性的读取。 -
console.log(...);：打印访问日志。 -
return target[key];：返回目标对象的属性值。
三、Proxy Object 的使用案例
1、日志记录
假设我们需要创建一个系统，每次从对象访问属性时，都会记录相关信息。
// 使用代理对象进行日志记录
const proxyPlatformObj = new Proxy(platform, {
get(target, key) { // 当访问属性时触发
console.log(`[Info]: Accessing ${key} at ${Date.now()}`); // 记录访问信息
if (key === "url") { // 如果请求 url 属性
return `https://${target.type}/${target.handle}`; // 返回构造的 URL
}
return target[key]; // 否则返回目标对象的属性值
},
});
// 尝试访问 url 属性
proxyPlatformObj.url; // 输出：[Info]: Accessing url at 当前时间戳
// 输出：'https://peerlist.io/sachin87'
2、验证
另一个应用场景是在添加值之前检查该值。比如，在设置句柄之前，我们希望验证句柄的格式。
// 使用代理对象进行验证
const proxyPlatformObj = new Proxy(platform, {
set(target, key, value) { // 当设置属性时触发
if (key === "handle" && !(/^[a-z0-9]+$/.test(value))) { // 如果是 handle 并且不符合要求
console.error(`[Error]: ${key} should be in small case and can be alphanumerical`); // 报错
return false; // 不允许设置
} else {
return Reflect.set(target, key, value); // 允许设置
}
},
});
proxyPlatformObj.handle = "Sachin87"; // 输出：[Error]: handle should be in small case and can be alphanumerical
代码解释
-
set(target, key, value) {...}：定义一个陷阱来捕捉对属性的设置。 -
if (key === "handle"...：检查是否设置 handle 属性。 -
console.error(...);：打印错误信息。 -
return false;：不允许设置。 -
return Reflect.set(target, key, value);：使用 Reflect 对象保持默认行为。
四、结论
1、我们讨论了什么是代理对象、它是如何工作的以及它的一些用途。代理对象很有帮助，但我们应该意识到它的缺点。我们应该只在必要时使用它，以避免错误地增加复杂性或引入 bug。
2、通过上述案例，我们可以看到 Proxy Object 在扩展对象功能方面的强大能力。然而，过度使用 Proxy 可能会导致代码难以理解和维护。因此，在使用时应谨慎考虑其适用场景。