ES6——Proxy（代理）、Reflect（反射）

Proxy（代理）

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

语法

new Proxy(被代理对象,处理函数)

常用方法

           get(被代理对象,key)   代理对象属性读取    set(被代理对象,key，value)   代理对象属性设置           has(被代理对象,key)   拦截key in object操作deleteProperty(被代理对象,key)   拦截删除操作          ownKeys(被代理对象)    拦截Object.keys                                   Object.getOwnPropertySymbols                                    Object.getOwnPropertyNames

实例

//供应商let obj = {    time: '2017-08-31',    name: 'Tim',    _r: 123};//代理商let monitor = new Proxy(obj,{    monitor = new Proxy(obj,{        //代理读取对象属性        get(target,key){            //当读取对象属性时，将所有2017替换成2018            return target[key].replace('2017','2018')        },        //代理设置对象属性        set(target,key,value){            //只有key值是name的时候，才允许修改；否则返回原来的值。            if(key==='name'){            return target[key]=value;            }            else{                return target[key];            }        },        //拦截key in object操作        has(target,key){            //只有key值是name的时候，才返回true；否则返回false。            if(key==='name'){                return target[key];            }            else{                return false;            }        },        //拦截删除操作        deleteProperty(target,key){            //只有key值以“_”开头，才允许删除。            if(key.indexOf('_') = 0){                delete target[key];                return true;            }            else{                return target[key]            }        },         //拦截Object.keys, Object.getOwnPropertySymbols, Object.getOwnPropertyNames        ownKeys(target){             //使用数组的filter方法过滤掉time属性，不暴露出来            return Object.keys(target).filter(item=>item!='time')        }}//读取console.log('读取操作',monitor.time);   //2018-08-31//设置monitor.time = '2019';  //设置失败monitor.name = 'Chen';  //设置成功console.log('设置操作',monitor.time,monitor.name);  //2018-08-31  Tim//has in object操作console.log('has','name' in monitor);  // trueconsole.log('has','time' in monitor);  // false//删除操作delete monitor.time; //并没有成功console.log('删除操作', monitor);  //time: '2017-08-31', name: 'Tim', _r: 123//遍历属性操作console.log(Object.keys(monitor));  // name, _r

Reflect（反射）

将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。

修改某些Object方法的返回结果，让其变得更合理。

让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

常用方法

           get(被代理对象,key)   读取对象属性    set(被代理对象,key，value)   设置对象属性           has(被代理对象,key)   相当于key in objectdeleteProperty(被代理对象,key)   删除

注意，Reflect.set会触发Proxy.defineProperty拦截。

实例

 let obj = {        time: '2017-08-31',        name: 'Tim',        _r: 123};//get读取操作console.log('Reflect get读取',Reflect.get(obj,'time'));//set设置操作Reflect.set(obj,'name','CCC');console.log(obj);  // time: '2017-08-31', name: 'CCC', _r: 123//has操作,相当于以前的key in obj console.log('Reflect has',Reflect.has(obj,'name');  // true//删除const myObj = { foo: 'bar' };Reflect.deleteProperty(myObj, 'foo');

Proxy和Reflect配合使用

{    //数据校验主程序    function validator(target,validator){                return new Proxy(target,{            _validator: validator,            set(target,key,value,proxy){                //判断当前对象是否有这个key值                if(target.hasOwnProperty(key)){                    //执行校验条件函数                    let va = this._validator[key];                    //是否符合条件                    if(!!va(value)){                        return Reflect.set(target,key,value,proxy)                    }                    else{                        throw Error(`不能设置${key}为${value}`)                    }                }                else{                    throw Error(`${key} 不存在`)                }            }        })    }    //校验条件函数    const personValidators = {        name(val){            return typeof val === 'string'        },        age(val){            return typeof val === 'number'  && val > 18        }    }    //类    class Person{        constructor(name,age){            this.name = name;            this.age = age;            return validator(this,personValidators)        }    }    const person = new Person('xiaoming',30);    console.log(person);  // {name: 'xiaoming' , age: 30}    person.name=38; // 设置失败，因为name需要是一个字符串    person.age=38;  // 设置成功}