Object.defineProperty

by jin5354

Babel + JSX

// more detail go to 
// https://github.com/jin5354/leaf-observable

let o = {
  a: 1
}
function watch(obj, key, callback) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      return value
    },
    set(newValue) {
      if(newValue === value) {
        return
      }else {
        let oldValue = value
        value = newValue
        callback(newValue, oldValue)  // setter 中触发回调函数，并将新值与旧值作为参数传入
      }
    }
  })
}
//『使数据响应化』和『添加回调函数』两个操作现在是耦合在一起的
watch(o, 'a', (newValue, oldValue) => {   // 使 o.a 响应化
  console.log('属性被修改了，新值为:', newValue, ',旧值为：', oldValue)
})
o.a = 2   // 输出： 属性被修改了，新值为: 2 ,旧值为： 1
o.a = 3   // 输出： 属性被修改了，新值为: 3 ,旧值为： 2