【问题标题】:Why use getters and setters in JavaScript?为什么在 JavaScript 中使用 getter 和 setter?
【发布时间】:2017-07-09 14:49:45
【问题描述】:

我知道 getter 和 setter 在 JavaScript 中是如何工作的。我不明白的是,当我们可以使用普通函数获得相同的结果时,为什么我们需要它们?考虑以下代码:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

console.log(person.fullName);    // Jimmy Smith

我们可以很容易地用函数替换getter:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    fullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
}

console.log(person.fullName());    // Jimmy Smith

我看不出写 getter 和 setter 的意义。

【问题讨论】:

  • 我认为这只是一个“风格”问题,因为你“不需要”使用它们,如果你愿意,你“可以”使用它们
  • 检查thisthis
  • 可以说它可以使代码更具可读性:foo.status = 'inactive' vs. foo.setStatus('inactive')...
  • 这不是一个基于意见的问题。它是完全有效的,并且与私有变量的可访问性有关。我正要提供一个完全有效的答案。
  • @Inkdot 问题是为什么要用.foo而不是.getFoo()/.setFoo();它们都实现了相同的 WRT 封装。

标签: javascript getter-setter


【解决方案1】:

使用 getter 或 setter 与使用标准函数的区别在于 getter/setter 会在赋值时自动调用。所以它看起来就像一个普通的属性,但在幕后你可以在赋值之前或之后运行额外的逻辑(或检查)。

因此,如果您决定将这种额外的逻辑添加到已被引用的现有对象属性之一,您可以将其转换为 getter/setter 样式,而无需更改有权访问该属性的其余代码。

编辑:这是一个额外逻辑的例子,这个类计算它的名字被读取了多少次:

class MyClass {
  constructor() {
    this.refCount = 0;
    this._name = 'the class';
  }

  get name() {
    this.refCount++;
    console.log(`name is read ${this.refCount} times.`);
    return this._name;
  }
}

const myClass = new MyClass();

let maxMessages = 5;
const t = setInterval(() => {
  console.log(`name: ${myClass.name}`);
  
  if (--maxMessages < 1) {
    console.log('done');
    clearInterval(t);
  }
}, 1000);

【讨论】:

  • 问题是为什么foo.bar = baz 使用setter 比foo.setBar(baz) 更好...
  • 无论如何,这个问题与您所理解的略有不同,添加了第二段以阐明好处。
  • 假设您从一开始就设计一个界面以使用 getter/setter 而不是对其进行改造……那么您的答案是什么?
  • 不,它没有。我是说我今天要写一个新对象,它还没有任何引用,我选择写get foo()/set foo() 而不是getFoo()/setFoo()……我为什么要写?跨度>
  • 您不能将 myObj.foo = 'some data' 之类的赋值与 getFoo、setFoo 一起使用。您总是需要调用这些函数。而且如果你稍后改变主意,比如添加额外的逻辑,你需要将所有引用转换为函数调用。
猜你喜欢
  • 2014-02-23
  • 1970-01-01
  • 2023-03-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多