ES6 Proxy/Reflect 浅析

来源：互联网发布：sql查询成绩相同语句编辑：程序博客网时间：2024/06/05 17:58

ES6 Proxy/Reflect

Proxy 拦截器

proxy是es6的新特性，简单来讲，即是对目标对象的属性读取、设置，亦或函数调用等操作进行拦截（处理）。

let proxy = new Proxy(target,handle)

target

一个proxy代理对象由两部分组成target/handle。其中target为目标对象，可以为一个空对象即（target={}），也可以是一个含有属性和方法的对象（target={foo:1,bar:2}）,在进行let proxy=new Proxy(target,handle)的操作后，新的proxy对象会对target进行“浅拷贝”,即proxy、target两个对象会相互影响。即：

let target = { _prop: 'foo', prop: 'foo' };let proxy = new Proxy(target, handler);proxy._prop = 'bar';target._attr = 'new'console.log(target._prop) // 'bar'console.log(proxy._attr) //'new'

ES5 getter/setter

handle是实际运行的处理方法，Proxy的handle一共有13种方法，以最简单常用的get/set方法为例。在ES5中，对象就有get/set的访问器（低版本浏览器不支持），它们的作用是在对象进行属性的读写时，进行额外的操作。例如person对象下的age属性，当它不在0-100之间时，给这个age的值重置为0。

var person = {                get age(){                    console.log('getter')                    return this._age;//这里千万不能return this.age,会出错                },                set age(val) {                    console.log('setter')                    this._age = val < 100 && val > 0 ? val:0                    //这边不需要返回值，在触发set方法后还会触发get方法，且set方法不允许单独存在                }            };    person.age = 10 //10    person.age = 101 //0    person.age = 'age' //0

在进行赋值操作时，会先触发set、后触发get，进行如person.age++的操作时，set、get的触发顺序为：get=>set=>get。以上就是ES5的getter/setter访问器。

handle

在 Proxy中的handle中get、set方法也类似。即

   let handler = {                get (target, key){                    return target[key]                },                set (target, key, value) {                    if (key === 'age') {                        target[key] = value > 0 && value < 100 ? value : 0                    }                    return true;//必须有返回值                }            };            let target = {};            let proxy = new Proxy(target, handler);            proxy.age = 22 //22

其中get可接受三个参数（target，key, receiver）,target为目标对象，key为属性名，receiver为实际接受的对象，默认为本例中新建的proxy，如果单独指出一个对象，可使指出对象受到相同的方法作用。例如：

   let _proxy={};   let handler = {                get (target, key , receiver){                    receiver=_proxy;                    target[key]='test';                    return Reflect.get(target,key,receiver);                },                set (target, key, value) {                    if (key === 'age') {                        target[key] = value > 0 && value < 100 ? value : 0                    }                    return true;//必须有返回值                }            };            let target = {};            let proxy = new Proxy(target, handler);            proxy.age            console.log(_proxy.age) // test

set方法多一个value参数，为属性值，即 proxy.age=1，中的1。

与ES5 setter/getter访问器的区别是，在proxy中，proxy.age=1,只会执行 set的方法，而不是像ES5中的setter，会先执行set，后执行get。且proxy中的set必须有返回值，ES5的setter不用，这也正是因为在他之后还会执行getter,所以不需要。

Reflect 反射

Reflect与ES5的Object有点类似，包含了对象语言内部的方法，Reflect也有13种方法，与proxy中的方法一一对应。Proxy相当于去修改设置对象的属性行为，而Reflect则是获取对象的这些行为。
还是刚才的例子：

 let _proxy = {} let handler = {                get (target, key,recive){                    return Reflect.get(target,key,recive)                },                set (target, key, value) {                    if (key === 'age') {                        target[key] = value > 0 && value < 100 ? value : 0                    }                    return Reflect.set(target,key,value,_proxy);                }            };  let target = {};  let proxy = new Proxy(target, handler);  proxy.age = 33  console.log(_proxy.age)//33

Reflect 也可与ES5的setter/getter配合使用,例如：

var myObject = {  foo: 1,  bar: 2,  get baz() {    return this.foo + this.bar;  },};var myReceiverObject = {  foo: 4,  bar: 4,};Reflect.get(myObject, 'baz', myReceiverObject) // 8

其余方法与Proxy均相同，区别即是，设置和获取的关系。

Proxy和Reflect还有很多方法，比如apply作为操作对象函数时触发的方法，比如myObject =function(){
return “it’s Fn”}, myObject();会触发handle中的apply方法。还有触发has方法的_attr in obj等等共计13种方法，本次只以最简单的set、get方法来举例。

0 0