浅谈es6语法 (Proxy和Reflect的对比)

如下所示:

{ 

 //原始对象
 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); //2018-03-11
 //操作
 monitor.time='2018';
 monitor.name='mukewang';
 console.log('set',monitor.time,monitor);//2018-03-11;{time: "2017-03-11", name: "mukewang", _r: 123}

 console.log('has','name' in monitor,'time' in monitor);//true;false

 delete monitor.time;
 console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang", _r: 123}
 //
 delete monitor._r;
 console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang"}

 console.log('ownKeys',Object.keys(monitor));//["name", "_r"]

}

{
 let obj={
 time:'2017-03-11',
 name:'net',
 _r:123
 };

 console.log('Reflect get',Reflect.get(obj,'time'));//get 2017-03-11
 Reflect.set(obj,'name','mukewang');
 console.log(obj);//{time: "2017-03-11", name: "mukewang", _r: 123}
 console.log('has',Reflect.has(obj,'name'));//true
}

以上这篇浅谈es6语法 (Proxy和Reflect的对比)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • ES6中Proxy与Reflect实现重载(overload)的方法

    本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法.分享给大家供大家参考,具体如下: Proxy与Reflect实现重载(overload) 从语法角度讲JavaScript不支持重载.原因很简单,JS中函数可以传入任意类型.任意个数的参数,通通可以通过在函数内使用this.arguments获得.这样,就无法实现同名函数参数列表不同实现不同功能.当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作.但是,我认为这不能叫做重载. ES6带来了

  • 浅谈es6语法 (Proxy和Reflect的对比)

    如下所示: { //原始对象 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')

  • 浅谈es6中的元编程

    何为元编程? 「编写能改变语言语法特性或者运行时特性的程序」.换言之,一种语言本来做不到的事情,通过你编程来修改它,使得它可以做到了,这就是元编程. meta-programming元编程中的 元 的概念可以理解为 程序 本身."元编程能让你拥有可以扩展程序自身能力 举个例子: if (a == 1 && a == 2 && a == 3) { console.log("done"); } 怎样才能让这个条件满足,输出done.按照正常的逻辑是

  • 浅谈ES6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. 数组.map() 返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map let arr=[1,2,3,4,3,2,1,2]; let newArr=arr.map((val

  • javascript学习笔记_浅谈基础语法,类型,变量

    基础语法.类型.变量 非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或非数字值时,返回true; 3.用isFinity(x),在x不是NaN.Infinity.-Infinity时返回true; 虽然(字符串.数字.布尔值)不是对象,他们的属性是只读的,但也可以像操作对象一样来引用他们的属性和方法,原理: javascript构造一个(String.Number.Boo

  • 浅谈es6中export和export default的作用及区别

    作用: export和export default实现的功能相同,即:可用于导出(暴露)常量.函数.文件.模块等,以便其他文件调用. 区别: 1.export导出多个对象,export default只能导出一个对象 2.export导出对象需要用{ },export default不需要{ },如: export {A,B,C}; export default A; 3.在其他文件引用export default导出的对象时不一定使用导出时的名字.因为这种方式实际上是将该导出对象设置为默认导出

  • 浅谈PHP语法(1)

    作者:华红狼 正文:   <谈谈HTML语法>一文,我已经介绍了基本的HTML语法.可以编出一个静态的Web页,可动态交互信息是很重要的.如一些网站的会员制崐的会员注册.登录都需后端程序的运行.很多网站所用的CGI程序主要用Perl.ASP.Java.PHP编写,而我们所要用的就是PHP.它是完全免崐费的,这就要感谢那些默默无闻的编程人员了.PHP的结构类似于C语言,这可是应证了C语言里提的"一处学习,到处编程".相信学过C崐语言的人可很容易上手PHP的.还是先介绍一些PH

  • 浅谈ES6 模板字符串的具体使用方法

    写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了.虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心.在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 . 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习.欢迎大家积极纠错,留言探讨. 模板字符串(template strings) 用法 // 普通字符串 `In Jav

  • 浅谈javascript语法和定时函数

    一.JavaScript基本语法. (一)数据类型与变量类型. 整数,小数,布局,字符串,日期时间,数组 强制转换: parseInt() parseFloat() isNaN() (二)数组 var 数组名 = new Array([长度]); //"假冒"数组 a.length-长度 a[下标] = 值. a[下标] (三)函数 复制代码 代码如下: function 函数名(形参) { } function ShowStr(a) { } 二.DOM操作 DOM - Documen

  • 浅谈es6 javascript的map数据结构

    本文介绍了es6 javascript的map数据结构,分享给大家,具体如下: Map 结构的目的和基本用法 JavaScript 的对象( Object), 本质上是键值对的集合( Hash 结构), 但是传统上只能用字符串当作键. 这给它的使用带来了很大的限制. var data = {}; var element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElem

随机推荐