js的捕捉器---Proxy代理对象

2021-07-28 19:28发布

js的捕捉器---Proxy代理对象

在谈到js的是trap的时候,我们首先要了解一下什么是Proxy代理?Proxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。[来源于MDN的说明]。

简单的举个例子:

 

 

 

那我们为什么会需要代理呢?这个代理就像是我们生活中的每一次次的消费之后的记账,举个例子来说吧。

每次我们在修改钱包剩余金额时,都要执行一次con++去执行一次记账的操作,那么有没有更简单的方式,可以让我们不需要每次都写上一行代码来增加消费的次数呢?

答案当然是有的,它就是Proxy代理对象。我们可以通过使用代理对象,假设你想对目标对象的属性操作全部改为对代理对象相同属性的操作,那么在代理对象中,它提供了对属性获取 [[get]] 和修改 [[set]] 等操作的拦截,js中将这种的拦截称为捕捉器。

通过这种的捕捉器,我们就可以捕获到代码中对属性的操作时机,让我们能够先执行我们自定义的业务逻辑代码。

因为我们对目标对象的属性操作改为了对代理对象相同的属性操作,所以就需要我们在最后通过Reflact执行目标对象的原始操作。

那我们不禁开始思考一个问题:如何取消代理呢?

假如某一天,我们实现了财务自由,不需要再精打细算的记录每一笔消费时,就可能需要取消之前的代理了,那我们应该如何操作呢,接下来告诉你,代码如下: