ES6 代理

proxy 代理对象

例如实现在更改对象元素的时候实现实时显示。proxy 是类。

语法

const proxy = new Proxy(target, handler);

• target：要使用 Proxy 包装的目标对象。
• handler：一个包含陷阱函数的对象，用于定义对目标对象的操作进行拦截时的行为。

示例

new Proxy(obj, {
  get(target, prop, receiver) {
    // 这里是 get 陷阱方法的逻辑
  },
  set() {
    // 这里是 set 陷阱方法的逻辑
  }
});

陷阱方法参数说明

get 方法

• target：目标对象，即被代理的对象。
• prop：要获取的属性名。
• receiver：代理对象或者继承代理对象的对象，一般用于确定 this 的指向。

set 方法

• target：目标对象。
• prop：要设置的属性名。
• value：要设置的属性值。
• receiver：代理对象或者继承代理对象的对象，通常用于在设置属性时确定 this 的指向。

实现实时更新示例

const p1 = new Proxy(obj, {
  get(target, property) {
    return obj[property];
  },
  set(target, property, value) {
    obj[property] = value;
    container.textContent = obj.name;
  }
});

通过代理中的 set 方法中的 container.textContent = obj.name 语句实现了，在更改对象的 name 后对应浏览器容器内内容实时的更新显示。