iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

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

JS Object.defineProperty(): (5) 相關方法

  • 分享至 

  • xImage
  •  

雖然目前的標題還是 Object.defineProperty(),不過之後可能會改成比較敘事風格的標題,像今天想講的就不是 Object.defineProperty() 這個方法本身,但是卻是有相關的方法。

  • Object.defineProperties(obj, props)
  • Object.getOwnPropertyDescriptor(obj, prop)
  • Object.getOwnPropertyDescriptors(obj)

想要一次透過 defineProperty 定義多個屬性

若是今天要一次定義多個屬性,但卻覺得要一直寫 Object.defineProperty 很煩時,其實是有另一個方法能讓我們一次定義多個屬性的,那就是 Object.defineProperties()

直接看範例吧,下面兩段程式碼的行為是等價的:

'use strict'

let obj = {}

Object.defineProperty(obj, 'key1', {
  value: 'property1',
  writable: true
})

Object.defineProperty(obj, 'key2', {
  value: 'property2',
  writable: false
})
'use strict'

let obj = {}

Object.defineProperties(obj, {
  'key1': {
    value: 'property1',
    writable: true
  },
  'key2': {
    value: 'property2',
    writable: false
  }
})

想要知道當前屬性的 descriptor

若是需要知道某物件某屬性的 descriptor 時,該怎麼辦呢?其實一樣是有提供相關方法的,那就是 Object.getOwnPropertyDescriptor(),一樣直接看範例:

'use strict'

let obj = {}

Object.defineProperty(obj, 'key', {
  value: 'property',
  writable: true
})

let descriptor = Object.getOwnPropertyDescriptor(obj, 'key')
console.log(descriptor)

// Output
//   { value: 'property',
//     writable: true,
//     enumerable: false,
//     configurable: false }

想要知道某物件所有屬性與其 descriptor(s)

defineProperties 可以一次定義多個屬性,如果要知道某物件所有屬性的 descriptor,那就是 Object.getOwnPropertyDescriptors() 也是有方法可以做到的,仍然是直接看程式碼範例吧:

'use strict'

let obj = {}

Object.defineProperties(obj, {
  'key1': {
    value: 'property1',
    writable: true
  },
  'key2': {
    value: 'property2',
    writable: false
  }
})

let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors)

// Output:
//   { 
//     key1: { 
//       value: 'property1',
//       writable: true,
//       enumerable: false,
//       configurable: false 
//     },
//     key2: { 
//       value: 'property2',
//       writable: false,
//       enumerable: false,
//       configurable: false 
//     } 
//   }

上一篇
JS Object.defineProperty(): (4) 資料繫結
下一篇
JS Object.defineProperty(): (6) 相關應用
系列文
我或許沒那麼懂 Web31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言