为类动态设置 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 中不存在。