Proxy 实例中触发 set 和 defineProperty 的各种情况

前端

2023-09-08 18:49:06

概览

Proxy 对象是一个用于创建一个对象的代理，该代理对象可以拦截某些操作，从而实现对这些操作的自定义处理。Proxy 对象的拦截器方法允许您拦截对对象属性的访问、设置和枚举，以及对对象方法的调用。

set 和 defineProperty 拦截器

set 拦截器和 defineProperty 拦截器都是 Proxy 对象的拦截器方法。set 拦截器用于拦截对对象属性的设置操作，而 defineProperty 拦截器用于拦截对对象属性的定义或修改操作。

触发情况

set 拦截器

当对对象属性进行赋值操作时，可能会触发 set 拦截器。赋值操作包括使用 object.propName 和 object[propName] 两种方式。

例如，以下代码将触发 set 拦截器：

const obj = new Proxy({}, {
  set: function(target, property, value, receiver) {
    console.log(`Setting property ${property} to ${value}`);
    return true;
  }
});

obj.propName = 'value';

当您运行这段代码时，您会看到以下输出：

Setting property propName to value

defineProperty 拦截器

当对对象属性进行定义或修改操作时，可能会触发 defineProperty 拦截器。定义或修改操作包括使用 Object.defineProperty() 方法和 Object.defineProperties() 方法。

例如，以下代码将触发 defineProperty 拦截器：

const obj = new Proxy({}, {
  defineProperty: function(target, property, descriptor) {
    console.log(`Defining property ${property}`);
    return true;
  }
});

Object.defineProperty(obj, 'propName', {
  value: 'value'
});