对象属性有两种。
第一种是数据属性。我们已经知道如何使用它们了。我们迄今为止使用的所有属性都是数据属性。
第二种类型的属性是新东西。它是访问器属性。它们本质上是在获取和设置值时执行的函数，但对于外部代码来说看起来像常规属性。
getter 和 setter
访问器属性由“getter”和“setter”方法表示。在对象字面量中，它们表示为 get 和 set
let obj = {
get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};当读取 obj.propName 时，getter 起作用，当给其赋值时，setter 起作用。
例如，我们有一个具有 name 和 surname 的 user 对象
let user = {
name: "John",
surname: "Smith"
};现在，我们希望添加一个 fullName 属性，它应该是 "John Smith"。当然，我们不想复制粘贴现有信息，因此我们可以将其实现为访问器
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
}
};
alert(user.fullName); // John Smith从外部看，访问器属性看起来像一个常规属性。这就是访问器属性的思想。我们不将 user.fullName 调用为一个函数，而是正常地读取它：getter 在幕后运行。
截至目前，fullName 仅有一个 getter。如果我们尝试赋值 user.fullName=，将会出现一个错误
let user = {
get fullName() {
return `...`;
}
};
user.fullName = "Test"; // Error (property has only a getter)让我们通过为 user.fullName 添加一个 setter 来修复它
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
},
set fullName(value) {
[this.name, this.surname] = value.split(" ");
}
};
// set fullName is executed with the given value.
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper结果，我们得到一个“虚拟”属性 fullName。它可读可写。
访问器描述符
访问器属性的描述符不同于数据属性的描述符。
对于访问器属性，没有 value 或 writable，但有 get 和 set 函数。
也就是说，访问器描述符可能具有
get– 一个没有参数的函数，在读取属性时起作用，set– 一个带有一个参数的函数，在设置属性时调用，enumerable– 与数据属性相同，configurable– 与数据属性相同。
例如，要使用 defineProperty 创建一个访问器 fullName，我们可以传递一个带有 get 和 set 的描述符
let user = {
name: "John",
surname: "Smith"
};
Object.defineProperty(user, 'fullName', {
get() {
return `${this.name} ${this.surname}`;
},
set(value) {
[this.name, this.surname] = value.split(" ");
}
});
alert(user.fullName); // John Smith
for(let key in user) alert(key); // name, surname请注意，一个属性可以是访问器（具有 get/set 方法）或数据属性（具有 value），不能同时是两者。
如果我们尝试在同一个描述符中同时提供 get 和 value，将会出现一个错误
// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
get() {
return 1
},
value: 2
});更智能的 getter/setter
Getter/setter 可以用作“真实”属性值上的包装器，以获得对它们的操作的更多控制。
例如，如果我们希望禁止 user 的名称太短，我们可以有一个 setter name 并将值保存在一个单独的属性 _name 中
let user = {
get name() {
return this._name;
},
set name(value) {
if (value.length < 4) {
alert("Name is too short, need at least 4 characters");
return;
}
this._name = value;
}
};
user.name = "Pete";
alert(user.name); // Pete
user.name = ""; // Name is too short...因此，名称存储在 _name 属性中，并且通过 getter 和 setter 进行访问。
从技术上讲，外部代码可以通过使用 user._name 直接访问名称。但有一个广为人知的惯例，即以下划线 "_" 开头的属性是内部属性，不应从对象外部进行访问。
用于兼容性
访问器的一个重要用途是，它们允许通过用 getter 和 setter 替换“常规”数据属性并调整其行为，随时控制该属性。
设想我们开始使用数据属性name和age实现用户对象
function User(name, age) {
this.name = name;
this.age = age;
}
let john = new User("John", 25);
alert( john.age ); // 25…但迟早，事情可能会发生变化。我们可能决定存储birthday而不是age，因为它更精确、更方便
function User(name, birthday) {
this.name = name;
this.birthday = birthday;
}
let john = new User("John", new Date(1992, 6, 1));现在，如何处理仍然使用age属性的旧代码？
我们可以尝试找到所有这些地方并修复它们，但这需要时间，并且如果该代码被许多其他人使用，则可能很难做到。此外，age是user中一个不错的东西，对吧？
让我们保留它。
为age添加一个 getter 可以解决这个问题
function User(name, birthday) {
this.name = name;
this.birthday = birthday;
// age is calculated from the current date and birthday
Object.defineProperty(this, "age", {
get() {
let todayYear = new Date().getFullYear();
return todayYear - this.birthday.getFullYear();
}
});
}
let john = new User("John", new Date(1992, 6, 1));
alert( john.birthday ); // birthday is available
alert( john.age ); // ...as well as the age现在，旧代码也能正常工作，我们还获得了一个不错的附加属性。
评论
<code>标记，对于多行 - 将它们包装在<pre>标记中，对于 10 行以上 - 使用沙箱（plnkr，jsbin，codepen…）