javascript - get 和 set 在 javascript 背后的想法是什么？

Question

大家好，我目前正在学习如何在 javascript 中获取和设置 woks。具体说说对象atm。

let person = {
  _name: 'Lu Xun',
  _age: 137,
  
  set age(ageIn) {
    if (typeof ageIn === 'number') {
      this._age = ageIn;
    }
    else {
      console.log('Invalid input');
      return 'Invalid input';
    }
  },
  
  get age() {
    console.log(`${this._name} is ${this._age} years old.`);
    return this._age;
  }

};


person.age = 'Thirty-nine';
person.age = 39;

console.log(person.age);

例如在这段代码中。为什么我需要一个 set 或 get，为什么我不能像这样访问它:person.age = 59;？意思是为什么我不能直接通过我的代码示例？我无法理解这个概念和它的必要性？有人可以向我彻底解释一下吗？有人可以给我一个易于理解的例子和解释吗？

Answer 1

对象有属性和方法。属性是描述对象所处状态的一种方式，方法是改变该状态并让对象“表现”的方式:

 class Person {
   constructor(name){
      this.name = name; //name is a property
   }
   //And here weve got a method:
   sayHi(){
      alert(`Hi, im ${this.name}!`);
   }
 }

然而，虽然在大多数情况下，将“状态”和“行为”(也称为属性和方法)分开非常清楚，但有时却并非如此。让我们想象一下这个人有一个标签标志方法:

 showLabel(){
   document.body.innerHTML = this.name;
 }

现在我们更改人名，例如:

 const person = new Person("Jake");
 person.showLabel();
 person.name = "Jack";

但是，标签不会更新 :/，所以当我们将 Jake 重命名为 Jack 时，他的标签仍然显示 Jake。那很糟。为此，发明了 getter 和 setter。这些方法的主要目的是获取和设置属性(惊喜 ;))，但它们也可以防止像上面那样的故障，并且它们有很多优点，这就是为什么 they are used excessively in other languages . Person 的样本 setter 是:

 setName(name){
   //Set
   this.name = name;
   //Prevent glitches
   this.showLabel();
 }

因此，我们现在调用 setter person.setName("Jack")，而不是直接设置 person.name。但是，现在我们在属性和不应设置而应使用 setter 的属性之间存在不一致。为了解决这种不一致，js引入了get和set。在内部它表现得像方法，在外部它看起来仍然像一个简单的属性:

 get name(){ return this._name }
 set name(value){
  this._name = value;
  this.showLabel();
 }

可用作:

 const person = new Person("Jake");
 person.showLabel();
 person.name = "Jack"; //let the magic happen ;)

TLDR:get 和 set 基本上是属性和方法的混合，以结合两者的优点并保持一致性。