400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】js的捕捉器---Proxy代理对象

【Web前端基础知识】js的捕捉器---Proxy代理对象

  • 发布: Web前端培训
  • 来源:优就业
  • 2021-09-28 14:03:03
  • 阅读()
  • 分享
  • 手机端入口

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

简单的举个例子:

  1. var p = new Proxy(our, handlers); 
  2.    //p就是通过new Proxy创建的代理对象 

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

  1. // our代表我们,wallet属性指我们钱包,现在我们钱包里有200元 
  2. // con指我们的消费次数,每次消费次数都会加1, 记一笔账 
  3. var our = {wallet: 200} 
  4. var con = 0 
  5.  
  6. // 这个月,我们喝了四次透心凉心飞扬,每次的消费我们都会记上一笔 
  7.  
  8. // 今天消费3元 
  9. con++ 
  10. our.wallet =197 
  11.  
  12. // 今天消费3元 
  13. con++ 
  14. our.wallet = 194 
  15.  
  16. // 今天消费3元 
  17. con++ 
  18. our.wallet = 191 
  19.  
  20. // 今天消费3元 
  21. con++ 
  22. our.wallet = 188 
  23.  
  24. // 今天消费3元 
  25. con++ 

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

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

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

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

  1. var con = 0 
  2. // 目标对象 
  3. var our = {wallet: 200} 
  4. // 捕获器trap 
  5. var handlers = { 
  6.     set(target, key, val) { 
  7.         // target 目标对象 
  8.         // key 代理对象要修改的属性 
  9.          
  10.         // 记录一笔消费 
  11.         con++ 
  12.         // 通过Reflact对象触发原始目标对象的属性操作 
  13.         // 相当于执行 target[key] = val 
  14.         Reflect.set(target, key, val) 
  15.     } 
  16. // 代理对象 
  17. var p = new Proxy(our, handlers) 
  18. // 将对目标对象our的属性wallet操作改为代理对象相同属性wallet的操作 
  19. p.wallet = 197 
  20. p.wallet = 194 
  21. p.wallet = 191 
  22. p.wallet = 188 
  23. p.wallet = 185 
  24.  
  25. console.log(our.wallet) // 185 
  26. console.log(consume) // 5 

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

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

  1. var con = 0 
  2. var our = {wallet:  200} 
  3. var handlers = { 
  4.     set(target, key, val) { 
  5.         con++ 
  6.         Reflect.set(target, key, val) 
  7.     } 
  8.  
  9. // 使用Proxy.revocable创建代理 
  10. var t = Proxy.revocable(our, handlers) 
  11. var p = t.proxy 
  12. var prevoke = t.revoke 
  13.  
  14. // 使用代理对象进行消费记账 
  15. p.wallet = 197 
  16. p.wallet = 194 
  17. p.wallet = 191 
  18.  
  19. // 某一天,我们实现了一个小目标 
  20. p.wallet = 100000000 
  21. // 我们不再需要记账,取消之前创建的代理 
  22. prevoke() // 执行prevoke即可 
  23.  
  24. p.wallet = 99999997 // 会显示报错 (代理取消就不能再使用) 

 

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道