getter & setter

利用 getter/setter 可以攔截操作對象的屬性，在設(shè)置屬性前或獲取屬性前做一些事情。

1. getter

get語法將對象屬性綁定到查詢該屬性時將被調(diào)用的函數(shù)。(MDN)

// 語法
var 對象 = {
  get 屬性名() {
    // 做一些事情 balabala
    return 值;
  }
};

getter 在獲取一個屬性時被調(diào)用，同時返回 getter 的返回值。

const student = {
  score: {
    english: 10,
    chinese: 99,
    math: 6,
  },

  // 總分 通過計算得出
  get totalScore() {
    var score = this.score;

    return score.english + score.chinese + score.math;
  }
};

console.log(student.totalScore); // 115

訪問 student.totalScore，實(shí)際上時訪問了 totalScore 這個 getter，getter 本質(zhì)上是個函數(shù)，所以可以像寫一個函數(shù)一樣寫 getter，最后返回 getter 的返回值作為訪問屬性的屬性值。

需要注意的是，沒有特殊情況，不要在 getter 中訪問自身。

var obj = {
  key: 1,

  get key() {
    return this.key;
  },
}

這樣會導(dǎo)致無限訪問 key 這個 getter。

2. setter

當(dāng)嘗試設(shè)置屬性時，set語法將對象屬性綁定到要調(diào)用的函數(shù)。(MDN)

// 語法
var 對象 = {
  set 屬性名(值) {
    // 做一些事情 balabala
    // this.某個屬性 = 值;
  }
};

setter 在一個屬性被賦值時調(diào)用，同時這個值會被作為參數(shù)傳遞給 setter。

const student = {
  score: {
    english: 10,
    chinese: 99,
    math: 6,
  },

  // 總分 通過計算得出
  get totalScore() {
    var score = this.score;

    return score.english + score.chinese + score.math;
  },

  set english(value) {
    this.score.english = value;
  },

  set chinese(value) {
    this.score.chinese = value;
  },

  set math(value) {
    this.score.math = value;
  },
};

console.log(student);

student.math = 66;
student.chinese = 150;
student.english = 77;

console.log(student);
console.log(student.totalScore);

這里通過三個 setter 來設(shè)定對應(yīng)的分?jǐn)?shù)，這樣就不用使用 student.score.學(xué)科 的方式賦值了，可以省略 score。

和 getter 同理，使用 setter 時，setter 名和最終要設(shè)置值的屬性不應(yīng)同名，否則會無限設(shè)置這個值。

3. 使用 Object.defineProperty 設(shè)置 setter/getter

利用 defineProperty 方法也可以設(shè)置 setter/getter。

var person = {
  _cash: 1,
  _deposit: 99999,
};

Object.defineProperty(person, 'money', {
  get: function() {
    return this._cash + this._deposit;
  },
});
Object.defineProperty(person, 'cash', {
  set: function(val) {
    console.log('現(xiàn)金發(fā)生了改變');
    this._cash = val;
  },
});

person.cash = 2;
console.log(person.money);

4. 小結(jié)

getter/setter 可以充當(dāng)屬性攔截器的角色，在設(shè)置和訪問屬性的時候做一些額外的事情。

靈活使用 getter/setter 可以使開發(fā)變得更有效率，許多框架的核心機(jī)制就是靈活、巧妙的使用了 getter/setter。

getter/setter 是 ES5 中的特性，所以要注意 IE8 并不支持。