getter和setter定义
- 定义的方法
  - 对象初始化器
  - Object.defineProperties
- 两种方式的选择
访问器描述符
使用场景
- 更聪明的 getter/setter
- 兼容性

一、有两种类型的对象属性。
1、第一种是数据属性。到目前为止，我们使用过的所有属性都是数据属性。
2、第二种类型的属性是访问器属性（accessor properties）。它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。
二、访问器属性由 “getter” 和 “setter” 方法表示。
1、一个getter是一个获取某个特定属性的值的方法。
2、一个setter是一设定某个属性的值的方法。

getter和setter定义

定义的方法

一、getter和setter有2种方法可以定义：
1、可以使用对象初始化器
2、也可以之后使用Object.defineProperties添加getter、setter方法，使用getter和setter添加方法添加到任何对象

对象初始化器

一、当使用对象初始化器的方式定义getter和setter时，只需要在getter方法前加get（无需参数），在setter方法前加set（接受一个参数，设置为新值）。

let obj = {
  get propName() { // 对象字面量语法
    // 当读取 obj.propName 时，getter 起作用
  },
  set propName(value) {
    // 当执行 obj.propName = value（赋值） 操作时，setter 起作用
  }
};

二、【示例1】我们有一个具有name和surname属性的对象user：

let user = {
  name: "John",
  surname: "Smith"
};

1、现在我们想添加一个fullName属性，该属性值应该为”John Smith”。当然，我们不想复制粘贴已有的信息，因此我们可以使用访问器来实现：

let user = {
  name: "John",
  surname: "Smith",
  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};
alert(user.fullName); // John Smith

2、从外表看，访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式调用user.fullName，我们正常读取它：getter 在幕后运行。
3、截至目前，fullName只有一个 getter。如果我们尝试赋值操作user.fullName=，将会出现错误：

let user = {
  get fullName() {
    return `...`;
  }
};
user.fullName = "Test"; // Error（属性只有一个 getter）

4、让我们通过为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 将以给定值执行
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper

5、现在，我们就有一个“虚拟”属性。它是可读且可写的。
三、【示例2】下面例子描述了getters 和 setters 是如何为用户定义的对象 o 工作的

var o = { // o对象的属性如下
    a: 7, // 数字
    get b () { // 返回o.a + 1的getter
      return this.a + 1
  },
  set c(x) { // 由o.c的值所设置o.a值的setter
      this.a = x / 2
  }
}
console.log(o.a) // 7
console.log(o.b) // 8
o.c = 50
console.log(o.a) // 25

Object.defineProperties

一、使用Object.defineProperties的方法，同样也可以对一个已创建的对象在任何时候为其添加getter或setter方法。
1、参数

第一个参数是你想定义getter或setter方法的对象
第二个参数是一个对象，这个对象的属性名用作getter或setter的名字，属性名对应的属性值用作定义getter或setter方法的函数。

【示例1】下面例子定义了和前面例子一样的getter和setter方法

var o = {
    a: 0
}
Object.defineProperties(o, {
    "b": {
      get: function () {
        return this.a + 1
    }
  },
  "c": {
      "set": function (x) {
        this.a = x / 2
    }
  }
})
o.c = 10 // 运行setter，10 / 2 = 5赋值给a属性
console.log(o.b) // 运行getter，打印出6

两种方式的选择

一、对象初始化器
1、当你定义一个原型准备进行初始化时，可以选择第一种方式。
（1）这种方式更简洁、自然。
2、在一个对象字面量语法中定义getter和setter使用”[gs]et property()”的方式（相比较于define[GS]etter)时，并不是获取和设置某个属性自身，容易让人误以为是”[gs]et propertyName(){ }”这样错误的使用方法。
二、Object.defineProperty
1、当你因为没有编写原型或者特定的对象时，需要添加getter和setter方法，使用第二种方式更好。
（1）第二种方式更能表现JavaScript语法的动态特性，但也会使代码变得难以阅读和理解。
三、定义一个getter或setter函数使用语法”[gs]et property()”，定义一个已经声明的函数作为的getter和setter方法，使用Object.defineProperty(或者 Object.prototype.defineGetter 旧语法回退)
1、【示例1】使用getter和setter方法扩展Date原型，为预定一号的Date类添加一个year的属性

var d = Date.prototype
Object.defineProperty(d, 'year', {
    get: function () {
      return this.getFullYear() // getFullYear()是Date类中已存在的
  },
  set: function (y) {
      this.setFullYear(y) // setFullYear()是Date类中已存在的
  }
})

（1）通过Date对象使用getter和setter

var now = new Date()
console.log(now.year) // 2000
now.year = 2001
console.log(now) // Wed Apr 18 11:13:25 GMT-0700(Pacific Daylight Time) 2001

访问器描述符

一、访问器属性的描述符与数据属性的不同。
二、对于访问器属性，没有value和writable，但是有get和set函数。
三、所以访问器描述符可能有：

get—— 一个没有参数的函数，在读取属性时工作，
set—— 带有一个参数的函数，当属性被设置时调用，
enumerable—— 与数据属性的相同，
configurable—— 与数据属性的相同。

【示例1】要使用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 可以用作“真实”属性值的包装器，以便对它们进行更多的控制。
【示例1】如果我们想禁止太短的user的 name，我们可以创建一个 settername，并将值存储在一个单独的属性_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 太短了……

1、所以，name 被存储在name属性中，并通过 getter 和 setter 进行访问。
2、从技术上讲，外部代码可以使用user._name直接访问 name。但是，这儿有一个众所周知的约定，即以下划线”“开头的属性是内部属性，不应该从对象外部进行访问。

兼容性

一、访问器的一大用途是，它们允许随时通过使用 getter 和 setter 替换“正常的”数据属性，来控制和调整这些属性的行为。
1、可以为预定义的或用户定义的对象定义getter和setter以支持新增的属性。
二、【示例1】我们开始使用数据属性name和age来实现 user 对象：

function User(name, age) {
  this.name = name;
  this.age = age;
}
let john = new User("John", 25);
alert( john.age ); // 25

1、但情况可能会发生变化。我们可能会决定存储birthday，而不是age，因为它更精确，更方便：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}
let john = new User("John", new Date(1992, 6, 1));

2、现在应该如何处理仍使用age属性的旧代码呢？
3、我们可以尝试找到所有这些地方并修改它们，但这会花费很多时间，而且如果其他很多人都在使用该代码，那么可能很难完成所有修改。而且，user中有age是一件好事，对吧？
4、为age添加一个 getter 来解决这个问题：

function User(name, birthday) {
  this.name = name;
  this.birthday = 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 是可访问的
alert( john.age );      // ……age 也是可访问的

5、现在旧的代码也可以工作，而且我们还拥有了一个不错的附加属性。

😈 JavaScript大魔王

【见】属性的 getter 和 setter