es6 학습 노트 정리 (11) Proxy 및 Reflect

Proxy의 개념 및 기본 사용
Proxy 에이전트는 사용자와 대상 사이의 가장 진실한 층을 연결하고 진실한 대상을 보이지 않습니다.사용자가 가져온 대상과 대상은 직접 조작할 수 없으며 에이전트를 거쳐야 한다.대리 차원에서 서로 다른 업무 논리에 따라 상응하는 처리를 할 수 있다.

let obj = {
    time:'2018-03-09',
    name:'asd',
    _r:123
};

let people = new Proxy(obj,{
    //         
    get(target, key){
        return  target[key].replace('2018','2019');
    },
    //         
    set(target, key, value){
        //    name  ，target  obj
        if(key === 'name'){
            return target[key] = value;
        }else{
            return target[key];
        }
    },
    //  key in object   
    //               
    has(target, key){
        //   name  
        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.key, Object.getOwnPropertySymbols,Object.getOwnpropetyNames
    ownKeys(target){
        return Object.keys(target).filter(item=>item != 'time');
    }
});

console.log('get', people.time);//2019-03-09

people.time = '2019';
console.log('set1', people.time);//2019-03-09

people.name = 'qwe';
console.log('set2', people.time, people);//2019-03-09 Proxy {time: "2018-03-09", name: "qwe", _r: 123}

console.log('has','name' in people,'time' in people);//has true false

console.log('ownKeys', Object.keys(people));//ownKeys (2) ["name", "_r"]

delete people.time;
console.log('delete',people);//delete Proxy {time: "2018-03-09", name: "qwe", _r: 123}     

delete people._r;
console.log('delete',people);//delete Proxy {time: "2018-03-09", name: "qwe"}
}

Reflect의 개념 및 기본 사용
Reflect는 Proxy의 사용 방법과 마찬가지로 Proxy의 방법도 있고 Reflect도 모두 있으며 이름과 사용법도 같다.

let obj = {
    time:'2018-03-09',
    name:'asd',
    _r:123
};

console.log('Reflect get',Reflect.get(obj, 'time'));//Reflect get 2018-03-09
Reflect.set(obj,'name','qwe');
console.log('Reflect set', obj);//Reflect set {time: "2018-03-09", name: "qwe", _r: 123}

console.log(Reflect.has(obj,'name'));//true

Proxy 및 Reflect의 해당 장면
실제 운용: 데이터 검사, 예를 들어 핸드폰 번호, 메일박스 등

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(value){
        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('zhangsan', 18);
//            person.name = 123;//       ，          
person.age = 80;
console.log(person);//Proxy {name: "zhangsan", age: 80}

전통적인 방법과 비교: 전통적인 것은 모두 수정할 때 판단해야 하는데 지금은 에이전트를 통해 처리하여 코드의 복용성과 유지보수성을 향상시켰다