JavaScript 核心觀念(57) - 物件屬性延伸章節：屬性的特徵 - Getter 與 Setter，賦值運算不使用函式

前言

接下來將會來說明 Getter 與 Setter，如果你已經開始學習 Vue，那麼這一篇的觀念就會格外對你有幫助哩。

Getter 與 Setter，賦值運算不使用函式

首先這邊先讓我們來看一段範例程式碼

1
2
3

var wallet = {
  total: 100,
}

那麼若是一般的狀況下，我們若要更改金額就會這樣寫 wallet.total = 300;，主要是透過重新賦予值的方式來解決，但是有些時候我們需求是在做取值或者賦予值的時候做一些運作，可能是賦予值進去之後取值出來要除二，那這時候就會需要使用 Getter 與 Setter，什麼是 Getter 與 Setter 呢？

Getter 取值的方法
Setter 存值的方法

那該如何使用 Getter 與 Setter 呢？其實在物件中都有一個 get 與 set，只需要在後方加上名稱，概念非常像是一個函式(但不是真的函式，所以無法透過函式呼叫方式運行)：

var wallet = {
  total: 100,
  set save(price) {
    this.total += price;
  }
}

這邊要注意，在寫入金額的時候，不是 wallet.save(100) 而是跟一般的賦予值行為一樣

var wallet = {
  total: 100,
  set save(price) {
    this.total += price / 2;
  }
}

wallet.save = 100;
console.log(wallet.total); // 150

透過 Setter 我們可以改變我們一般賦予值的行為，達到一些運算方式。

當然 Getter 也是相同的，只是 Getter 是不需要傳入參數的，因為它是一個取值方式，當然它也可以做一些運算行為，只是要稍微注意 Getter 必須是一個 return 行為

var wallet = {
  total: 100,
  set save(price) {
    this.total += price / 2;
  },
  get save() {
    return this.total / 2;
  }
}

wallet.save = 100;
console.log(wallet.total); // 150
console.log(wallet.save); // 75

除此之外也有另一種方式可以去設定 Getter 與 Setter，也就是使用 Object.defineProperty 的方式：

var wallet = {
  total: 100,
}

Object.defineProperty(wallet, 'save', {
  set: function(price) {
    this.total += price / 2;
  },
  get: function() {
    return this.total / 2;
  }
})

wallet.save = 100;
console.log(wallet.total); // 150
console.log(wallet.save); // 75

這邊要注意透過 Object.defineProperty 建立的 Setter 與 Getter 屬性特徵是比較特別的唷(不可列舉與刪除)。

而 Setter 與 Getter 使用的方式非常廣，舉例來講課程上就舉例了取得陣列最後一個位置的值：

var a = [1, 2, 3, 'Ray'];

Object.defineProperty(Array.prototype, 'latest', {
  get: function() {
    return this[this.length - 1];
  }
})

console.log(a.latest); // Ray

那麼基本上這個觀念比較常見於監聽某個屬性的變化，舉例來講 Vue 的雙向綁定 v-model 就使用了該技巧，但在實戰上除非是想要寫一個類似的框架，否則是很少使用的。

參考文獻

JavaScript 核心篇

JavaScript 核心觀念(57) - 物件屬性延伸章節：屬性的特徵 - Getter 與 Setter，賦值運算不使用函式

前言

Getter 與 Setter，賦值運算不使用函式

參考文獻

你的支持會直接轉換成更多技術筆記

我想要說...

相關文章

分享這篇文章

留言

前言

Getter 與 Setter，賦值運算不使用函式

參考文獻

你的支持會直接轉換成更多技術筆記

我想要說...

相關文章

JavaScript 核心觀念(58) - 物件屬性延伸章節：屬性的特徵 - 屬性特徵與主流框架的關係

JavaScript 核心觀念(56)- 物件屬性延伸章節：屬性的特徵 - 屬性列舉與原型的關係

JavaScript 核心觀念(55)- 物件屬性延伸章節：屬性的特徵 - 物件屬性不可寫入？物件擴充的修改與調整

JavaScript 核心觀念(54)- 物件屬性延伸章節：屬性的特徵 - 屬性特徵是什麼？

分享這篇文章

留言