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 自定义模板路径
JavaScript 私有方法和私有属性
WordPress 获取当前主题文件夹的路径
Nginx 通过日志统计访问数据
JavaScript 表单事件
选择排序
Node.js 的 URL 的模块缺陷
medium-zoom,一款 JavaScript 图片缩放库