JavaScript 代理简介

最近，我首次在生产环境中使用了 Proxy 对象。接下来，我将详细介绍一下它，以及如何在代码中使用它。

Proxy 对象是一种复制对象并可对特定功能应用覆盖的方法。

get这是拦截诸如或之类的基本对象函数的好方法set。

JavaScript 代理对象

让我们从基本的对象定义开始。

const user = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
};

现在，让我们代理这个对象。

const proxyUser = new Proxy(user, handler);

Proxy 对象接受两个参数，第一个是原始对象，第二个是处理程序。处理程序定义哪些操作将被拦截或修改。

假设我们想要修改该get函数。

const handler = {
  get(target, prop) {
    console.log('get called', target, prop);
    return target[prop].toUpperCase();
  },
};

在上面的例子中，我们记录正在调用的内容并修改 get 以始终​​返回大写变体。

现在让我们尝试获取此人的名字。

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS BONGERS

非常整洁！

让我们快速仔细看看我们收到的变量。target
保存着整个对象，而 prop 保存着正在改变的对象。

您还可以仅针对特定属性采取行动。

const handler = {
  get(target, prop) {
    if (prop === 'firstName') {
      return target[prop].toUpperCase();
    }
    return target[prop];
  },
};

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS Bongers

在这种情况下，只有 firstName 属性将以大写形式返回。

处理程序类型

我们已经看到了get正在使用的处理程序，但我们可以利用更多的处理程序。

这些处理程序通常被称为陷阱，因为它们会捕获对目标对象的调用。

以下是我们可以覆盖的陷阱列表。

• apply
• construct
• deleteProperty
• defineProperty
• enumerate
• get
• getPrototypeOf
• getOwnPropertyDescriptor
• has
• isExtensible
• ownKeys
• preventExtensions
• set
• setPrototypeOf

每个处理程序都有其自己的一组属性。您可以在 MDN 上找到完整的列表。

MDN 陷阱列表

您还可以尝试我在 CodePen 中准备的示例。

结论

我们可以使用代理对象来覆盖或捕获特定对象的动作。

通过使用代理，我们可以利用一些通常无法访问的处理程序。这些处理程序可以应用于对象的全部或部分属性。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。