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:也 ...
 
随机推荐
- Reference-TMB
			
Paper Name:Targeted Next Generation Sequencing Identifies Markers of Response to PD-1 Blockade Adress ...
 - jvm垃圾收集器与内存分配策略
			
一.垃圾回收 1.对象是否已经变为垃圾 1.1.引用计数法:给对象添加一个引用计数器,每当有地方引用它时,计数器就加1:当引用失效时,计数器值就减1:任何时刻计数器为0的对象就是不可能再被使用的. 这 ...
 - Java Web之上传文件
			
本篇文章你会学到 1. Apache FileUpload组件 2.上传文件保存的路径和名称问题 3.缓存大小和临时目录 4.控制文件上传的格式 先讲一个简单的例子,一个注册页面,有账号,邮箱,和头像 ...
 - 解决CDN传统方法引入Iview icon 不显示问题
			
因为需要字体文件,可以在github上下载. 将文件下载之后放到fonts文件夹下,fonts文件夹要与Iview.css在同级目录
 - 各种loading加载中gif图标
			
点击这里打包下载更多样式
 - golang channle 管道
			
管道的使用介绍 现在要计算 1-N 的各个数的阶乘,并且把各个数的阶乘放入到 map 中.最后显示出来.要求使用 goroutine 完成 package main import ( "fm ...
 - jQuery使用(八):运动方法
			
show().hide().toggle() 参数:null或(duration,easing,callblack) fadeIn().fadeout().fadeToggle().fadeTo() ...
 - 2016vijos 1-1 兔子的字符串(后缀数组 + 二分 + 哈希)
			
题意: 给出一个字符串,至多将其划分为n部分,每一部分取出字典序最大的子串ci,最小化 最大的ci 先看一个简化版的问题: 给一个串s,再给一个s的子串t,问能否通过将串划分为k个部分,使t成为划分后 ...
 - 伯克利SocketAPI(一) socket的C语言接口/最简单的服务器和对应的客户端C语言实现
			
1. 头文件 2. API函数 3. 最简单的服务器和对应的客户端C语言实现 3.1 server #include <sys/types.h> #include <sys/sock ...
 - springBoot中实现自定义属性配置、实现异步调用、多环境配置
			
springBoot中其他相关: 1:springBoot中自定义参数: 1-1.自定义属性配置: 在application.properties中除了可以修改默认配置,我们还可以在这配置自定义的属性 ...