美文网首页
ES6-proxy比较重要的方法(1)

ES6-proxy比较重要的方法(1)

作者: 吴高亮 | 来源:发表于2019-01-09 13:56 被阅读0次

    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,去读写它的属性,就会得到下面的结果。

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

    上面代码说明,Proxy 实际上重载(overload)了点运算符,即用自己的定义覆盖了语言的原始定义。

    ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
    var proxy=new Proxy(target,handler);
    Proxy对象的所有用法。都是上面这种形式;不同的是handler参数的写法;其中,new Proxy()表示生成一个Proxy实例;target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为;
    下面是另外拦截行为

    var proxy=new Proxy({},{
    get:function(target,property){
     return 35;
    }
    });
    proxy.time  //35;
    proxy.name //35;
    proxy.title //35;
    
    var  proxy=new Proxy({},{
    get:function(){
     return 35;
    }
    });
    let obj=Object.create(proxy);
    obj.time//35;
    

    上面代码中;通过Object.creat(proxy);创建了一个对象obj;proxy是他的原型;obj本身并没有time属性;所以根据原型链,会在proxy对象上读取该属性,导致被拦截;

    //如果想要拦截一个null的值或者其他的类型的值;可以这么写;
    var obj = new Proxy({}, {
      get: function (target, key, receiver) {
        console.log(`getting ${key}!`,target, key, receiver);
        if(target[key]==null){
            target[key]='空'
        }
        return Reflect.get(target, key, receiver);
      },
      set: function (target, key, value, receiver) {
        console.log(`setting ${key}!`,target, key, value, receiver);
        return Reflect.set(target, key, value, receiver);
      }
    });
    obj.coun    //空
    

    关于proxy的一些实例方法;

    • get();
      get是拦截属性的读取操作;可以接受三个参数;目标对象 以及属性名称;和proxy实例本身;,其中最后一个参数可选;
      get方法的用法;
    var person={
    name:'张三'
    };
    var proxy=new Proxy(person,{
     get(target,peoperty){
      if(property in target){
       return target[property];
      }else{
       throw new PeferenceEffor("Property"+property+"\dees not exist.");
      }
     }
    });
    proxy.name  //‘张三’
    proxy.age //抛出异常;
    
    

    上面代码中;不存在就抛出异常;如果没有这个拦截函数;就返回undefined;

    get方法可以继承;

    function createArray(...element){
    let handler={
      get(target,propKey,receiver){
        let index=number(propKey);
       if(index<0){
         propKey=String(target.length+index);
       };
       return Peflect.get(target,propkey,receiver)
     }
    }
    }
    

    相关文章

      网友评论

          本文标题:ES6-proxy比较重要的方法(1)

          本文链接:https://www.haomeiwen.com/subject/serwrqtx.html