ES6深入浅出-13 Proxy 与 Reflect-1.Reflect 反射

Posted wangjunwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6深入浅出-13 Proxy 与 Reflect-1.Reflect 反射相关的知识,希望对你有一定的参考价值。

阮一峰  http://es6.ruanyifeng.com/#docs/reflect
MDN有一些简陋的介绍 https://developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Global_Objects/Reflect

技术图片

不推荐直接学es6,学习要梯子型。今天要学的Proxy,可能会在自己的框架内用到。平时基本是用不到的
技术图片
技术图片

技术图片

这个知识点是nodeJs的
技术图片

技术图片

MDN的文档更简单 还不如阮一峰的文章。
先过一边Reflect的API。说任何的需求都需要更多的知识来补充。
把Proxy搞清楚就行了。

先来解释下什么是反射
反射是虚的不是实体。相当于一个虚的拷贝。

技术图片
一共有13个方法
技术图片

首先来看get方法
技术图片
用反射的get方法获取obj这个对象的name的值。
技术图片
通过myObject.baz可以获取到值,如果想让他的baz运行在另一个对象上。
技术图片
第二个对象没有baz 
技术图片
需求是在没有baz的对象上调用baz
技术图片
结果返回8
技术图片
用es5的方式 call方法调用 但是会报错。baz是一个属性并不是一个函数。所以不能call
技术图片

不用reflect完整类似需求。

前提是c是一个函数。所以可以直接call
技术图片

总结 get的两种用法

1是两个参数, 2是三个参数的
技术图片

set

通过set改变了name的值
技术图片

技术图片


技术图片

把set bar反射到第二个对象上

技术图片
技术图片


设置为2
技术图片

apply


技术图片
求两个数的最小值。
技术图片
接收n个参数...args 拿到参数后会去调用Math.min,但是是通过apply的方式去调用。调用的时候要传一个this就是Math,当然也可以传this。后面的args就是我们要传的参数。
技术图片

用reflect.apply

知乎上有个人写的例子不错
https://zhuanlan.zhihu.com/p/24778807

第二个参数可有可无, 这里我们就传undefined

技术图片

下面是三种方式,求最小值。
技术图片

技术图片

那么为什么不直接用Math.min.apply呢?
技术图片

技术图片

做一个假设。左边的语法不是合法的。
技术图片
理解为对象的方法都变成Reflect的方式,但是还能额外接收一个参数receiver

再来看这些方法 都可以理解为用target.apply
技术图片

construct


技术图片

技术图片


技术图片

proxy


proxy会经常用到Reflect
 

结束

42分结束


 

以上是关于ES6深入浅出-13 Proxy 与 Reflect-1.Reflect 反射的主要内容,如果未能解决你的问题,请参考以下文章

es6代理 proxy 学习

ES6系列_13之Proxy进行预处理(简单学习)

ES6的Reflect对象

ES6——Proxy与Reflect

es6 Reflect 与 Proxy

@芥末的糖 ---------- ES6---Proxy与Reflect 实现重载(overload)