proxy学习笔记

proxy 在目标对象的外层搭建一层拦截器，外界对目标对象的操作必须经过拦截器。
var proxy = new Proxy(target,handler);

var target ={
    age:30
}

var targetWithLog = new proxy(target,{
    get:function(target,key){
        console.log(`${key} 被读取`);
        return target[key];
    },
    set:function(target,key,value){
        console.log(`${key}设置为${value}`);
        target[key] = value;
    }
})

targetWithLog.age；
targetWithLog.age = 31;
//控制台打印了日志

Proxy实例也可以作为其他对象的原型对象

var proxy = new Proxy({},{
  get:function(target,property){
    return 35;
  }
});

let obj = Object.create(proxy);

obj.time// 35

上述的get、set是不可以自定义的，是handler的13个api方法:

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()
// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()
// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

提到这里还要提一下Reflect对象，它是ES7新的内置对象，不能new,使用方法同Object。

let obj = {
    name:'李四',
    age:20
}
Reflect.set(obj,'name','张三')    // true，修改成功返回true
console.log(obj)    /

下来我们来实现一下私有变量拦截

let api = {
 _apiKey:'11',
 getUser:function(){},
 setUser:function(){}
}
let apiProxy = new Proxy(api,{
 has:function(target,key){
    if(key === '_apiKey'){
      return false;
    }else{
      Reflect.has(target,key);
    }
 }
})

console.log('_apiKey' in apiProxy );//false