iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

我或許沒那麼懂 Web系列 第 3

JS Object.defineProperty(): (2) getter & setter

接續昨天的研究,來講講 descriptor 中的兩個可定義的方法:get()set()。其實這就是物件導向中常見的 getter 和 setter 囉!我們可以透過定義 get() 方法去重新定義直接讀取該屬性(property)時的行為,或是定義 set() 方法去重新定義再為這個屬性賦值的行為。

以改自 MDN Web docs 的程式碼來解說:

'use strict'

function Archiver() {
  let temperature = null
  let archive = []

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!')
      return temperature
    },
    set: function(value) {
      temperature = value
      archive.push(temperature)
    }
  })

  this.getArchive = function() { 
    return archive 
  }
}

let arc = new Archiver()
arc.temperature
arc.temperature = 2
arc.temperature = 3
arc.temperature = 5
arc.temperature = 7
arc.temperature = 13

console.log(arc.getArchive())

// Output:
//   get!
//   [ 2, 3, 5, 7, 13 ]

透過這種方式能讓我們在存取屬性時順便做點其他事,這邊是讀取時用 console.log() 作為示範,在賦值將原本的數值存進陣列作為封存記錄,並用另一個方法去回傳陣列的紀錄。

這樣的好處是我們不用再為這種事另外定義 getTemperature()setTemperature() 這兩個方法,增加介面的複雜度,而將這些是隱含在屬性的存取之中。

console.log() 的用法,也可以透過這個方法為 deprecated 的屬性做警告。

至於還有沒有其他應用方式,明天再來研究開源專案的原始碼看看吧。


上一篇
JS Object.defineProperty(): (1) descriptor
下一篇
JS Object.defineProperty(): (3) value V.S. getter & setter
系列文
我或許沒那麼懂 Web31

尚未有邦友留言

立即登入留言