ES6中Proxy和Reflect的介绍(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于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} }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » ES6中Proxy和Reflect的介绍(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情