Mickey's Blog ·

Proxy 和 Reflect

Proxy单词在这里的含义是代理,我们用过http代理我们都知道他的效果。今天我们说的es6的proxy,是对es6对象访问的代理。举个例子

image.png

这里创建了一个空对象,并对其设置了get和set两个行为的代理,这样当对象被访问或者编辑的时候,将会触发get和set两个函数,进而执行里面的动作(console)。效果如下

image.png

实际上上面的代码是proxy重载了.运算符用自己的行为覆盖了语言的原始定义,接管数据的访问和编辑。

通过proxy拦截对象,首先需要实例化proxy,new proxy的第一个参数是我们的目标对象,上面例子中是空对象,这么传参意味着如果不调用proxy实例,那么将无法访问原始对象。

我们写一个目标对象不为空的实例

image.png

首先我们声明对象liu,然后设置他的拦截器,每次set我们偷偷加100,然后通过ojb.a=1这个动作触发拦截器,最后查看liu,发现1已经悄悄变成了101。

同时如果做过vue项目的话我们会发现vue把proxy挂载到了每个对象自己的身上,这样proxy属性和其对应的对象就无需对应关系就可以管理了,真机智!

同时拦截器还支持多种拦截方式

image.png

image.png

如此如此新奇的拦截操作和如此多的拦截器给我们的编码提供了很多种可能,从这之上也构建起了数据驱动的诸多前端架构,下一篇我们将会详细的讲解这些拦截器的特性和使用。