Proxy

• 拦截对象中任何属性的变量，包括属性值的读写、属性添加、属性删除

let person = { // 普通对象
  name: 'zs',
  age: 18
}
const p = new Proxy(person, {})

•   new Proxy 的返回值称为代理对象，对代理对象的任何增删改查操作都会自动映射到person对象中，对 Person 对象的任何操作也会自动映射到p代理对象中

 let person = { // 普通对象
   name: 'zs',
   age: 18
 }
 // 返回值p是一个代理对象 对代理对象的任何增删改查都会自动映射到person对象中
 const p = new Proxy(person, {
   get(target, propName) { // 读取p代理对象中的属性自动执行get
     console.log(`有人读取了person身上的${propName}属性`);
     return target[propName]
   },
   set(target, propName, value) { // 修改或增加p代理对中的属性自动执行set
     console.log(`有人修改了person身上的${propName}属性，取值是${value}`);
     target[propName] = value
   },
   deleteProperty(target, propName) { // 删除p身上的属性自动会执行 deleteProperty
     console.log(`删除了person身上的${propName}属性`);
     return delete target[propName]
   }
 })

• 手动配置修改代理对象需要执行的操作

Reflect

• 不想在  new Proxy 第二个配置参数中， get 、 set 、 deleteProperty 函数中使用  target 操作原来的普通对象

let person = { // 普通对象
  name: 'zs',
  age: 18
}
const p = new Proxy(person, {
  get(target, propName) {
    console.log(`有人读取了person身上的${propName}属性`);
    return Reflect.get(target, propName)
  },
  set(target, propName, value) {
    console.log(`有人修改了person身上的${propName}属性，取值是${value}`);
    Reflect.set(target, propName, value)
  },
  deleteProperty(target, propName) {
    console.log(`删除了person身上的${propName}属性`);
    return Reflect.deleteProperty(target, propName)
  }
})

• 通过  Reflect 对被代理对象的属性进行操作