简单的检索和分配getter和setter在javascript中有用吗?

在编译语言中,人们经常这样做。这是因为在这些语言中,分配给字段和调用setter可能与程序员相同,但它们编译成两个完全不同的操作。

例如,如果我想为在C类中设置字段添加一个副作用,而该字段是直接设置的,而不是通过setter设置的?将其更改为setter将导致一些问题。我不必重写任何消费代码,但是我 将 必须重新编译所有文件。当然,如果您的公开发布被编译,这是一个巨大的问题。

不过,JavaScript不需要考虑这些因素,因此过早地将所有内容变成getter/setter有点傻。如果你看到有人这样做,你很可能是在和一个从另一种语言学习该约定并将其转化为JavaScript的人打交道,而没有考虑太多 为什么。

以您描述的方式使用访问器属性(设置和检索“background”数据属性)实际上在语义上与直接使用数据属性完全相同。有一些区别:访问器属性将存在于实例的原型上,而不是直接存在于实例上(尽管实例将具有“background”数据属性),但这不会真正影响任何内容,除非您对类实例进行高级自省。

唯一的优点是,如果您想在将来引入更复杂的访问器行为,那么修改代码就容易了。如果您放弃了添加访问器行为的需要,那么可以使用此模式来节省将来的时间。

属性访问器可用于提供副作用或更改原始行为:

class Thing {
  get myProp() {
    console.log('myProp was read');
    return this._myProp;
  }
  set myProp(value) {
    if (!value)
      throw new Error('myProp cannot be falsy');
    this._myProp = value;
  }
}

没有意义 myProp getter/setter纯抽象:

class Thing {
  get myProp() {
    return this._myProp;
  }
  set myProp(value) {
    this._myProp = value;
  }
}

如果我实例化,我仍然可以操纵backing属性 (u myprop)直接,

如果你正在寻找的是私有国家,你仍然可以使用弱地图。

(function(scope) {
  "use strict";
  const prop = new WeakMap();

  scope.Foo = class {
    constructor() {
      prop.set(this, {});
      Object.seal(this);
    }
    get bar() {
      return prop.get(this)._bar;
    }
    set bar(value) {
      return prop.get(this)._bar = value;
    }
  }


}(this))

const f = new Foo;

f.bar = "bar";
f._bar = "_bar";
console.log(f.bar);
console.log(f._bar);

get和setter在实现MVC时也很有用,您可以在属性更改时触发事件。

(function(scope) {
  "use strict";
  const prop = new WeakMap();

  scope.Foo = class {
    constructor() {
      prop.set(this, {});
      prop.get(this)._target = new EventTarget
      Object.seal(this);
    }
    get bar() {
      return prop.get(this)._bar;
    }
    set bar(value) {
      prop.get(this)._bar = value;
      prop.get(this)._target.dispatchEvent(new CustomEvent('change', {
        detail: value
      }));
    }
    addEventListener(event, listener) {
      prop.get(this)._target.addEventListener(event, listener)
    }
  }


}(this))

const f = new Foo;
f.addEventListener('change', function(event) {
  console.log("changed!", event.detail);
});
f.bar = "bar";