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开发随笔一 preventDefault的必要
Nov 25 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
详解vue2.0模拟后台json数据
May 16 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
星际实力自我测试
2020/03/04 星际争霸
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
JNI的定义
2012/11/25 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
工伤赔偿协议书
2014/04/15 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
文体活动总结
2015/02/04 职场文书
毕业感言怎么写
2015/07/31 职场文书
python多线程方法详解
2022/01/18 Python