Proxy代理

Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种’元编程’

语法：let proxy = new Proxy(target, handler)

• target–所要拦截的目标对象
• handler–通常以函数作为属性的对象，定制拦截行为

Proxy 支持的拦截操作一共有13种，比如get、set、has、ownKeys、deleteProperty等

handler.get() 在读取代理对象的某个属性时触发该操作，用于拦截某个属性的读取操作

new Proxy(target,{get(target,property,receiver)})接收三个参数

• target–目标对象
• propert–属性名
• receiver–proxy实例本身

let data = { one:'one' , two:'two' }
let proxy = new Proxy(data,{
   get(target,property,receiver){
      console.log(target,property,receiver) // {one: "one", two: "two"} / two / Proxy{one: "one", two: "two"}
      return property+'A'
   }
})
console.log(proxy.two) // twoA

// ------------------------------------

let proxy = new Proxy({},{
   get(target,property,receiver){
      console.log(target,property,receiver) // {} / "test" / Proxy{}
      return '返回值'
   }
})
console.log(proxy.test) // 返回值

验证案例

let data = { name: "张三"};
let proxy = new Proxy(data, {
   get: function(target, propKey) {
      if (propKey in target) return target[propKey];
      else  throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
   }
});
console.log(proxy.name) // 张三
console.log(proxy.age) // Prop name "age" does not exist

// 一旦对象被代理，this就会指向代理对象
let target = {
    get: function (){ console.log(this === proxy) }
 }
let handler = {}
let proxy = new Proxy(target,handler)
console.log(target.get(),proxy.get())// false true // target对象被代理，this指向代理对象

let base = {
   a:100,
   small:"hello world!!"
}
let proxy = new Proxy(base,{
   get(target, property,receiver){
      console.log(target, property,receiver)
      //属性转换成函数
      if("funName" === property ){
         return function(value){ console.log(value) }
      }
     if("ghost" === property ){ return "ghost创建属性" }
     //自定义语法糖
      if(property.includes("_")){
         const propertyBase = property.split("_")[0]
         console.log(propertyBase)
         const direct = property.split("_")[1]
         switch (direct){
            case "Big":
               return receiver[propertyBase].toLocaleUpperCase()
            default:
               break;
         }
      }
      if(!(property in target)){ //在target中查看是否有property这个key值，返回bools值
        throw new ReferenceError("Property \"" + property + "\" does not exist.");//验证属性值，如果没有则抛出错误
     }
     console.log('测试')
     return target[property]
   }
})
console.log(proxy.a)//输出100
proxy.funName('参数')// 属性转换为方法
console.log(proxy.ghost)//创建属性
console.log(proxy.small_Big)//输出 HELLO WORLD!!   自定义语法糖
console.log(proxy.a)//数据验证  抛出错误

待续。。。