ES6的Proxy和Reflect
Proxy 有一个原始的数据对象,通过代理出来一个新的对象,用户操作的是这个新的对象
{
let obj ={ time:'2018-01-01', name:'lx' , _r:123 }
let monitor = new Proxy( obj , {
get(target , key){ //读取
return target[key].replace('2018','2017') //把值的2018改成2017
}
set(target , key , value){ //设置
if( key === 'name'){ return target[key] = value } //只允许修改name
else{ return target[key] }
}
has(target , key){ //拦截key in object
if(key === 'name'){ return target[key] }
else{ return false }
}
deleteProperty(target,key){ //拦截delete
if(key.indexOf('_')>-1){ delete target[key] ; return true}
else{ target[key] }
}
ownKeys(target){//拦截Object.keys,Objects.getOwnPropertySymbols,Object.getOwnPropertyNames等
return Object.keys(target).filter(item =>item!='time')
}
})
//用户看到和操作的是monitor
console.log('get' , monitor.time) //2017-01-01
monitor.time='2019'
console.log('set', monitor.time) //2017-01-01
console.log('has', 'name' in monitor , 'time' in monitor) //true false
delete monitor.time
console.log('delete', monitor) //time依然存在于monitor
console.log('ownkeys', Objects.keys(monitor)); //,保护time不显示time
}
Reflect
{
let obj ={ time:'2018-01-01', name:'lx' , _r:123 };
console.log( "get" , Reflect.get(obj,'time') ) //"2018-01-01"
Reflect.set(obj,'name','lmx') ;
console.log(obj) //{time: "2018-01-01", name: "lmx", _r: 123}
console.log("has", Reflect.has(obj,'name') ) /true
}
//尽量不对object操作,而是使用Reflect来操作obj
例子:
obj.hasOwnProperty() 指出一个对象是否具有指定名称的属性
两个叹号主要是处理null/undifined/0/""等值,都能转换成布尔值
{
function validator(target,validator){
return new Proxy(target,{
_validator:validator,
set(target,key,value,Proxy){
//判断当前对象是否有key值
if(target.hasOwnProperty(key) ){
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 personvalidator={
name(val){ return typeof val===’string’ } ,
age(val){ return typeof val===’number’ && val>18}
}
class Person{
constructor(name,age){
this.name = name;
this.age = age;
return validator( this , personvalidator ) //返回的是个Proxy对象
}
}
const person = new Person(‘lx’,30);
console.log(person)
person.name = 48 //根据代码throw一个错误
}

ES6的Proxy和Reflect的更多相关文章
- es6之proxy和reflect
一.proxy //Proxy和Reflect //供应商 let obj={ time:"2017-11-21", name:"net", _r:123 } ...
- es6之Proxy,Reflect
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...
- ES6初识-Proxy和Reflect
{ let obj={ time:'2017-03-11', name:'net', _r:123 }; let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get( ...
- 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty() 换成了Proxy+Reflect. 话不多说 ...
- ES6入门:数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- ES6(Proxy 和 Reflect)
Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’ 反射的是Object 2.适 ...
- 005-Symbol、Proxy、Reflect
1.Symbol:http://es6.ruanyifeng.com/#docs/symbol 2.Proxy:http://es6.ruanyifeng.com/#docs/proxy Proxy ...
- babel 不能统编译Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise的问题
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...
- ES6学习笔记(12)----Reflect
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Reflect 1.概述:Object对象的内部方法都能在Reflect中找到,同时Reflec ...
随机推荐
- 【原创】大叔经验分享(5)oozie提交spark任务如何添加依赖
spark任务添加依赖的方式: 1 如果是local方式运行,可以通过--jars来添加依赖: 2 如果是yarn方式运行,可以通过spark.yarn.jars来添加依赖: 这两种方式在oozie上 ...
- PID控制器开发笔记之十三:单神经元PID控制器的实现
神经网络是模拟人脑思维方式的数学模型.神经网络是智能控制的一个重要分支,人们针对控制过程提供了各种实现方式,在本节我们主要讨论一下采用单神经元实现PID控制器的方式. 1.单神经元的基本原理 单神经元 ...
- springboot配置详解
springboot配置详解 Author:SimpleWu properteis文件属性参考大全 springboot默认加载配置 SpringBoot使用两种全局的配置文件,全局配置文件可以对一些 ...
- eclipse 报错问题:java.lang.ClassNotFoundException:
解决方法:https://www.cnblogs.com/whatlonelytear/articles/5921978.html
- NOIP2018普及初赛解析
2018年第二十四届全国青少年信息学奥林匹克联赛初赛普及组真题解析 一.单项选择题 1. 以下哪一种设备属于输出设备:(D) A.扫描仪 _B.键盘C. 鼠标 _D. 打印机 解析:送分题,前三个都是 ...
- 将Emacs Org任务树导出至Freeplane思维导图
Emacs Org mode作为实施GTD方法的任务与项目管理工具是极为强大和有效的.尽管如此,我在使用过程中亦发现了一个因Emacs文本操作模式而难以解决的情况,即对于具有复杂结构与大量细节的项目, ...
- Jupyter-notebook 不自动打开浏览器解决办法
我的系统是Manjaro Linux, 一直以来,我使用jupyter-notebook的办法都是使用命令sudo jupyer-notebook --allow-root,然后手动复制粘贴URLS到 ...
- css 制作菜单
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- LCA(包含RMQ)
今天看了RMQ问题 ST的实质是动归 于是我来回顾一下LCA(的各种写法) 因为每次考试发现自己连LCA都写不好 费时 First of all, RMQ板子: [一维] #include<bi ...
- __x__(41)0909第五天__长表格
长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...