ES6中Proxy和Reflect的示例分析-创新互联
这篇文章主要介绍ES6中Proxy和Reflect的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联 - 成都电信服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,成都电信服务器托管,西南服务器托管,四川/成都大带宽,机柜大带宽、租用·托管,四川老牌IDC服务商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} }
以上是“ES6中Proxy和Reflect的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:ES6中Proxy和Reflect的示例分析-创新互联
文章地址:http://pwwzsj.com/article/dpeice.html