ES--6Proxy和Reflect

proxy代理

将原始数据代理,不能修改原始数据,通过代理的方式去修改数据。

{
    let obj={
        time:'2017-3-11',
        name:"net",
        _r:123
    };
    let monitor=new Proxy(obj,{
        //拦截对象属性的读取
        get(target,key){
            return target[key].replace('2017','2018')
        },
        //拦截对象设置属性
        set(target,key,value){
            if(key=='name'){
                return target[key]=value
            }else {
                return target[key]
            }
        },
        //拦截key in obj
        has(target,key){
            if(key==='name'){
                return target[key]
            }else{
                return false;
            }
        },
        //拦截delete
        deleteProperty(target,key){
            if(key.indexOf('_')>-1){
                delete target[key];
                return true;
            }else{
                return target[key]
            }
        },
        //拦截Object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames
        ownKeys(target){
            return Object.keys(target).filter(item=>item!='time')
        }
    });
    console.log(Object.keys(monitor))
    //["name", "_r"]
    //monitor
    console.log(monitor.time)
    // 2018-3-11
/*    monitor.time='2018';
    monitor.name='3333';*/
    console.log(monitor.time)
    //2018-3-11
    console.log(monitor)
    //Proxy {time: "2017-3-11", name: "3333", _r: 123}
    console.log('name' in monitor , 'time' in monitor)
    //true false
    delete monitor.time;
    console.log(monitor)
    //Proxy {time: "2017-3-11", name: "net", _r: 123}
    delete monitor._r;
    console.log(monitor)
    //Proxy {time: "2017-3-11", name: "net"}
}

Reflect

{
    let obj={
        time:'2017-3-11',
        name:"net",
        _r:123
    };
    console.log(Reflect.get(obj,'time'))
    //2017-3-11
    Reflect.set(obj,'name','re')
    console.log(obj)
    //{time: "2017-3-11", name: "re", _r: 123}
    console.log(Reflect.has(obj,'time'))
    //true
}

应用

Proxy可以将业务与逻辑更好的分离

{
    function validator(target,validator) {
        return new Proxy(target,{
            _validator:validator,
            set(target,key,value,proxy){
                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('liubin',20);
    console.log(person)
    //Proxy {name: "liubin", age: 20}
    //person.name=48;
    //不能设置name到48
    person.name='48';
    console.log(person)
    //Proxy {name: "48", age: 20}
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容