JavaScript 对象管家 Proxy

2023年5月28日下午4:14 • JavaScript

JavaScript 对象管家 Proxy 的完整攻略

Proxy 概述

Proxy 是 ES6 所引入的一个内置对象，它用于通过一个代理来控制对另一个对象（目标对象）的访问。被代理的对象可以是任意一个对象。通过定义一系列的 trap 方法，可以在代理对象访问目标对象时截获操作并进行相应处理。

Proxy 的基本使用

在代码中使用 Proxy 时，首先需要创建一个代理对象，同时指定要代理的目标对象。传入代理对象的第一个参数是被代理的对象，第二个参数是包含了一组捕获器 trap 的对象。

let proxyObj = new Proxy(targetObj, handlersObj);

其中，handlersObj 对象包含一系列的 trap 捕获器。一旦在代理对象上调用了某个方法或访问某个属性时，将会触发相应的对应 trap。

Proxy 的常见 `trap` 方法

Proxy 中定义了众多的捕获器方法，其中一些常见的 trap 方法如下：

get(target, property, receiver)：用于获取属性值时被触发。
set(target, property, value, receiver)：用于设置属性值时被触发。
apply(target, thisArg, argArray)：用于对代理函数的执行进行拦截和操作。
has(target, property)：判断某个属性是否存在的方法。
deleteProperty(target, property)：用于删除某个属性时被触发。
defineProperty(target, property, descriptor)：用于在目标对象上定义新属性或者修改（或删除）现有属性。

示例说明一：属性名验证

以下示例展示了如何用 Proxy 实现属性名验证功能，如果属性名以 "_" 开头，则代理对象会忽略掉这个属性。

let person = {
  name: "张三",
  age: 18,
  _sayHello: function() {
    console.log("你好！");
  }
};

let validator = {
  get(target, prop) {
    if (prop.startsWith('_')) {
      throw new Error(`属性名不合法：${prop}，不能以"_"开头`);
    }
    return target[prop];
  },
  set(target, key, value) {
    if (key.startsWith('_')) {
      throw new Error(`属性名不合法：${key}，不能以"_"开头`);
    }
    target[key] = value;
    return true;
  }
};

let personProxy = new Proxy(person, validator);

console.log(personProxy.name); // 输出：张三
console.log(personProxy.age); // 输出：18
console.log(personProxy._sayHello()); // 报错：属性名不合法：_sayHello，不能以"_"开头

示例说明二：计算属性

以下示例展示了如何利用 Proxy 拦截一个对象多个属性的访问请求，从而生成一个共同的计算属性 _sum，此计算属性就是除了 _sum 以外其他所有属性的求和。

let numberList = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};

let sumProxy = new Proxy(numberList, {
  get(target, property) {
    if(property === '_sum') {
      return Object.values(target).reduce((a, b) => a + b, 0);
    }
    return Reflect.get(target, property);
  }
});

console.log(sumProxy.a); // 输出：1
console.log(sumProxy.b); // 输出：2
console.log(sumProxy.c); // 输出：3
console.log(sumProxy.d); // 输出：4
console.log(sumProxy._sum); // 输出：10