为什么这两个示例中 getter 的工作方式不同？

Question

为什么当我们有这个

function Car() {
  const fuel = 50
  return {
    fuel,
  }
}

const car = Car()
console.log(car.fuel) // 50
car.fuel = 3000
console.log(car.fuel) // 3000

如果我们添加一个吸气剂，则燃料属性无法被静音：

function Car() {
  const fuel = 50
  return {
    get fuel() {
      return fuel
    },
  }
}

const car = Car()
car.fuel = 3000
console.log(car.fuel) // 50

但是，如果我在一个孤立的对象上尝试它，它不会以同样的方式工作：

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fname() {
    return this._firstName;
  }
}
 
console.log(person.fname); // prints 'John'
person._firstName = 'Juan';
console.log(person.fname); //prints 'Juan'

背景：我试图弄清楚为什么设置器存在，但我无法理解它的有用性。我明白为什么二传手有一席之地。所以我发现这个代码片段解释了优点之一是保持属性免受更改。参考这里。

Answer 1

当你在做的时候

function Car() {
  const fuel = 50
  return {
    fuel,
  }
}

const car = Car()

Car()只是返回{ fuel: 50 }一个普通的对象。

因此，当您设置时car.fuel = 3000，它就会更改为{ fuel: 3000 }。

我们来看第二种情况。

function Car() {
  const fuel = 50
  return {
    get fuel() {
      return fuel
    },
  }
}

const car = Car()

fuel为了清楚起见，让我重命名fuel()：

function Car() {
  const a = 50
  return {
    get b() {
      return a
    },
  }
}

const car = Car()

在这里，当你这样做时car = Car()，你可以将其理解为car = { get b(): {return a} }。当您定义这样的 getter 函数时，您无法更改它。

所以当你这样做时car.b = 3000，JS 会说“哦，你试图改变 的值b，但那是一个 getter 函数，你不能改变它。” JS 就是 JS，但它不会抛出错误。

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fname() {
    return this._firstName;
  }
}
 
console.log(person.fname); // prints 'John'
person._firstName = 'Juan';
console.log(person.fname); //prints 'Juan'

这是不言而喻的，person._firstName与对象中的任何其他属性一样简单，因此您可以根据需要更改它。但是，与第二种情况类似，如果您尝试这样做：

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fname() {
    return this._firstName;
  }
}
 
console.log(person.fname); // prints 'John'
person.fname = 'Juan';
console.log(person.fname); //prints 'John'

它不会改变fname。