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 呢?其實在物件中都有一個 getset,只需要在後方加上名稱,概念非常像是一個函式(但不是真的函式,所以無法透過函式呼叫方式運行):

1
2
3
4
5
6
var wallet = {
total: 100,
set save(price) {
this.total += price;
}
}

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

1
2
3
4
5
6
7
8
9
var wallet = {
total: 100,
set save(price) {
this.total += price / 2;
}
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 的方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 使用的方式非常廣,舉例來講課程上就舉例了取得陣列最後一個位置的值:

1
2
3
4
5
6
7
8
9
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 就使用了該技巧,但在實戰上除非是想要寫一個類似的框架,否則是很少使用的。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ