ES6-proxy

ES6中加入了一个新的对象,叫proxy。他的作用就是在对象访问之前架设一个过滤网,通过这个过滤网我们可以先拦截访问的属性,然后我们可以为所欲的对我们拦截的属性进行操作,等我们处理完这个我们拦截的对象之后在让它通过我们的过滤网然后访问出来。我们可以通过proxy,设置私有属性,私有方法,限制属性的读取和设置,拦截我们不想发生的操作。这可以大大提升我们程序的安全,也让一些操作变得简单,接下来我们看看proxy的具体用法。

当我使用proxy 我们首先需要创建一个proxy的实例,接受两个参数,第一个是一个对象,也就是我们要去拦截的对象。第二个参数也是一个对象,是我们拦截的配置,也就是如何拦截,拦截那些。

let obj ={ a:1,b:1};
let proxy = new Proxy(obj,{
    get:function (obj,key) {
        if(key==="a"){
            return 20;
        }
    }
});
console.log(proxy.a); //20
这里就是一个简单的使用proxy的实例,首先我们新建了一个obj对象,然后新建了一个Proxy的实例,将obj作为它的第一个参数,第二个参数是我们的拦截配置,我们设了一个读取拦截get,这里get函数接收连个参数,第一个是一个对象,就是我们要拦截的对象obj,第二个参数是我们要访问的属性名,这里我们判断如果属性名为a我们就返回20,所以无论如何也访问不到obj.a =1 。这里我们要注意一下我们操作的都是Proxy对象的实例,而不是源对象如果我们操作源对象Proxy则没有了意义。

proxy可以对很对操作进行拦截,详情可以去看ECMAScript6入门,这里我们介绍几个常用的应用场景。

①私有属性 我们可以通过proxy 拦截一些别人无法访问到的属性 假设我们 '_',开始的都是私有属性;

obj ={
    _private : 'private',
};

let proxy = new Proxy(obj,{
   get(obj,key){
       if(key.charAt(0)==="_"){
           return undefined
       }else {
           return obj[key];
       }
   },
   set(obj,key,value){
       if(key.charAt(0)==="_"){
           //这里也有有一系列的判断,来约束给私有属性设置值
       }else {
           obj[key] = value;
       }
   }
});
console.log(obj._private); // private
console.log(proxy._private); //undefined


这样我们给obj添加的所有以'_'开头的属性都是私有属性,通过proxy永远是无法访问到的_private,我们设置私有属性也会经过我们处理。这样我们可以提升我们代码的安全性。设置私有方法和设置私用属性是一样的。

但是我们这里要注意的是,通过Object.definedProperty()配置了对象属性是不可写或不可配置的,这样我们是无法代理的。

其实Proxy的语法很简单,但是在实际上的运用却又非常多种,我们可以通过它健壮我们的代码。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值