监听对象的方式

监听对象的操作

1. Object.defineProperty( obj,key, { get(){}, set(){}} )

   /* 监听对象的所有属性 */
   let obj = { name: 'nano', age: 18 }
   Object.keys.forEach( item => {
     let value = obj[ item ]
     Object.defineProperty( obj, item, { get( ){ }, set( newV ){ value = newV } } )
   } )

2. Proxy类监听

Proxy类

1. 定义: 如果需要监听一个对象,就对这个对象生成一个代理对象,通过这个代理对象的捕获器去捕捉这个代理对象的值的获取和改变,改变和获取值的操作通过代理对象会直接映射到原对象
2. 使用结构: new Proxy(代理对象, 捕获器[13种])

   const obj = { name: 'nano', age:18 }
   const objProxy = new Proxy(obj,{
     get(target,key,receiver){
       console.log('watch')
       return target[key]
     },
     set(target,key,value,receiver){
       console.log('change')
       target[key] = value
     }
   })
   objProxy.name = 'roily'
   console.log(objProxy.age)

3. get/set捕获器的参数解析
   (1) target: 代理的目标对象
   (2) key: 获取和发生变动的键值
   (3) value: 需要设置的新值 [set捕获器]
   (4) receiver: 调用的代理对象

Proxy的捕获器(常用)

1. has( target,key )
   (1) 定义: 判断某个key值是否在代理对象上
   (2) 注意: 只能拦截 in 关键字的判断,无法拦截hasOwnProperty()的判断

   const obj = { name:'nano' }
   const objProxy = new Proxy(obj,{
     has(target,key){
       console.log('监听操作')
       return key in target
     }
   })
   'name' in objProxy --> '监听操作'
   objProxy.hasOwnProperty('name') --> 不会触发

2. deleteProperty( target,key )
   (1) 定义: 删除捕获器,捕获delete操作符删除的内容

   const obj = { name: 'nano' }
   const objProxy = new Proxy(obj,{
     deleteProperty(target,key){
       console.log( '监听delete操作' )
       return delete target.key
     }
   })
   delete objProxy.name --> '监听delete操作'
   console.log(obj) --> {}

Proxy的捕获器(补充)

1. getPrototypeOf( )
   定义: 监听调用Object.getPropertyOf( )获取原型时的操作

2. setPrototypeOf( )
   定义: 监听调用Object.setPropertyOf( )设置原型时的操作

3. isExtensible( )
   定义: 判断一个对象是否可扩展时的捕捉

4. preventExtensible( )
   定义: 监听调用Object.preventExtensions( )时的操作

5. getOwnPropertyDescriptor( )
   定义: 监听调用Object.getOwnPropertyDescriptor( )时的操作

6. defineProperty( )
   定义: 监听调用Object.defineProperty( )时的操作

7. ownKeys( )
   定义: 监听调用Object.getOwnPropertyNames( )或Object.getOwnPropertySymbols( )时的操作

8. apply( target,this,argArray )
   (1)定义: 监听函数调用的操作

   functin add(){}
   let proxyAdd = new Proxy( add,{
     apply( target,_this,applyArg ){
       return target.apply(_this,applyArg)
     }
   } )
   proxyAdd.apply({},[1,2])

   注意: 用于函数对象

9. construct(target,argArray,newTarget )
   (1)定义: 监听new操作符

   functin add(){}
   let ProxyAdd = new Proxy( add,{
     construct( target,argArray,newTarget ){
       return new target(...argArray)
     }
   } )
   new ProxyAdd( )

   注意: 用于函数对象