为类动态设置 getter 和 setter

Question

我可以在创建类之后从字符串值外部设置类的属性，如下所示

class Class {

  //Nothing

}

let storageClass = new Class();

storageClass['value'] = 'Hello World';

document.write(storageClass.value);

但我需要跟踪所有属性的更改，以便我可以使用get和set，但我无法仅基于 添加新属性storageClass['value'] = 'Hello World';。例如，如果我想做的话，我必须添加 get 和 set 函数storageClass['valueNumberTwo'] = 'A Second Value';

class Class {

  get value() {

    return this._value;

  }

  

  set value(value) {

    this._value = value;

    console.log('Value Changed');

  }

}

let storageClass = new Class();

storageClass['value'] = 'Hello World';

document.write(storageClass.value);

如果我知道创建类时可以创建的所有属性，是否有办法仍然可以做到这一点？

Answer 1

您可以使用 aProxy来处理动态获取和设置操作。class Class {  constructor() {    return new Proxy(this, {      get(target, prop, receiver) {        return target['_' + prop];      },      set(obj, prop, value) {        obj['_' + prop] = value;        console.log('value changed');      }    });  }}let storageClass = new Class;storageClass['value'] = 'Hello World';document.write(storageClass.value);

Answer 2

get/set您可以使用 ES6 构造为所有属性创建Proxy，它允许您为对象实现低级方法（例如get，在访问任何属性时调用该方法）。请注意，作为一项 ES6 功能，它具有广泛但不通用的浏览器支持（例如，在 Internet Explorer 中不起作用），并且无法进行多填充，因为它使用的功能在旧版本的 JavaScript 中不存在。