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

2019-01-09  本文已影响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的一些实例方法;

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)
 }
}
}
上一篇 下一篇

猜你喜欢

热点阅读