探讨：JavaScript ECAMScript5 新特性之get/set访问器

探讨：JavaScript ECMA Script 5 新特性之 get/set 访问器

简介

ECMA-262 第五版（ECMA Script 5）是 JavaScript 编程语言的最新发布的标准，它包含了一些新的语法以及 ECMAScript 3 上的扩展。

其中一个新增的重要特性是 get 和 set 访问器，这两个方法提供了一种对象属性的访问方式，你可以通过这种方式读取或改变对象的属性值，同时还可以在属性访问前或访问后执行一些操作。

使用 get/set 方法

get 方法

get 方法通常用于获取一个对象属性的值。我们来看一个示例：

let person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName); // 输出 'John Doe'

在上面的代码中，我们定义了一个 person 对象，其中定义了一个 get 方法 fullName，通过调用 person.fullName 可以获取属性的值，这里返回的是 firstName 和 lastName 的组合。

set 方法

set 方法通常用于设置一个对象属性的值。我们来看一个示例：

let person = {
  firstName: 'John',
  lastName: 'Doe',
  set fullName(name) {
    let parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

person.fullName = 'Bob Smith';

console.log(person.firstName); // 输出 'Bob'
console.log(person.lastName); // 输出 'Smith'

在上面的代码中，我们定义了一个 person 对象，其中定义了一个 set 方法 fullName，通过调用 person.fullName = 'Bob Smith' 可以设置属性值，这里将 Bob 和 Smith 分别赋值给 firstName 和 lastName。

使用 get/set 方法的注意事项

• get 和 set 方法必须与属性同名，即它们作为属性的别名存在。
• 使用 get 和 set 方法时，对应的属性值需要在对象内部存储，不能使用同名的属性名来存储属性值。
• 在使用 set 方法时，传入的参数可以是任意类型，但必须对参数做出合理的处理。

示例

示例一：根据属性计算值

假设我们要计算一个圆的面积，根据数学公式，圆面积是半径的平方乘以 π。我们可以使用 get 方法来计算属性值：

let circle = {
  radius: 3,
  get area() {
    return Math.PI * this.radius * this.radius;
  }
};

console.log(circle.area); // 输出 28.27

在上面的代码中，我们定义了一个 circle 对象，并在对象内定义了一个 get 方法 area。通过计算圆的半径和公式，我们可以返回圆的面积。

示例二：验证设置的值

假设我们要为一个数字类型的属性设置限制，即只能设置 1 到 100 之间的整数。我们可以使用 set 方法来实现：

let goodNumber = {
  _value: 0,
  set value(val) {
    if (val >= 1 && val <= 100 && Number.isInteger(val)) {
      this._value = val;
    } else {
      console.log('请设置一个 1 到 100 之间的整数！');
    }
  },
  get value() {
    return this._value;
  }
};

goodNumber.value = 50;
console.log(goodNumber.value); // 输出 50

goodNumber.value = 150;
// 输出 '请设置一个 1 到 100 之间的整数！'

在上面的代码中，我们定义了一个 goodNumber 对象，并在对象内部使用 set 方法 value。在这里，我们判断了传入的值是否在 1 到 100 之间，并且是否为整数，如果符合要求，则将值保存在 _value 属性中，否则输出错误提示。通过调用 goodNumber.value，我们可以获取到设置的值。

总结

get 和 set 方法是 ECMAScript 5 中的重要特性，使用这两个方法能够更方便地读取和设置对象属性的值，并且还可以在属性访问前或访问后执行一些操作。如果你熟练掌握这个特性，将会使你的代码更加优雅和高效。