对象访问器属性 - getter与setter

1. 对象中的两种属性

JavaScript 中其实有两种属性：

• 第一种是数据属性。我们已经知道如何使用它们了。到目前为止，我们使用过的所有属性都是数据属性。
• 第二种类型的属性是 访问器属性（accessor properties）。它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。

心得：getter与setter其实上就是在对象数据属性的基础上，针对往对象中定义属性以及修改属性的动作的预处理。

2. getter

getter 取值器，先看一个例子：

    let stark = {
        firstName: 'Ayra',
        lastName: 'Strak',
        get fullName() {
            return `${this.firstName} ${this.lastName}`;
        }
    }

给fullName这个属性绑定取值器属性，之后读取次值都将先经过getter存值器，打印这个对象

• 写法：get关键字后为一个函数，函数名为取值器名。如上，取值器名为fullName
• 取值：使用调用数据属性的方法来取getter中的属性值。如：strak.fullName
• 内部机制：
  • 形式上给对象添加了一个键名为取值器名fullName，键值为return出来的值。如上图标注的fullName。
  • 实际上在取值操作时，如：strak.fullName，内部是执行的取值器函数，get firstName而不是读取形式属性，如上图标注的灰暗部分。

3. setter 存值器

setter存值器，先看一个例子：

    let stark = {
        firstName: 'Jon',
        lastName: 'Snow',
        get fullName() {
            return `${this.firstName} ${this.lastName}`;
        },
        set fullName(nameArr) {
            [this.firstName, this.lastName] = nameArr.split(' ');
        }
    }

给fullName绑定了setter存值器属性，之后修改此属性的值都将先经过setter存值器。

• 写法：set关键字后为一个函数，参数接收外部实参，函数体内为代码段。
• 赋值：与修改数据属性一致，直接赋值修改其值，如：stark.fullName = 'Ayra Stark';

如上：

• 首先给fullName绑定了setter存值器属性，而fullName属性来自getter存值器。原值为getter存值器返回的值。
• 执行stark.fullName = 'Ayra Stark';，赋值操作，setter被触发，形参接收被赋的值，执行内部代码逻辑，这里的代码逻辑为修改了firstName与lastName的值。

不用拘泥于存值就必须要修改，函数毕竟是函数，当然可以在函数内部触发一些其他的逻辑，比较打印等等。 getter也一样，但是getter返回值必是该存值器对应属性的值。