ES6:proxy代理和Reflect反射

2019-03-14 本文已影响13人 toyfish

在ES6中JavaScript新增了proxy来替代ES5中的Object.defineProperty方法来实现对对象属性的操作。

1、Proxy与Object.defineProperty的比较

Proxy与Object.defineProperty都是用来修改某些操作的默认行为的方法，
在ES6之前使用Object.defineProperty来进行对象属性的拦截操作，比较典型的就是数据的「双向绑定」，Object.defineProperty主要的问题有三个：

不能监听数组的变化
必须遍历对象的每个属性
必须深层遍历嵌套的对象
同时与Proxy相比支持的粒度更粗，支持的模式更少。
在ES6中Proxy解决了Object.defineProperty存在问题，并且提供了13种方法来支持对被代理对象的属性操作。

2、使用Proxy

const proxy = new Proxy(target,handler)

3、支持的13种API

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)。
4、使用Proxy API
get()
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

    const data = {
        val1:1,
        val2:2
    }
    const proxy = new Proxy(data,{
        get(target,key,receiver){
            //可以做一些处理
            return Reflect.get(target,key,receiver)
        },
    })

set()
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

    const data = {
        val1:1,
        val2:2
    }
    const proxy = new Proxy(data,{
        set(target,key,val,receiver){
            //可以做一些处理
            return Reflect.set(target,key,val,receiver)
        },
    })

has()
has方法用来查询目标对象是否包含某个属性，可以接受两个参数，一次为目标对象、属性名。

    const data = {
        val1:1,
        val2:2
    }
    const proxy = new Proxy(data,{
        has(target,key){
            //可以做一些处理
            return key in target
        },
    })

deleteProperty()
拦截delete proxy[propKey]的操作，返回一个布尔值

    const data = {
        val1:1,
        val2:2
    }
    const proxy = new Proxy(data,{
        deleteProperty(target,key){
            //做一些拦截操作
            delete target[key]
            return true
        },
    })

十三个api的用法大同小异，这里简单列举几个，其余的一些根据实际情况选用即可。

4、Reflect 反射
反射的作用是为操作对象而提供的新API。
反射和Proxy是相辅相成的，所使用的API与Proxy相同。

Object.defineProperty 都可以改写成 Reflect .defineProperty。
'name' in Object 可以改写成 Reflect .has()

为什么Reflect.set()传入receiver参数，就会触发定义属性的操作？
因为Proxy.set()中的receiver是Proxy的实例，即obj，而Reflect.set一旦传入receiver，就会将属性赋值到receiver上面，也是obj，所以就会触发defineProperty拦截。

ES6:proxy代理和Reflect反射

猜你喜欢

热点阅读