JavaScript getter和setter
JavaScript 教程
收录了这篇文章

在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可以通过getset关键字来定义:

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,你可以更加精细地控制属性的访问,实现数据验证等额外功能,增强代码的健壮性和可维护性。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
WordPress 添加自定义接口
HTML input range 数值范围选择器
JavaScript 类操作 classList
如何使用命令修改 MySQL 数据库名称
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
WordPress 插件路径相关
WordPress 文章页作者信息 get_the_author() 和 get_the_author_meta()
WordPress 添加定时任务