代理对象：修改和删除属性行为

前端

2023-11-29 06:31:48

代理对象（下）

引言

本系列文章的上篇中，我们探索了代理对象用于读取属性的机制。在本篇中，我们将深入研究代理对象如何代理修改和删除属性的行为。

修改属性

要代理修改属性的行为，我们必须拦截属性赋值操作。我们可以通过以下两种方式之一来实现此目的：

Getter/Setter 拦截： 我们可以定义一个 getter 和 setter 来拦截对属性的访问和修改。当属性被访问或修改时，这些方法将被调用，我们可以执行自定义逻辑。
Proxy Handler 的赋值拦截： 我们可以使用 Proxy 类的 set 拦截器来拦截赋值操作。当属性被分配新值时，此拦截器将被调用，我们可以执行自定义逻辑。

删除属性

要代理删除属性的行为，我们必须拦截 delete 操作。我们可以使用 Proxy 类的 deleteProperty 拦截器来实现此目的。当属性被删除时，此拦截器将被调用，我们可以执行自定义逻辑。

示例

以下示例演示如何代理修改和删除属性的行为：

const object = {
  name: 'John',
  age: 30,
};

const handler = {
  set(target, prop, value) {
    console.log(`Property '${prop}' modified with value '${value}'`);
    target[prop] = value;
  },
  deleteProperty(target, prop) {
    console.log(`Property '${prop}' deleted`);
    delete target[prop];
  },
};

const proxy = new Proxy(object, handler);

proxy.name = 'Jane'; // Property 'name' modified with value 'Jane'
delete proxy.age; // Property 'age' deleted