JavaScript getter和setter

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
github Support for password authentication was removed
Linux 中 top 命令的 Load Average 含义
MySQL 字符串截取函数 SUBSTRING_INDEX
WordPress 自定义文章类型
WordPress 侧边栏小工具
Light 主题
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF
CSS 滚动条样式修改