使用 JavaScript 代理检测对象变化

代理裤

假设我们有一个用户对象。我们如何检测其属性何时发生变化？

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

现在用户使用以下代码改变他的年龄。

user.age = 33;

但是，我们希望记录此更改以跟踪具体更改。

使用 JavaScript 代理检测对象变化

这时Proxy 对象就派上用场了。
正如我们在上一篇文章中了解到的，Proxy 对象带有一个set处理程序（陷阱）。

处理程序set可以向我们传递以下三个参数。

对象：我们试图修改的整个对象
属性：我们试图修改的属性
值：我们尝试设置的新值

让我们为我们的用户对象创建一个代理，以便我们可以附加一个处理程序。

const handler = {
  set(target, prop, value) {
    // Our code
  },
};

const proxyUser = new Proxy(user, handler);

至于代码，我们想要记录正在更改的属性、之前的值是什么以及新值是什么。

然后我们需要确保设置了新值。

结果是以下函数。

const handler = {
  set(target, prop, value) {
    console.log(`changed ${prop} from ${target[prop]} to ${value}`);
    target[prop] = value;
  },
};

我们再修改一下年龄试试看。

proxyUser.age = 33;

现在控制台将显示此更改和日志changed age from 10 to 33。

检测其他对象属性

有时我们可能会将新属性推送到对象。让我们看看如何捕获这种情况。

proxyUser.email = 'info@daily-dev-tips.com';

再次，这将整齐地记录更改：changed email from undefined to info@daily-dev-tips.com。

然而，有一个小例外。

如果我们的主对象中有一个子对象或数组，它将无法开箱即用。

const user = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
  address: {
    postalCode: '1234AB',
  },
};

proxyUser.address.postalCode = '5678CD';

现在没有记录任何新内容，但是属性已经更改了！
这是因为现在有一个深度代理集。

要登录该级别，我们可以再次利用get处理程序并代理每个属性作为代理本身🤯。

const handler = {
  get(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler);
    }
    return target[key];
  },
  set(target, prop, value) {
    console.log(`changed ${prop} from ${target[prop]} to ${value}`);
    target[prop] = value;
  },
};

现在，当我们重新运行代码时，我们会看到日志显示为changed postalCode from 1234AB to 5678CD。

我将这些示例添加到 CodePen，以便您可以自己尝试。

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

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

文章来源：https://dev.to/dailydevtips1/detect-object-changes-with-javascript-proxy-1o5g

使用 JavaScript 代理 proxy-pants 检测对象变化

使用 JavaScript 代理检测对象变化

代理裤

使用 JavaScript 代理检测对象变化

检测其他对象属性

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