如何在类中定义的Proxy拦截器内获取类实例作用域

Proxy拦截函数的默认this指向handler配置对象，而非外层类实例，直接在set拦截器内调用this.__actions__自然无法访问实例上挂载的监听回调集合。另外原代码存在两个额外问题：

• 重复声明__data__类字段，第一次赋值的空对象会被直接覆盖，属于无效代码
• Proxy的set拦截器未返回布尔值，严格模式下执行赋值会抛出类型错误

把Proxy初始化逻辑挪到类构造函数中，通过闭包持有当前类实例的引用，即可绕开this指向问题直接访问实例属性，修复后完整代码如下：

class dataset {
  __actions__ = {};
  constructor() {
    // 闭包缓存当前实例引用，供Proxy拦截器调用
    const currentInstance = this;
    this.__data__ = new Proxy({}, {
      set(target, prop, value) {
        // 存在对应字段监听则触发回调，传入新值和旧值方便业务逻辑使用
        if (currentInstance.__actions__[prop]) {
          currentInstance.__actions__[prop](value, target[prop]);
        }
        target[prop] = value;
        // set拦截必须返回true标记赋值成功
        return true;
      },
      get(target, prop) {
        return target[prop];
      }
    });
  }
  setData(prop, val) {
    this.__data__[prop] = val;
  }
  getData(prop) {
    return this.__data__[prop];
  }
  watch(prop, action = () => {}) {
    this.__actions__[prop] = action;
  }
}

// 测试代码
const x = new dataset();
// 注册name字段监听
x.watch('name', (newVal, oldVal) => {
  console.log(`字段name更新，旧值：${oldVal}，新值：${newVal}`);
})
x.setData('name', 'satyam');
const y = x.getData('name');
console.log(y); // 输出 satyam

运行后可以看到赋值时监听回调正常触发，数据读写也符合预期。

内容的提问来源于stack exchange，提问作者Satyam Bharti