在JavaScript中，getter和setter是访问器属性的两种方法，用于对象属性的读取(get)和设置(set)。它们提供了一种更灵活的方式来控制对对象属性的访问，可以加入验证逻辑或者在获取和设置属性值时执行其他操作。

Getter

Getter是一个访问器属性，用于获取一个属性的值。它被定义为一个没有参数的方法，并且返回该属性的值。

let person = {
  _firstName: "John", // 使用下划线前缀表示这是一个"私有"属性

  get firstName() {
    return this._firstName;
  }
};

console.log(person.firstName); // 输出: John

Setter

Setter也是一个访问器属性，用于设置一个属性的值。它接受一个参数，并将该参数的值赋给相关的属性。可以在这里添加验证或其他逻辑。

person = {
  _firstName: "John",

  get firstName() {
    return this._firstName;
  },

  set firstName(value) {
    if (value.length < 3) {
      console.log("名字太短了，请输入至少3个字符的名字！");
    } else {
      this._firstName = value;
    }
  }
};

person.firstName = "A"; // 输出: 名字太短了，请输入至少3个字符的名字！
person.firstName = "Alex"; // 正确设置姓名
console.log(person.firstName); // 输出: Alex

使用class语法

在ES6的class语法中，getter和setter可以通过get和set关键字来定义：

class Person {
  constructor(firstName) {
    this._firstName = firstName;
  }

  get firstName() {
    return this._firstName;
  }

  set firstName(value) {
    if (value.length < 3) {
      console.log("名字太短了，请输入至少3个字符的名字！");
    } else {
      this._firstName = value;
    }
  }
}

let person = new Person("John");
console.log(person.firstName); // 输出: John
person.firstName = "A"; // 输出: 名字太短了，请输入至少3个字符的名字！
person.firstName = "Alex"; // 正确设置姓名
console.log(person.firstName); // 输出: Alex

通过getter和setter，你可以更加精细地控制属性的访问，实现数据验证等额外功能，增强代码的健壮性和可维护性。



真诚赞赏，手留余香

微信支付