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 相关文章推荐
常用的jQuery前端技巧收集
Dec 24 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue实现数字滚动效果
Jun 29 Javascript
JS实现点击掉落特效
Jan 29 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
VFP与其他应用程序的集成
2006/10/09 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Django框架模板的使用方法示例
2019/05/25 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
详解python播放音频的三种方法
2019/09/23 Python
python打开使用的方法
2019/09/30 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
Python如何实现单例模式
2016/06/03 面试题
教师自荐信范文
2013/12/09 职场文书
远程培训的心得体会
2014/09/01 职场文书
给校长的一封检讨书
2014/09/20 职场文书
房产协议书范本
2014/10/18 职场文书
颐和园的导游词
2015/01/30 职场文书
技能培训通讯稿
2015/07/18 职场文书
python 中的@运算符使用
2021/05/26 Python
Java基础之this关键字的使用
2021/06/30 Java/Android
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技