Proxy

169 阅读1分钟

var proxy = new Proxy(target, handler)

target: 表示所要拦截的目标对象 handler: 一个对象,用来定制拦截行为

Proxy实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {
    get: function(target, propKey) {
        return 35
    }
})

let obj = Object.create(proxy)
obj.time // 35

proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截。

同一个拦截器,可以设置多个拦截操作。 对于可以设置、但没有设置拦截的操作,则直接落在目标对象,按照原先的方式产生结果。

共以下13种拦截操作:

receiver:调用的代理对象,原始的读操作所在的那个对象,一般情况下是proxy实例

- 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] -> 返回布尔值
- defineProperty(target, propKey, propDesc) -> Object.defineProperty -> 返回布尔值

如果一个属性不可配置(configurable)且不可写(writable),则Proxy不能修改该属性,否则通过Proxy对象访问该属性会报错。

const target = Object.defineProperty({}, {
    foo: {
        value: 123,
        writable: false,
        configurable: false
    }
})

const handler = {
    get(target, propKey) {
        return 'abc'
    }
}

const proxy = new Proxy(target, handler)

proxy.foo
// TypeError: Invariant check failed