代码之家 › 专栏 › 技术社区 › Jack

动态设置类的getter和setter

javascript

Jack · 技术社区 · 4 年前

class Class {
  //Nothing
}

let storageClass = new Class();

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

document.write(storageClass.value);

但我需要跟踪所有属性的更改,以便使用 get set ,但我不能仅基于 storageClass['value'] = 'Hello World'; 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);

2 回复 | 直到 4 年前

Unmitigated 4 年前

你可以使用 Proxy 处理动态的get和set操作。

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);

David P. Caldwell 4 年前

您可以创建 get/set 对于使用ES6的所有属性 Proxy get ,当属性)。

看到了吗 Mozilla's documentation

请注意,作为ES6的一个功能,它具有广泛的浏览器支持,但不是通用的(例如,在internetexplorer中不起作用),并且不能进行多填充,因为它使用的功能在旧版本的JavaScript中不存在。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前