首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6 Proxy/Reflect 浅析

ES6 Proxy/Reflect 浅析

作者头像
j_bleach
发布2019-05-26 21:44:20
4760
发布2019-05-26 21:44:20
举报
文章被收录于专栏:前端加油站前端加油站

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方法来举例。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年02月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ES6 Proxy/Reflect
    • Proxy 拦截器
      • target
      • ES5 getter/setter
      • handle
    • Reflect 反射
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档