ECMAScript 2020：利用 Proxy 实现对象的操作拦截及添加自定义逻辑-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，我们可以利用 Proxy 对象来拦截对象的操作，也可以添加自定义的逻辑。Proxy 对象提供了一种方便灵活的方式来处理对象的属性访问、赋值、删除等操作，同时也为我们提供了更多的灵活性和控制权。

关于 Proxy 对象

Proxy 对象是 ECMAScript 6 引入的一个全新的对象类型，它允许我们对目标对象的访问进行控制。Proxy 对象由一个目标对象和一个处理程序对象组成，目标对象是被代理的对象，处理程序对象则定义了在目标对象上执行的操作的行为。

Proxy 对象使用示例

下面是一个简单的实例，用于演示 Proxy 对象的使用：

// javascriptcn.com 代码示例
let obj = { name: "John", age: 30 };
let handler = {
  get: function (target, prop) {
    if (prop === "age") {
      return target[prop] + 1;
    } else {
      return target[prop];
    }
  },
  set: function (target, prop, value) {
    if (prop === "name") {
      target[prop] = value.toUpperCase();
    } else {
      target[prop] = value;
    }
    return true;
  },
  has: function (target, prop) {
    if (prop === "age") {
      return false;
    } else {
      return prop in target;
    }
  },
};
let proxy = new Proxy(obj, handler);

// Get object property
console.log(proxy.name); // "JOHN"
console.log(proxy.age); // 31

// Set object property
proxy.name = "David";
proxy.age = 35;
console.log(proxy.name); // "DAVID"
console.log(proxy.age); // 31

// Checking object property existence
console.log("name" in proxy); // true
console.log("age" in proxy); // false

在上面的例子中，我们定义了一个目标对象 obj 和一个处理程序对象 handler。处理程序对象 handler 中定义了三个操作：get、set 和 has。这些操作定义了在目标对象上执行的行为，例如访问属性、赋值属性和检查属性是否存在等。我们通过创建一个新的 Proxy 对象 proxy 来代理目标对象 obj。

通过 proxy 对象，我们可以按照 handler 中定义的操作去访问、修改和检查目标对象 obj 中的属性。例如，当我们访问 proxy.age 属性时，get 操作会返回原本的属性值加上 1，即 30 + 1 = 31。当我们设置 proxy.name 属性时，set 操作会将属性值转换为大写字母并设置回 obj 中的原始属性。当我们检查 proxy.age 属性是否存在时，has 操作会返回 false，因为我们在处理程序中规定了 age 属性不存在。

拦截对象操作

在上面的示例中，我们可以看到在 handler 对象中定义了 get、set 和 has 操作。这些操作允许我们通过处理程序来拦截对象的操作并执行自定义的逻辑。

拦截对象的属性访问

get 操作可以通过自定义的逻辑来拦截目标对象的属性访问，并返回处理后的属性值。在 handler 对象中定义 get 操作的语法为：

let handler = {
  get: function(target, prop, receiver) {
    // Custom logic here
    return Reflect.get(target, prop, receiver);
  },
};

其中，target 是要代理的目标对象，prop 是要访问的属性名，receiver 是最初被调用的对象。我们可以通过自定义的逻辑来处理属性访问，最后通过 Reflect.get() 方法返回处理后的值。

拦截对象的属性赋值

set 操作可以通过自定义的逻辑来拦截目标对象的属性赋值，并执行相应的操作。在 handler 对象中定义 set 操作的语法为：

let handler = {
  set: function(target, prop, value, receiver) {
    // Custom logic here
    return Reflect.set(target, prop, value, receiver);
  },
};

其中，target 是要代理的目标对象，prop 是要赋值的属性名，value 是要赋的值，receiver 是最初被调用的对象。我们可以通过自定义的逻辑来处理属性赋值，最后通过 Reflect.set() 方法来执行相应操作。

拦截对象的属性删除

deleteProperty 操作可以通过自定义的逻辑来拦截目标对象的属性删除，并执行相应的操作。在 handler 对象中定义 deleteProperty 操作的语法为：

let handler = {
  deleteProperty: function(target, prop) {
    // Custom logic here
    return Reflect.deleteProperty(target, prop);
  },
};

其中，target 是要代理的目标对象，prop 是要删除的属性名。我们可以通过自定义的逻辑来处理属性删除，最后通过 Reflect.deleteProperty() 方法来执行相应操作。

添加自定义逻辑

除了拦截对象的操作之外，我们还可以利用 Proxy 对象来添加自定义的逻辑，例如对象值的验证。下面是一个示例，我们可以在赋值给对象属性时验证属性值的类型：

// javascriptcn.com 代码示例
let obj = {};
let handler = {
  set: function(target, prop, value) {
    if(typeof value != 'number') {
      throw new TypeError('Value must be a number.');
    }
    target[prop] = value;
    return true;
  },
};
let proxy = new Proxy(obj, handler);

proxy.age = 30; // Success
proxy.age = '30'; // TypeError: Value must be a number.

在上面的示例中，当我们赋值给 proxy 对象的 age 属性时，set 操作会首先验证属性值的类型，如果不是数字类型，则会抛出一个 TypeError 异常，表示不合法的属性值。

注意事项

当我们使用 Proxy 对象时，有几个需要注意的事项：

Proxy 对象的执行效率相对较低，因为每一个操作都需要经过处理程序进行拦截和处理。
处理程序对象 handler 中必须显式地定义需要拦截的操作，否则默认情况下所有操作都将按照其默认方式进行执行。
Proxy 对象只能代理对象类型的目标对象，无法代理数组、函数等非对象类型的目标对象。
Proxy 对象可以嵌套使用，即在处理程序对象 handler 中使用另一个 Proxy 对象来代理目标对象。

总结

利用 ECMAScript 2020 中的 Proxy 对象，我们可以方便灵活地实现对象的操作拦截和添加自定义逻辑。通过灵活使用 Proxy 对象，可以使我们的代码更加灵活和可维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6523787995b1f8cacdae5c18