JavaScript 对象访问器属性

ECMAScript 5 (ES5 2009) 引入了 Getter 和 Setter 访问器属性，通过访问器属性可以使用属性的读写语法来实现执行方法的目的。

自此，JavaScript 对象存在两种类型的属性：数据属性和访问器属性。数据属性就是普通的对象的属性，通过键值对形式定义。访问器属性，通过 get 和 set 方法定义，但又具有普通属性的读写语法。

Getter 和 Setter 分别对应了一个 get 方法和 set 方法， get 方法用来执行读取属性操作，返回值既是访问器属性的值，set 方法实现为属性赋值的操作，必须有一个参数，没有返回值。

JavaScript Getter

Getter 就是 get 方法，用来执行读取属性操作，必有有一个返回值。

Getter 语法：

get property() {
  // some code
  return propertyValue;
}

使用对象的 Getter：

let x = obj.property;

当调用 obj.property 的时候，会执行对应的 get property() 方法，方法的返回值可以是我们经过计算后的值。

本示例使用一个 fullName 作为访问器属性，返回全名：

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

// 使用 firstName getter 获取值
document.getElementById("demo").innerHTML = person.fullName;

JavaScript Setter

Setter 就是 set 方法，对应属性赋值的操作，必有有一个参数。

Setter 语法：

set property(propertyValue) {
  // some code
}

使用对象的 Setter：

obj.property = x;

当调用 obj.property = x 的时候，会执行对应的 set property(x) 方法。

本示例使用一个 fullName 作为访问器属性，同时设置 firstName 和 lastName：

const person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  set fullName(fullName) {
    const names = fullName.split(" ");
    this.firstName = names[0];
    this.lastName = names[1];
  },
};

// 使用 setter:
person.fullName = "Tim James";

// 显示数据:
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;

方法 vs Getter？

看一下下面两个例子的区别。

示例 1

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

document.getElementById("demo").innerHTML = person.fullName();

示例 2

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

document.getElementById("demo").innerHTML = person.fullName;

示例 1 执行的是 fullName() 方法：person.fullName()。

示例 2 直接使用访问器属性 fullName：person.fullName。

访问器属性的语法更简单。

数据质量

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

在此示例中，使用 lang 属性以大写形式返回 language 属性的值：

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language.toUpperCase();
  },
};

document.getElementById("demo").innerHTML = person.lang;

在本例中，使用 lang 属性在 language 属性中存储大写的值：

const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  },
};

person.lang = "en";

document.getElementById("demo").innerHTML = person.language;

为什么要使用 Getter 和 Setter？

它提供了更简单的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
可以在读写的时候做很多额外的工作