ECMAScript -12 Proxy vs defineProperty

• defineProperty 只能监视属性的读写
• Proxy 能够监视到更多的对象操作

🚀🚀🚀 Proxy是以非侵入的方式监管了对象的读写, 就是说我们不需要对已经定义好的对象做任何的操作

info(' ------------------------- Object -------------------------')
const person = {
  name: 'tom',
  age: 20
}
const personProxy = new Proxy(person, {
  deleteProperty(target, property) {
    info('delete', property) // >>> delete age
    delete target[property]
  }
})

delete personProxy['age']
info(person) // >>> { name: 'tom' }

info(' ------------------------- Array -------------------------')
// Proxy更好的支持数组对象的监视 (重写数组的操作方法)
const list = []
const listProxy = new Proxy(list, {
  set(target, property, value) {
    info('set', property, value)
    target[property] = value
    return true
  }
})
listProxy.push(100) // >>> set 0 100
listProxy.push(200) // >>> set 1 200
info('listProxy:', listProxy, ' , typeof listProxy:', typeof listProxy) // >>> listProxy: [ 100, 200 ]  , typeof listProxy: object
info('list', list, ' , typeof list:', typeof list) // >>>  list [ 100, 200 ]  , typeof list: object
info('listProxy==list:', listProxy == list) // >>> listProxy==list: false

info(' ------------------------- defineProperty -------------------------')
const man = {}
Object.defineProperty(man, '_name', {
  get() {
    info('name 被访问')
    return man.name // 如果这个地方是 man._name会是死循环,赋值=>监听=>赋值=>监听=>赋值=>监听=>....
  },
  set(value) {
    info('name 被设置')
    man.name = value
  }
})
man._name = 'cat' // _name只是监听属性,并非对象属性
info(man._name)
info('man:', man) // man: { name: 'cat' }