Object.defineProperty(obj, prop, option)

var obj = { 
  name: 'sorryhc' 
}
var rocordName = 'sorryhc';

Object.defineProperty(obj, 'name', {
  enumerable: true,
  configurable:true,
  set: function(newVal) {
      rocordName = newVal 
      console.log('set: ' + rocordName)
  },
  get: function() {
      console.log('get: ' + rocordName)
      return rocordName
  }
})

obj.name = 'sorrycc' // set: sorrycc
console.log(obj.name) // get: sorrycc

// 監(jiān)視對(duì)象
function observe(obj) {
  // 遍歷對(duì)象，使用 get/set 重新定義對(duì)象的每個(gè)屬性值
   Object.keys(obj).forEach(key => {
       defineReactive(obj, key, obj[key])
   })
}

function defineReactive(obj, k, v) {
   // 遞歸子屬性
   if (typeof(v) === 'object') observe(v)
   
   // 重定義 get/set
   Object.defineProperty(obj, k, {
       enumerable: true,
       configurable: true,
       get: function reactiveGetter() {
           console.log('get: ' + v)
           return v
       },
       // 重新設(shè)置值時(shí)，觸發(fā)收集器的通知機(jī)制
       set: function reactiveSetter(newV) {
           console.log('set: ' + newV)
           v = newV
       },
   })
}

let data = {a: 1}
// 監(jiān)視對(duì)象
observe(data)
data.a // get: 1
data.a = 2 // set: 2

const obj = new Proxy(target, handler)

const handler = {
  get: function(target, name){
      return name in target ? target[name] : 'no prop!'
  },
  set: function(target, prop, value, receiver) {
      target[prop] = value;
      console.log('property set: ' + prop + ' = ' + value);
      return true;
  }
};

var user = new Proxy({}, handler)
user.name = 'sorryhc' // property set: name = sorryhc

console.log(user.name) // sorryhc
console.log(user.age) // no prop!

window.obj = {
  showModal: false
}

const [visible, setVisible] = useState(false);

useEffect(() => {
  visible && Modal.show({
    // ...
  })
}, [visible])

Object.defineProperty(window.obj, 'showModal', {
  enumerable: true,
  configurable:true,
  set: function(newVal) {
    setVisible(newVal);
      console.log('set: ' + newVal)
  },
  get: function() {
      console.log('get: ' + visible)
      return visible
  }
})

window.obj.showModal = !window.obj.showModal // set: true
console.log(window.obj.showModal) // get: true

const [visible, setVisible] = useState(false);

useEffect(() => {
  visible && Modal.show({
    // ...
  })
}, [visible])

const handler = {
  get: function(target, name){
      return name in target ? target[name] : 'no prop!'
  },
  set: function(target, prop, value, receiver) {
      target[prop] = value;
      setVisible(value);
      console.log('property set: ' + prop + ' = ' + value);
      return true;
  }
};

window.obj = new Proxy({showModal: false}, handler)
window.obj.showModal = !window.obj.showModal // property set: showModal = true

console.log(window.obj.showModal) // true