ES6 proxy 一个工作中的应用场景

proxy 拦截案例

背景：

简单来说就是，不修改页面调用，通过拦截函数调用重写调用逻辑。

小程序GA页面的每一个埋点已经埋好了，但是需要再添加一个新的GA账号

而且GA虽然可以创建多个实例 但默认一个实例需要调用一次

比如页面埋点 track1.send() 这个track1是对象

现在不能每个页面都调用两个实例, 否则就是

track1.send()

track2.send()

如果出现第三个则每个页面都需要再加track3.send()，至少也有几十个页面，这样实施不可行

所以我们想通过返回track1，返回一个数组，通过proxy拦截，

外部调用一次方法，内部调用每一个数组元素的方法

下面就是proxy拦截实施案例

// 更改前
const obj = {
    send(val) {
      console.log(val + '1')
    },
}
// 页面调用
obj.send('已发送')

// 更改后
const arr = [
  {
    send(val) {
      console.log(val + '1')
    },
  },
  {
    send(val) {
      console.log(val + '2')
    },
  },
]

const obj = new Proxy(arr, {
  get: function (target, key) {
    return function () {
      arr.forEach((v) => {
        v[key](...arguments)
      })
    }
  },
})
// 页面调用
obj.send('已发送')

各位会发现页面调用的代码并没有修改，达到了我们的修改目的，