淺解理解 Object.defineProperty()

無樣發表於2019-04-12

程式碼示例:

const obj = {
  firstName: 'liang',
  lastName: 'cheng',
}

Object.defineProperty(obj, 'name', {
  get: function () {
    return this.firstName + this.lastName
  },
  set: setCb
})

function setCb (val) {
  console.log(1)
}

function fn () {
  obj.name = 'lc' // 觸發setCb(obj.name) 
  console.log(2)
  console.log(obj.name)
}

function fnn () {
  obj.firstName = 'liang'
  obj.lastName = 'c'
  console.log(3)
  console.log(obj.name)
}

// test
fn()
// 1
// 2
// liangcheng
fnn()
// 3
// liangc
複製程式碼

結論

  • set 通過外部設定物件 define 的屬性的值後,執行的回撥函式,並不是修改屬性的值,也不推薦在 set 方法中修改
  • get 返回 deine 屬性讀到值

單項繫結和雙向繫結待續。。。

相關文章