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

反射: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,arguments)
 }
})
sunProxy(23,32)

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

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

然后:

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

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

是不是很有趣呢大家。

总结

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)