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面向对象继承方法经典实现
Aug 20 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php短址转换实现方法
2015/02/25 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python工厂函数用法实例分析
2018/05/14 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
学生打架检讨书
2014/10/20 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL