js中的Proxy

js中的Proxy

基本概念

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”

let d=new Proxy(target,handle);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。
其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

作为构造函数，Proxy接受两个参数:
第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有Proxy的介入，操作原来要访问的就是这个对象；
第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。

如果handler没有设置任何拦截，那就等同于直接通向原对象。

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

Proxy的拦截操作列表

get操作

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象,也就是所谓的接收器），其中最后一个参数可选。

get方法可以继承。

  let obj = {
          a: 1,
        };
        let proxyObj = new Proxy(obj, {
          get: function (target, attr) {
            return target[attr]; // obj["a"]
          },
        });
        console.log(proxyObj.a); // 1

get操作经典示例之模拟链式操作

set操作

set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为
目标对象
属性名
属性值
Proxy 实例本身
其中最后一个参数可选。

set操作一般用于对于要赋值的数进行过滤,加工或是权限设置

 let obj = {
          a: 1,
          b: 2
        };
        let proxyObj = new Proxy(obj, {
          get: function (target, attr, receiver) {
            //console.log(receiver.attr); // 1
            return target[attr]; // obj["a"]
          },
          set : function(target, attr, value){

            target[attr] = value;
            // function zdy(){
            //     console.log("属性被修改 ！"); 
            // }
            // zdy();
            //添加自定义的一些功能
          }