ES6中Proxy和Reflect的介绍（代码示例）

Proxy代理

{
 // 原始对象，或者真实数据，可以理解为供应商
 let obj = {
 time: '2018-10-05',
 name: 'lucy',
 age: 16,
 _is: true
 };

 // 代理对象，可以理解为代理商，对用户来说，直接操作monitor，而不能直接操作obj
 let monitor = new Proxy(obj, {
 // 拦截对象属性的读取
 get(target, key) {
 return target[key].replace('2018', '2019');
 },
 // 拦截对象设置属性
 set(target, key, value) {
 // 只让用户修改name属性，其他的不允许修改
 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.keys Object.getOwnPropertySymbols, Object.getOwnPropertyNames
 ownKeys(target) {
 // 拦截了time属性
 return Object.keys(target).filter(item => item != 'time');
 }
 });
 console.log('get', monitor.time); // 2019-10-05
 monitor.time = '2020';
 monitor.name = 'can';
 console.log('set', monitor.time, monitor.name); // 2019-10-05 can
 console.log('has', 'name' in monitor, 'time' in monitor); // true false
 delete monitor.time;
 delete monitor._is;
 console.log(monitor); // Proxy {time: "2018-10-05", name: "can", age: 16}
 console.log('ownKeys', Object.keys(monitor)) // ["name", "age"]
}

Reflect反射

反射的是 object，Reflect的方法跟Proxy一样，都有get,set,has...

{
 let obj = {
 time: '2018-10-05',
 name: 'ahhh',
 age: 16,
 _is: true
 };
 console.log(Reflect.get(obj, 'time')); // 2018-10-05
 Reflect.set(obj, 'name', 'lxc');
 console.log(obj); // {time: "2018-10-05", name: "lxc", age: 16, _is: true}
 console.log(Reflect.has(obj, 'name')); // true
}

数据校验例子

{
 function validator(target, validator) {
 return new Proxy(target, {
 _validator: validator,
 // 对set进行拦截
 set(target, key, value, proxy) {
 if (target.hasOwnProperty(key)) {
 let va = this._validator[key]; // 拿到_validator配置好的方法
 if (!!va(value)) {
 // 允许修改
 return Reflect.set(target, key, value, proxy);
 } else {
 // 抛出异常
 throw Error(`不能设置${key}到${value}`);
 }
 } else {
 throw Error(`${key} 不存在`);
 }
 }
 });
 }

 const personValidators = {
 name(val) {
 // 如果name设置为字符串，则允许修改，否则抛出异常
 return typeof val === 'string';
 },
 age(val) {
 // 如果age设置为数值类型并且大于18，则允许修改，否则抛出异常
 return typeof val === 'number' && val > 18;
 }
 };

 class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 // 返回了一个Proxy对象，用户操作的并不是Person这个实例，而是这个实例的代理对象
 return validator(this, personValidators);
 }
 }

 const person = new Person('haha', 18);
 console.log(person); // Proxy {name: "haha", age: 18}

 // person.name = 46; // 不能设置name到46
 // person.age = 20; // 不能设置age到12
 // person.number = 111; // number 不存在

 person.name = 'yoyo';
 person.age = 20;
 console.log(person); // Proxy {name: "yoyo", age: 20}
}