ES6之Proxy详解

一.什么是Proxy

   Proxy是es6新增的一个属性，用于修改某些操作的默认行为，可以理解为在目标对象外层设置一层“拦截”，外界如果想要访问目标对象，都必须先通过这层拦截，所以proxy提供了一种机制可以对外界的访问进行过滤和改写，用在这里proxy表示代理器的意思。

   Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为“陷阱”），这些钩子函数可以在代理对象上进行操作。当我们对代理对象进行操作时，本质上是在调用这些钩子函数。

二.Proxy用法

    在ES6中提供了Proxy构造函数，可以用这个构造函数生成Proxy实例

var proxy = new Proxy(target,handler);

在上述示例中， new Proxy()表示生成一个Proxy实例，target表示的是所要拦截的目标对象，handler是用来定制拦截行为，也是一个对象，需要向其中提供对应的处理函数，该函数将拦截对应的操作 。

三.常用Proxy属性用法

    3.1 get(target,prop,receiver)

• 作用：用于拦截某个属性的读取操作
• 参数：target:目标对象 ；prop:属性名；receiver:proxy实例本身（操作行为所针对的对象，改参数是可选的）
• 示例

 var person ={name:"jack"};var proxy =new Proxy(person,{get: function(target,prop) {if(prop in target){console.log(target[prop]);}else{throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.")}}})proxy.name//jackproxy.age//抛出一个错误

   3.2 set(target,prop,value,receiver)

• 作用：用于拦截某个属性的赋值操作
• 参数：target:目标对象；prop:属性名；value:属性值；receiver:Proxy实例本身（该参数可选）
• 示例：

   var person ={name:'john'};var proxy =new Proxy(person,{set: function(target,prop,value){if(prop==='age'){if(value>200){throw new RangeError('不符合范围')}else{target[prop]=value;}}}})proxy.age=400//报错，不继续执行proxy.age=100//100
  

        3.3 apply(target,ctx,args) 

• 作用：拦截函数的调用
• 参数：target:目标对象；ctx:目标对象的上下文对象；args:目标对象的参数数组
• 示例：

   var target= function(){return '目标对象';};var handler={apply:function(){return '代理对象';}};var p =new Proxy(target,handler);p();//代理对象

     3.4 has(target,key)

• 作用：用来拦截HasProperty操作，判断对象是否具有某个属性
• 参数：target:目标对象；key:需要查询的属性名
• 示例：

   var handler={has(target,key){if(key[0]==='_'){return false}return key in target;}};var target={_prop:'jack',prop:'john' };var proxy =new Proxy(target,handler)
  由于'_prop' in proxy中，所以返回结果为false，不会被in操作符发现

        3.5 construct(target,args,newTarget)

• 作用：用于拦截new命令
• 参数：target:目标对象；args:构造函数的参数对象；newTarget:创建实例对象时，new命令作用的构造函数
• 注意：construct方法返回的必须是一个对象，否则会报错
• 示例：

  var p =new Proxy(function(){},{construct: function(target,args){console.log('called'+args.join(','));return {value:args[0]*10}}
  });
  console.log((new p(1)).value);//called1;10

        3.6 deleteProperty(target,key)

• 作用：拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete删除
• 参数：target:目标对象；key:要删除的属性
• 示例：

  var handler={deleteProperty(target,key){judge(key,'delete');delete targetp[key];return true;}
  };
  function judge(key,action){if(key[0]==='_'){throw new Error('删除属性错误')}
  }
  var target={_prop:'foo'};
  var proxy = new Proxy(target,handler);
  delete proxy._prop//报错，删除属性错误

         3.7 getPropertyOf(target)

• 作用：拦截对代理对象原型链上属性的访问操作
• 参数：target:目标对象
• 示例：

  const target={};
  const proxy=new Proxy(target,{getPrototypeOf(target) {console.log('get prototype');return Object.getPrototypeOf(target)}
  });
  console.log(Object.getPrototypeOf(proxy));//get prototype

          3.8 setPrototypeOf(target,prototype）

• 作用：拦截对代理对象原型链上属性的设置操作

• 参数：target:目标对象；prototype:要设置的原型对象

• 示例：

   const target ={}const proxy=new Proxy(target,{setPrototypeOf(target,prototype){console.log('set prototype');return Object.setPrototypeOf(target,prototype)}})const proto= {name:'jack'}Object.setPrototypeOf(proxy,proto)//set prototypeconsole.log(proxy.name);//jack