浅析JavaScript中的Proxy对象

什么是Proxy对象

Proxy是ES6中新增的一个特性，用于拦截并可自定义处理对象的各种读写操作。Proxy是一个代理对象，它包装了原始对象，对原始对象进行拦截，从而使得原始对象的行为可以由代理对象来控制和修改。

Proxy对象的作用

Proxy对象主要有以下两个作用：

• 拦截并处理对象的读取和赋值操作：通过Proxy对象可以拦截并处理对对象的各种读取和赋值操作，可以做一些额外的处理，比如对某些敏感数据进行加密/解密操作等。
• 扩展对象的默认行为：通过Proxy对象可以扩展对象的默认行为，例如在读取对象中不存在的属性时，可以返回一个默认值。

Proxy对象的语法

Proxy对象的语法比较简单，它本质上是一个对象，使用时需要通过Proxy(target, handler)创建。其中，target是需要拦截的对象，handler是一个对象，用于定义拦截target的各种操作。

const proxyObj = new Proxy(target, handler);

Proxy对象的常用拦截操作

get

get用于拦截对对象属性的读取操作，该方法接收两个参数：target目标对象，property目标属性。

let target = { message: "Hello world" };
let proxy = new Proxy(target, {
  get(target, property) {
    console.log(`获取${property}属性`);
    return target[property];
  },
});

console.log(proxy.message); // 输出"获取message属性"，"Hello world"

set

set用于拦截对对象属性的赋值操作，该方法接收三个参数：target目标对象，property目标属性，value需要赋值的值。

let target = { message: "Hello world" };
let proxy = new Proxy(target, {
  set(target, property, value) {
    console.log(`设置${property}属性值为${value}`);
    target[property] = value;
    return true;
  },
});

proxy.message = "Hello Mr. Zhang"; // 输出"设置message属性值为Hello Mr. Zhang"
console.log(proxy.message); // 输出"Hello Mr. Zhang"

has

has用于拦截in操作符，该方法接收两个参数：target目标对象，property需要查询的属性名。

let target = { message: "Hello world" };
let proxy = new Proxy(target, {
  has(target, property) {
    console.log(`查询${property}属性是否存在`);
    return property in target;
  },
});

console.log("message" in proxy); // 输出"查询message属性是否存在"，true

示例说明

示例1：Proxy对象用于对象属性的加密/解密

const data = { name: "张三", age: "18" };
const encrypt = (dataObj) =>
  new Proxy(dataObj, {
    get(target, property) {
      let value = target[property];
      if (typeof value === "string") {
        value = value.split("").reverse().join("");
      }
      return value;
    },
    set(target, property, value) {
      if (typeof value === "string") {
        value = value.split("").reverse().join("");
      }
      target[property] = value;
      return true;
    },
  });

const encryptedData = encrypt(data);
console.log(encryptedData.name); // 输出"三张"

在上述示例中，我们定义了一个Proxy对象，该对象用于对data对象属性进行加密/解密操作。在get/set方法中，如果查询的属性是字符串类型，则进行反转字符串操作，即实现了加密/解密操作。最后，我们将data对象通过encrypt方法进行加密，因此在查询encryptedData的属性时，会自动进行解密操作。

示例2：Proxy对象用于实现对象默认属性

const data = { name: "张三" };
const extendDefaultData = (dataObj, defaultData) =>
  new Proxy(dataObj, {
    get(target, property) {
      return target[property] || defaultData[property];
    },
  });

const defaultData = { name: "李四", age: 18 };
const extendedData = extendDefaultData(data, defaultData);
console.log(extendedData.age); // 输出18

在上述示例中，我们定义了一个Proxy对象，用于在对象属性不存在时返回默认值。在get方法中，如果查询的属性不存在，则返回对应的defaultData属性值，因此我们可以通过extendedData对象直接访问defaultData的属性值