5分钟快速看懂ES6中的反射与代理


Posted in Javascript onDecember 19, 2019

反射:Reflect

反射到底是个什么东西?

它的本质就是一个对象(JS内置的),里边有一些函数可供调用。

5分钟快速看懂ES6中的反射与代理

为什要叫做反射?

因为它能做的事情,和其他语言(Java、python等)中的反射很相似。其他语言中都叫做反射了,那就共鸣(降低学习成本?)

反射能做什么事情呢?

let animal = {
 name: "dog",
 age: 3
}
Reflect.get(animal, "name") // 传参为:对象, 属性名
// 等同于:
animal.name 

let say = function (type, sound) {
 console.log(`${type}的叫声是${sound}`)
}
Reflect.apply(say, null, ["猫", "喵喵"]) // 传参为:函数, this指向, 实参列表
// 等同于:
say("猫", "喵喵")

经过以上代码我们深刻的发现Reflect好像没什么用,非要说些什么的话,他把我们以前的基本操作(比如:obj.name)用调用函数的方式实现了一遍。对了这就是它的意义:减少JS语言魔法,让代码更加纯粹。

怎么说?

JS语言魔法:我们的操作看起来不太合理,超乎寻常,难以解释。

解释一波,Reflect.get(animal, "name")你看着个代码它又宽又长,看着好像我们要得到 animal 这个对象中 name 这个属性的值的意思。

再看看animal.name 震惊!只需要这样,就得到了对象中的属性的值,虽然学习过JS的伙伴们觉得很正常,但是我们不太能用语言去描述这段代码做了什么,这就是语言魔法的意思。

想必大家已经对反射有一定了解了,Reflect对象上还有一些其他方法。大家可以看文档研究一下怎么用,

代理:Proxy

代理到底是个什么东西?

我们都听过什么代理商、还有代理服务器之类的。比如哪代理服务器来说,我们不能直接访问到服务器,我们必须要去访问代理服务器,由代理服务器代替我们去访问服务器,服务器返回的数据,也要先返回给代理服务器,再由代理服务器返回给我们。

ES6中的代理也是这个意思,我们可以去代理一个对象类型的数据(函数、对象等),然后我们再去访问对象时,访问代理就好了。

为啥我们要访问代理?

因为代理对象给我们提供了修改底层实现的方式,也就是说我们可以在代理对象上进行一些操作,为我们访问对象制定一些规则。就像代理服务器可以过滤某些对服务器的访问等功能。

怎么操作?

Proxy的本质是一个构造函数,

new Proxy(obj, {
 // 一些规则
})

这样我们就构造出了一个obj对象的一个代理对象,第二个参数是一个对象它为访问obj对象制定了一些规章制度。

new Proxy(obj, {
 get(target, prop){
  // some code
  return Reflect.get(target, prop)
 }
})

这就是在创建代理对象是制定规则的场景,对比一下Reflect,是不是很想呢。确实反射经常配合Proxy使用

应用:

比如:

function sum(num1, num2){
 return num1 + num2;
}

现在我们为sum函数的传参制定一些规则:参数必需是number类型的

const sunProxy = new Proxy(sum, {
 apply(target, thisArgument, arguments) {
  arguments.forEach(item => {
   typeof item !== "number" && throw("参数类型非number")
  })
  return Reflect.apply(target, thisArgument, arguments)
 }
})
sunProxy(23, 32)

封装一下,搞一个通用类型出来

function funcProxy(func, ...types) 
 //执行完这个函数返回一个函数的代理,剩余参数是我们规定的传参类型
  return new Proxy(func, {
  apply(target, thisArgument, argumentsList) {
   types.forEach((type, index) => {
   // 循环判断每一项参数类型是否合法
    typeof argumentsList[index] !== type && throw("传参类型不符合")
      }
     })
   return Reflect.apply(target, thisArgument, argumentsList);
    }
   })
  }

然后:

const sumProxy = funcProxy(sum, "number", "number")
sumProxy(3, 5);

使用反射我们可以实现一些底层操作,代理可以为我们的调用制定规则。

是不是很有趣呢大家。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
d3.js实现图形拖拽
Dec 19 #Javascript
d3.js实现图形缩放平移
Dec 19 #Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
php jquery 多文件上传简单实例
2013/12/23 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python常用内置函数总结
2015/02/08 Python
Python字符串处理函数简明总结
2015/04/13 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
卖车协议书
2014/04/21 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
优秀员工推荐材料
2014/12/20 职场文书
违纪学生保证书
2015/02/27 职场文书
小爸爸观后感
2015/06/15 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python编程super应用场景及示例解析
2021/10/05 Python