ES6学习笔记三(proxy和reflect)
proxy用法
// 代理
{
let obj={
time:'2017-03-11',
name:'net',
_r:
}; 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; //当key值为name时会被修改value值
}else {
return target[key];
}
},
// 拦截key in object操作判断是否属于object的某个属性
has(target,key){
if(key==='name'){
return target[key]
}else {
return false;
}
},
// 拦截delete
deleteProperty(target,key){
if(key.indexOf('_') > -){
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('get',monitor.time); monitor.time='';
monitor.name='mukewan';
console.log('set',monitor.time,monitor); //set 2018-03-11 Proxy {time: "2017-03-11", name: "mukewan", _r: 123} console.log('has','name' in monitor,'time' in monitor); //true false // delete monitor.time;
// console.log('delete',monitor); //还是存在,没被删掉 // delete monitor.time;
// console.log('delete',monitor); // delete monitor._r这一项;
// console.log('delete',monitor); //发现被删除了_r这一项 console.log('ownKeys',Object.keys(monitor)); //["name", "_r"] time被保护
}
Reflect
Reflect用法跟Proxy一样,他有的方法他都有,使用起来更简单
{
let obj={
time:'2017-03-11',
name:'net',
_r:
};
console.log('Reflect get',Reflect.get(obj,'time'));
Reflect.set(obj,'name','mukewan');
console.log(obj);
console.log('has',Reflect.has(obj,'name'));
}
应用场景 数据校验
{
function validator(target,validator){
return new Proxy(target,{
_validator:validator,
set(target,key,value,proxy){
if (target,key,value,proxy) {
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>
},
mobile(val) {
}
}
class Person {
constructor(name,age){
this.name=name;
this.age=age;
return validator(this,personValidators)
}
}
const person=new Person('lilei',);
console.log(person);
person.name='Han mei mei';
console.log(person);
}
ES6学习笔记三(proxy和reflect)的更多相关文章
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记(11)----Proxy
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Proxy1.概述 Proxy可以用来修改对象的默认操作 let obj = {na ...
- ES6学习笔记三:Symbol、Set、Map
一:Symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(Boolean). ...
- ES6学习笔记(三)——数值的扩展
看到这条条目录有没有感觉很枯燥,觉得自己的工作中还用不到它所以实在没有耐心看下去,我也是最近得闲,逼自己静下心来去学习去总结,只有在别人浮躁的时候你能静下心来去学去看去总结,你才能进步.毕竟作为前端不 ...
- ES6学习笔记三
1.Symbol ES5 的对象属性名都是字符串,这容易造成属性名的冲突.如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突.这就是 ES6 引入Symbol的原因 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
随机推荐
- python django基础二URL路由系统
URL配置 基本格式 from django.conf.urls import url #循环urlpatterns,找到对应的函数执行,匹配上一个路径就找到对应的函数执行,就不再往下循环了,并给函数 ...
- jQuery图片灯箱和视频灯箱
在一些前端页面中经常需要文件上传,为了美观,我们经常做一个灯箱来显示我们选择的文件, 而不是简单的input标签. html 代码:这个是多图片上传 <div class="layui ...
- log4j日志文件名与行号显示乱码? 问号? 参数问号? 日志问号?【转】【补】
log4j本来设置了要打印行号与文件名的,结果有的能打印出来,有的却是乱码,查了些文档之后才发现,原来打印问题是因为编绎时没有编绎进去调试信息,所以没办法打印,好像有的系统又会显示(Unknown S ...
- Oracle存储过程procedure in、out、in out 模式参数【不发布,纯转】
Oracle存储过程procedure in.out.in out 模式参数 Oracle存储过程基本语法介绍 注意存过不会自动提交,需要在存过本身添加commit; rollback;等语句
- HDU - 6393 Traffic Network in Numazu(树链剖分+基环树)
http://acm.hdu.edu.cn/showproblem.php?pid=6393 题意 给n个点和n条边的图,有两种操作,一种修改边权,另一种查询u到v的最短路. 分析 n个点和n条边,实 ...
- ZOJ - 3450 Doraemon's Railgun (dp)
https://vjudge.net/problem/ZOJ-3450 题意 一座位落(X0,Y0)的城市将遭受n个敌人的摧残.现在我们手上有某科学的超电磁炮,每次攻击都是一条射线,对于共线的敌人,必 ...
- internet信息服务(iis)无法删除的解决方法
internet信息服务(iis)无法删除的解决方法: 1.进入控制面板: 2.然后点击添加删除程序: 3.接着点击“添加/删除windows组件”: 4.点击“internet信息服务(iis)”, ...
- 观察者模式--java
写在前面 钩子函数.注册函数.回调函数,他们的概念其实是一样的. 观察者模式,又可以称之为发布-订阅模式,观察者,顾名思义,就是一个监听者,类似监听器的存在,一旦被观察/监听的目标发生的情况,就会被监 ...
- 解决svn检出后不显示图标的问题
解决svn检出后不显示图标的问题: 此文经过个人验证,可以解决TortoiseSVN图标显示异常问题: 问题出现原因:Windows Explorer Shell 支持 Overlay Icon 最多 ...
- JS数据结构库
lodash https://lodash.com/docs#now https://lodash.com/ A modern JavaScript utility library deliverin ...