ES6 Proxy

Proxy

Proxy用于修改某些操作的默认行为，等同于在语言层面作出修改，所以属于一种"元编程"。Proxy可以理解成在目标对象前架设一个“拦截层”，外界对该对象的访问都必须先通过这层拦截,因此提供可一种机制，可以对外界的访问进行过滤和改写。我们可以称之为“代理器”。

var obj = new Proxy({},{
    get:function(target,key,receiver){
        console.log(`getting ${key}!`)
        return Reflect.get(target, key, receiver);
     },
     set:function(target,key,value,receiver){
        console.log(`setting ${key}!`)
        return Reflect.set(target, key,value, receiver);
     }
})

上面的代码对一个空对象做了一层拦截，重新定义了读取(get)，和设置(set)行为，来看看下面运行的结果：

obj.count = 1;
//  setting count!
++obj.count
//  getting count!
//  setting count!
//2

上面代码说明，Proxy实际上重载了对象obj的点运算符，就是用自己的定义覆盖了语言的原始定义。

ES6原生提供 Proxy构造函数,用于生成Proxy实例

var proxy = new Proxy({},{
   get:function(target,property) {
   return  25
   }
});
proxy.name // 25
proxy.age  // 25
proxy.hasOwnProperty  // 25
proxy.hasOwnProperty() // proxy.hasOwnProperty is not a function

对于可以设置但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。

Proxy支持的拦截操作一览：

1. get(target, propKey, receiver) 拦截对象属性的读取，返回值类型不限，参数receiver可选，当target对象设置了propKey属性的get函数时，receiver对象会绑定get函数的this对象。

2. get(target, propKey, value receiver) 拦截对象属性的设置，返回布尔值。

3. has(target, propKey,) 拦截 propKey in proxy的操作，返回布尔值。

4. has(target, propKey,) 拦截 propKey in proxy的操作，返回布尔值。

5. deleteProperty(target, propKey) 拦截 delete proxy['propKey']的操作，返回布尔值。

6. enumerate(target) 拦截 for(var i in proxy)的操作，返回一个遍历器。

7. hasOwn(target, propKey,) 拦截 proxy.hasOwnProperty('foo')的操作，返回布尔值。

......基本上对象的大部分属性做操都能拦截。

Proxy.revocable()

Proxy.revocable()方法返回一个可取消的Proxy实例。

var target = {};
var handler = {};
let {proxy,revoke} = Proxy.revocable(target,handler);
proxy.foo = 123 ;
proxy.foo  // 123
revoke();
proxy.foo // TypeError: Cannot perform 'get' on a proxy that has been revoked

Proxy.revocable()方法返回一个对象，其中proxy属性是Proxy构造方法的实例，revoke属性是一个函数，调用后可以取消proxy实例。如上：再执行取值proxy.foo会报错。