{
let obj={
time:'2017-03-11',
name:'net',
_r:123
};
 
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;
}else{
return target[key];
}
},
// 拦截key in object操作
has(target,key){
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){
return Object.keys(target).filter(item=>item!='time')
}
});
 
console.log('get',monitor.time);
 
monitor.time='2018';
monitor.name='mukewang';
console.log('set',monitor.time,monitor);
 
console.log('has','name' in monitor,'time' in monitor);
 
// delete monitor.time;
// console.log('delete',monitor);
//
// delete monitor._r;
// console.log('delete',monitor);
console.log('ownKeys',Object.keys(monitor));
 
}
 
{
let obj={
time:'2017-03-11',
name:'net',
_r:123
};
 
console.log('Reflect get',Reflect.get(obj,'time'));
Reflect.set(obj,'name','mukewang');
console.log(obj);
console.log('has',Reflect.has(obj,'name'));
}

ES6初识-Proxy和Reflect的更多相关文章

  1. es6之proxy和reflect

    一.proxy //Proxy和Reflect //供应商 let obj={ time:"2017-11-21", name:"net", _r:123 } ...

  2. es6之Proxy,Reflect

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...

  3. ES6的Proxy和Reflect

    Proxy 有一个原始的数据对象,通过代理出来一个新的对象,用户操作的是这个新的对象 { let obj ={ time:'2018-01-01', name:'lx' , _r:123 } let ...

  4. ES6入门:数据劫持、Proxy、Reflect

    什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...

  5. 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

    利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说 ...

  6. ES6(Proxy 和 Reflect)

    Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’   反射的是Object 2.适 ...

  7. 005-Symbol、Proxy、Reflect

    1.Symbol:http://es6.ruanyifeng.com/#docs/symbol 2.Proxy:http://es6.ruanyifeng.com/#docs/proxy Proxy ...

  8. babel 不能统编译Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise的问题

    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...

  9. ES6学习笔记(12)----Reflect

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Reflect 1.概述:Object对象的内部方法都能在Reflect中找到,同时Reflec ...

随机推荐

  1. MySQL · 引擎特性 · InnoDB index lock前世今生

    http://mysql.taobao.org/monthly/2015/07/05/ MySQL · 引擎特性 · InnoDB index lock前世今生 前言 InnoDB并发过程中使用两类锁 ...

  2. [转]how can I change default errormessage for invalid price

    本文转自:http://forums.asp.net/t/1598262.aspx?how+can+I+change+default+errormessage+for+invalid+price I ...

  3. mac os 和 ubuntu 上测试工具check-0.9.10的安装

    由于工作需要,要使用check 这个单元测试工具. 首先,说一说在Mac10.9上面的安装.我是直接在官网(http://check.sourceforge.net)上下载源码包. 1,解压 2,进入 ...

  4. B树和B+树对比,为什么MySQL数据库索引选择使用B+树?

    一 基础知识 二叉树 根节点,第一层的节点 叶子节点,没有子节点的节点. 非叶子节点,有子节点的节点,根节点也是非叶子节点. B树 B树的节点为关键字和相应的数据(索引等) B+树 B+树是B树的一个 ...

  5. vue将数据绑定到属性中

    *必须使用[] <tr v-for="(p,index) in prodects"> @*v-bind:class="styleType(index)&quo ...

  6. 封装WebService的APM为Async、Await模式利于Asp.Net页面调用

    Wcf针对Async.Await指令直接可以返回Task<T>结果,但是老旧的系统中还是会有很多是在用Soap的Webservice.直接在Asp.Net页面调用APM方法确实比较麻烦,其 ...

  7. [Java][Servlet] Failed to destroy end point associated with ProtocolHandler ["http-nio-8080"]

    Background: Servlet version 3.1(3.0之后就有了@WebServlet注解) Error 严重: Failed to destroy end point associa ...

  8. DOS常见命令

    dir: 显示一个目录中的文件和子目录 md: 创建目录 rd: 删除目录 cd: 进入指定目录 cd..: 退回到上级目录 cd\: 退回到根目录 del: 删除文件 set: 显示.设置.删除cm ...

  9. Spring课程 Spring入门篇 2-2 Spring注入方式

    课程链接: 本节主要讲了以下两块内容: 1 xml两种注入方式 2 注入方式代码实现 3 特别注意 1 xml两种注入方式 构造注入和set注入 2 注入方式代码实现 2.1 set注入方式的实现 实 ...

  10. (生产)axios - 请求接口

    参考:https://www.awesomes.cn/repo/mzabriskie/axios axios 介绍 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中 ...