JS 代理挟持（本文主要讲述对象读取属性的灵活运用）

小小前端

已于 2022-12-16 17:30:55 修改

阅读量214

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-12-16 17:28:04 首次发布

本文链接：https://blog.csdn.net/jw_xiaoming/article/details/128344497

版权

时间过得真快呀，马上又要进入年底了，今年大厂的裁员以及培训机构的爆发无疑让互联网进入了寒冬，不过认真学习的小伙伴们千万不要气馁；努力上进的人运气永远不会差❤️❤️❤️！不管是想要找工作或是明年想换一个更好工作的小伙伴们，努力提升起来，明年一定能够好运三连 🍬🍬🍬在这里博主预祝大家新年快乐！开春大吉。

好了不闲聊了，今天想给大家推荐的是非常实用的用代理处理动态属性值。

我们先简单介绍一下Proxy：

Proxy这个词的原意是代理，可以理解成在 目标对象 之前架设一层 "拦截"，外界对该目标对象的访问时都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和修改。

let proxy = new Proxy(target,handler)

Proxy 对象由两部分组成： target 、handler （此处省略一万字）

target : 目标对象

handler ：是一个对象，声明了代理target 的指定行为，支持的拦截操作

思考题:

1. obj [1][2][3] + 4 // 期望结果 10 （1 + 2 + 3 + 4）

2. obj [5][6][7] + 8 // 期望结果 26

3. obj [9][10][11] + 12 // 期望结果 42 .....

代码展示：

        const obj  = new Proxy({
          _store:0
        },{
          get(target,p,recever){
           if(p === Symbol.toPrimitive){
              return ()=>{
                return target._store
              }
           }
           target._store += +p;
           return  recever
          }
        })

console.log(obj [1][2][3] + 4) // 打印结果是  10

console.log(obj [5][6][7] + 8) // 打印结果是  26

console.log(obj [9][10][11] + 12) // 打印结果是  42

本文主要主要做拓展使用，new Proxy（）的读取属性还有很多实用技巧，主要想讲的是下次大家在遇到对象是动态不固定的情况下时，可以想到我们的数据劫持的方法，这样相同的运行结果面试拉开差距的就是我们代码的质量。山水有相逢，我们下期再见，我是一个热爱生活的前端积极份子，有什么好的题材可以找我一起探讨哦，我们一起共同进步，goodBye。（最近疫情管控的防线放开了，出门上班的小伙伴们注意好防护哦！）