ES6 Proxy属性

Posted 2023-05-09

参考技术A let proxy = new Proxy(target, handler);

tgarget ：要代理的目标对象。（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler ：定义拦截行为的配置对象（也是一个对象，其内部的属性均为执行操作的函数）。

proxy的向光方法：

1、 set(target, key, value, receiver)   拦截对象属性的设置

target ：要代理的目标对象。

key ：要设置的属性名。

value ：要设置的属性值。

receiver ：proxy实例（可选参数，一般不用）

例：

2、 get(target, key, receiver)  拦截对象属性的读取

target ：要代理的目标对象。

key ：属性名。

receiver：proxy 实例（可选参数，一般不用）

例：

3、 has(target, Key)  判断对象是否具有某个属性。

target ：要代理的目标对象。

key ：要设置的属性名。

4、 apply(target, thisArgs, args)  拦截函数的调用、call和apply操作

target ：目标对象。

thisArgs ：目标对象的上下文对象（this）。

args ：目标对象的参数数组。

5、 construct(target, args，newTarget)  拦截new命令

target ：目标对象。

args ：构造函数的参数列表。

newTarget ：创建实例对象时，new命令作用的构造函数（下面例子的p）

具体可以参考阮一峰的这篇文章： ECMAScript 6 入门 - Proxy

es6 Proxy简单使用

es6的Proxy是什么？

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

比如下面这个

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

p.name = ‘张三‘

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

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

 

它有很多种截取属性。

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo‘]。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘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方法拦截函数的调用、call和apply操作。

方法接收三个参数 目标对象、目标对象的上下文对象（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