es6之Proxy

249 阅读1分钟

Proxy是什么

proxy:直译过来就是代理,es6新增特性,主要用于对象操作,可以看作对象属性的拦截器,当你取或设置一个对象的属性时会经过proxy这一关

Proxy怎么用

举个最简单的例子,取一个对象上的属性a

        let obj = {a:'i am a'}
        let config = {
            get:function(target,key,receiver){
                return `hello,${target[key]}`
            }
        }
        let proxy = new Proxy(obj,config)
        console.log(proxy.a)

输出如下:

'输出结果'
这里我们通过proxy给obj的属性a设置了拦截器,只要是取a的值就会经过我们设置的代理,这个过程中可以修改原本的值

es5中的代理

es5也可以实现上述功能,通过object.defineProperty(),代码如下:

        let obj = { a: 'i am a' }
        let proxy = {}
        let description = {
            get: function () {
                return `hello,${obj.a}`
            }
        }
        Object.defineProperty(proxy, 'a', description)
        console.log(proxy.a)

相比es5,es6的写法方便了很多,可以给多个属性同时设置代理而不用一次次的调用 Object.defineProperty

不仅仅是get

除了get,es6还提供了其他代理操作,如set、apply、has等...具体操作请参考阮老师的教程

阮一峰《ECMAscript6入门)