es6 Proxy简单使用

Posted chenyudi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6 Proxy简单使用相关的知识,希望对你有一定的参考价值。

es6的Proxy是什么?

可以理解为,是在访问对象前的一层拦截。只要访问的该对象,就要通过这个一层拦截。这一层的拦截,可以进行数据的过滤和更改

比如下面这个

var p = new Proxy({},{
    get:function(){
        return 没有这个属性
    }
})

p.name = 张三

p.age    // "没有这个属性"
p.name //张三

上面的内容说,在读取p里的属性的时候,如果不存在返回      ‘没有这个属性‘

 

它有很多种截取属性。

  • get(target, propKey, receiver):拦截对象属性的读取,比如proxy.fooproxy[‘foo‘]
  • set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = vproxy[‘foo‘] = v,返回一个布尔值。
  • has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
  • deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
  • ownKeys(target):拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)Object.keys(proxy)for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
  • getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs),返回一个布尔值。
  • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
  • getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
  • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
  • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
  • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)
  • construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)

第一种:

get

get这个方法接收三个参数。第一个为操作对象,第二个是属性名,第三个是proxy实例本身。第三个参数不是必填参数

var tar = {
    name:"lly"
}

var pro = new Proxy(tar,{
    get:function(target,propkey){
           if(propkey in target){ 
                return target[propkey]
           }else{
                throw new RangeError("你错的也太狠了")
            }
    }
})


pro.name // lly

pro.age  // RangeError: 你错的也太狠了

上面的内容说道,访问的对象不存在的话,抛出一个错误

第二种

set

这个方法,接收四个参数  访问对象、访问属性、访问的属性值、proxy实例对象

这次例子我们换一个写法,让我们熟悉更多写法    我们来看下面这个例子

var handel = {
    set:function(obj,prop,value){
        if(prop === age){
              if(value > 100){
                    throw new RangeError("你是老妖怪吧")
            }
        }
    }
}

var p = new Proxy({},handel);

p.age = 200   //抛出一个错误     RangeError: 你是老妖怪吧

这个set可以拦截访问对象要添加的值。如果值不符合拦截器的规则,就会抛出错误。

第三种

apply

apply方法拦截函数的调用、callapply操作。

方法接收三个参数 目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

我们看下面这个例子

function d(){
    return "曾沛慈"
}

var p = new Proxy(d,{
    apply:function(){
        return "可乐"
    }
})

p();    //可乐

上面代码中,变量p是 Proxy 的实例,当它作为函数调用时(p()),就会被apply方法拦截,返回一个字符串。

var handel = {
    has(target,key){
        if(key[0] == "_"){
               return false
         }
        return key in target;
    }
}

var obj = {_name:lly,name:"cyd"}

var p = new Proxy(obj,handel);

_name in p

//false

 

 

enjoy looking forward to

 

以上是关于es6 Proxy简单使用的主要内容,如果未能解决你的问题,请参考以下文章

es6 Proxy简单使用

ES6系列_13之Proxy进行预处理(简单学习)

ES6----Proxy

浅谈ES6中的Proxy

ES6入门系列 ----- 使用Proxy 实现观察者模式

@芥末的糖 ---------- ES6---Proxy与Reflect 实现重载(overload)