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)