Object.defineProperty使用小記

本來想實現下vue的源碼，結果剛開始就踩了個坑，記錄下。

let obj = {
  name: 'Han'
}


Object.defineProperty(obj, 'name', {
  get() {
    return obj.name
  }
})

控制檯打了下報錯說是棧溢出。

原因是get方法不能直接返回obj.name，這樣相當於又調用了一次get方法，然後繼續返回obj.name繼續調用get方法...

 

解決的方法

1、數據代理。

let obj = {
  _name: 'Han'
}


Object.defineProperty(obj, 'name', {
  get() {
    return obj._name
  },
  set(newVal) {
    obj._name = newVal
  }
})

2、包多一層函數，把需要修改（輸出）的變量以函數內私有變量的形式存儲。

let obj = {
  name: 'Han'
}

function reactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      val = newVal
    }
  })
}

reactive(obj, 'name', obj.name)