有兩種類型的對(duì)象屬性。

第一種是 數(shù)據(jù)屬性。我們已經(jīng)知道如何使用它們了。到目前為止，我們使用過的所有屬性都是數(shù)據(jù)屬性。

第二種類型的屬性是新東西。它是 訪問器屬性（accessor property）。它們本質(zhì)上是用于獲取和設(shè)置值的函數(shù)，但從外部代碼來看就像常規(guī)屬性。

getter 和 setter

訪問器屬性由 “getter” 和 “setter” 方法表示。在對(duì)象字面量中，它們用 get 和 set 表示：

let obj = {
  get propName() {
    // 當(dāng)讀取 obj.propName 時(shí)，getter 起作用
  },

  set propName(value) {
    // 當(dāng)執(zhí)行 obj.propName = value 操作時(shí)，setter 起作用
  }
};

當(dāng)讀取 obj.propName 時(shí)，getter 起作用，當(dāng) obj.propName 被賦值時(shí)，setter 起作用。

例如，我們有一個(gè)具有 name 和 surname 屬性的對(duì)象 user：

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

現(xiàn)在我們想添加一個(gè) fullName 屬性，該屬性值應(yīng)該為 "John Smith"。當(dāng)然，我們不想復(fù)制粘貼已有的信息，因此我們可以使用訪問器來實(shí)現(xiàn)：

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

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith

從外表看，訪問器屬性看起來就像一個(gè)普通屬性。這就是訪問器屬性的設(shè)計(jì)思想。我們不以函數(shù)的方式 調(diào)用 user.fullName，我們正常 讀取 它：getter 在幕后運(yùn)行。

截至目前，fullName 只有一個(gè) getter。如果我們嘗試賦值操作 user.fullName=，將會(huì)出現(xiàn)錯(cuò)誤：

let user = {
  get fullName() {
    return `...`;
  }
};

user.fullName = "Test"; // Error（屬性只有一個(gè) getter）

讓我們通過為 user.fullName 添加一個(gè) setter 來修復(fù)它：

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

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName 將以給定值執(zhí)行
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

現(xiàn)在，我們就有一個(gè)“虛擬”屬性。它是可讀且可寫的。

訪問器描述符

訪問器屬性的描述符與數(shù)據(jù)屬性的不同。

對(duì)于訪問器屬性，沒有 value 和 writable，但是有 get 和 set 函數(shù)。

所以訪問器描述符可能有：

• ?get? —— 一個(gè)沒有參數(shù)的函數(shù)，在讀取屬性時(shí)工作，
• ?set? —— 帶有一個(gè)參數(shù)的函數(shù)，當(dāng)屬性被設(shè)置時(shí)調(diào)用，
• ?enumerable? —— 與數(shù)據(jù)屬性的相同，
• ?configurable? —— 與數(shù)據(jù)屬性的相同。

例如，要使用 defineProperty 創(chuàng)建一個(gè) 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

請(qǐng)注意，一個(gè)屬性要么是訪問器（具有 get/set 方法），要么是數(shù)據(jù)屬性（具有 value），但不能兩者都是。

如果我們?cè)噲D在同一個(gè)描述符中同時(shí)提供 get 和 value，則會(huì)出現(xiàn)錯(cuò)誤：

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

更聰明的 getter/setter

getter/setter 可以用作“真實(shí)”屬性值的包裝器，以便對(duì)它們進(jìn)行更多的控制。

例如，如果我們想禁止太短的 user 的 name，我們可以創(chuàng)建一個(gè) setter name，并將值存儲(chǔ)在一個(gè)單獨(dú)的屬性 _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 太短了……

所以，name 被存儲(chǔ)在 _name 屬性中，并通過 getter 和 setter 進(jìn)行訪問。

從技術(shù)上講，外部代碼可以使用 user._name 直接訪問 name。但是，這兒有一個(gè)眾所周知的約定，即以下劃線 "_" 開頭的屬性是內(nèi)部屬性，不應(yīng)該從對(duì)象外部進(jìn)行訪問。

兼容性

訪問器的一大用途是，它們?cè)试S隨時(shí)通過使用 getter 和 setter 替換“正常的”數(shù)據(jù)屬性，來控制和調(diào)整這些屬性的行為。

想象一下，我們開始使用數(shù)據(jù)屬性 name 和 age 來實(shí)現(xiàn) user 對(duì)象：

function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert( john.age ); // 25

……但遲早，情況可能會(huì)發(fā)生變化。我們可能會(huì)決定存儲(chǔ) birthday，而不是 age，因?yàn)樗_，更方便：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

現(xiàn)在應(yīng)該如何處理仍使用 age 屬性的舊代碼呢？

我們可以嘗試找到所有這些地方并修改它們，但這會(huì)花費(fèi)很多時(shí)間，而且如果其他很多人都在使用該代碼，那么可能很難完成所有修改。而且，user 中有 age 是一件好事，對(duì)吧？

那我們就把它保留下來吧。

為 age 添加一個(gè) getter 來解決這個(gè)問題：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // 年齡是根據(jù)當(dāng)前日期和生日計(jì)算得出的
  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 也是可訪問的

現(xiàn)在舊的代碼也可以工作，而且我們還擁有了一個(gè)不錯(cuò)的附加屬性。