编程 JavaScript中设置器和获取器

2024-11-17 19:54:27 +0800 CST views 953

在JavaScript中,settersgetters 是对象属性的特殊方法,用于定义如何访问和设置对象的属性。这些方法使得我们可以在对对象属性执行读取或写入操作时,添加自定义逻辑。

举例

首先我们定义一个类似银行账户的对象,通过gettersetter访问属性:

const account = {
  owner: 'ITshare',
  movements: [100, 1200, 550, 130],

  get latest() {
    return this.movements.slice(-1).pop();
  },

  set latest(mov) {
    this.movements.push(mov);
  },
};

console.log(account.latest); // 输出最后一笔交易:130
account.latest = 50; // 添加新的交易
console.log(account.movements); // 输出所有交易:[100, 1200, 550, 130, 50]

在这个例子中,latest 是一个获取器(getter),它获取交易列表的最后一项。我们还使用了设置器(setter)来向交易列表中添加新交易。

实例

我们可以在类中使用gettersetter,比如在之前的构造函数中应用这些属性:

class PersonCl {
  constructor(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
  }

  calcAge() {
    console.log(2037 - this.birthYear);
  }

  greet() {
    console.log(`Hey ${this.firstName}`);
  }

  get age() {
    return 2037 - this.birthYear;
  }
}

const ITshare = new PersonCl('ITshare', 1998);
console.log(ITshare); // 输出 ITshare 对象
ITshare.calcAge(); // 计算并输出年龄
console.log(ITshare.age); // 使用getter获取年龄
console.log(ITshare.__proto__ === PersonCl.prototype); // 验证原型链

在这个例子中,我们为 PersonCl 类添加了一个 get 方法 age,它根据出生年份计算当前年龄。通过 getter 方法可以像访问普通属性一样使用 age,而不需要像函数那样调用。

Setter 进行数据验证

setter 方法不仅可以设置属性,还可以进行数据验证。如下所示,我们可以在 PersonCl 类中验证传入的名字是否为全名:

class PersonCl {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }

  calcAge() {
    console.log(2037 - this.birthYear);
  }

  greet() {
    console.log(`Hey ${this.fullName}`);
  }

  get age() {
    return 2037 - this.birthYear;
  }

  set fullName(name) {
    if (name.includes(' ')) {
      this._fullName = name;
    } else {
      alert('!!!请输入你的全名');
    }
  }

  get fullName() {
    return this._fullName;
  }
}

const ITshare = new PersonCl('ITshare', 1998);
console.log(ITshare); // 输出用户信息,如果名字不包含空格则弹出警告

在这个例子中,我们使用了 set fullName 进行数据验证,确保输入的姓名包含空格,否则弹出提示框提醒用户输入全名。通过这种方式,setter 方法可以在设置属性时进行逻辑验证。


以上就是在 JavaScript 中使用 gettersetter 的简单介绍,它们可以使对象属性的访问和修改更加灵活,甚至可以在属性的读写中引入复杂的业务逻辑或数据验证。

复制全文 生成海报 编程 JavaScript 面向对象编程

推荐文章

从Go开发者的视角看Rust
2024-11-18 11:49:49 +0800 CST
JavaScript 流程控制
2024-11-19 05:14:38 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
php机器学习神经网络库
2024-11-19 09:03:47 +0800 CST
介绍Vue3的Tree Shaking是什么?
2024-11-18 20:37:41 +0800 CST
介绍 Vue 3 中的新的 `emits` 选项
2024-11-17 04:45:50 +0800 CST
Python 基于 SSE 实现流式模式
2025-02-16 17:21:01 +0800 CST
php使用文件锁解决少量并发问题
2024-11-17 05:07:57 +0800 CST
防止 macOS 生成 .DS_Store 文件
2024-11-19 07:39:27 +0800 CST
PHP如何进行MySQL数据备份?
2024-11-18 20:40:25 +0800 CST
Vue 3 路由守卫详解与实战
2024-11-17 04:39:17 +0800 CST
前端如何优化资源加载
2024-11-18 13:35:45 +0800 CST
js函数常见的写法以及调用方法
2024-11-19 08:55:17 +0800 CST
php 统一接受回调的方案
2024-11-19 03:21:07 +0800 CST
mysql int bigint 自增索引范围
2024-11-18 07:29:12 +0800 CST
用 Rust 玩转 Google Sheets API
2024-11-19 02:36:20 +0800 CST
如何在 Vue 3 中使用 Vuex 4?
2024-11-17 04:57:52 +0800 CST
CSS Grid 和 Flexbox 的主要区别
2024-11-18 23:09:50 +0800 CST
Vue3中的自定义指令有哪些变化?
2024-11-18 07:48:06 +0800 CST
Vue3中的Slots有哪些变化?
2024-11-18 16:34:49 +0800 CST
为什么要放弃UUID作为MySQL主键?
2024-11-18 23:33:07 +0800 CST
Go 语言实现 API 限流的最佳实践
2024-11-19 01:51:21 +0800 CST
程序员茄子在线接单