前端埋点：如何拦截Message的弹窗信息？

这里总结了三种方式：

1.apply

2.Object.defineProperty

3.proxy （补充）

下面会以同一个案例分析三种拦截的实现方式：拦截Message的error弹窗信息

1.apply

const tempError = Message.error
 Message.error = function (e) {
 
    // e为我们需要拦截的message数据
    console.log(e)
 
    tempError.apply(this, arguments);
}
复制代码

1.1 apply的作用是什么？

apply的作用是改变this指向，让我们tempError的this指向和原生的Message.error 的this指向一样。

1.2 可是apply在这个函数拦截里面有什么作用呢？

也许在其他的函数拦截里面有作用，但是在这个函数拦截里面，似乎没什么作用，因为我们不需要获取到this指向里面的其他值！

所以，我们可以这样写：

const tempError = Message.error
 Message.error = function (e) {
 
    // e为我们需要拦截的message数据
    console.log(e)
 
    tempError(e)
}
复制代码

2.Object.defineProperty

let oldMessageError = Message.error
Object.defineProperty(Message, 'error', {
  get(){
    return (message)=>{
 
    // message为我们需要拦截的message数据
      console.log(message)
 
      return oldMessageError(message)
    }
  }
})
复制代码

我们不仅仅需要拦截Message的error方法，还需要拦截success，info等方法，我们可以使用 Object.defineProperties 进行多个属性拦截：

let oldMessageError = Message.error
let oldMessageSuccess = Message.success
Object.defineProperties(Message, {
 error:{
   get(){
     return (message)=>{
       // message为我们需要拦截的message数据
       console.log(message, 'error...')
       return oldMessageError(message)
     }
   }
 },
  success:{
    get(){
      return (message)=>{
        // message为我们需要拦截的message数据
        console.log(message, 'success...')
        return oldMessageSuccess(message)
      }
    }
  }
})
复制代码

3.Proxy

Message.error = new Proxy(Message.error, {
  apply(target,ctx,args) {
 
    // args 为我们需要拦截的message数据
    console.log(args)
 
    return target(...args)
  }
});
复制代码

Proxy 低版本浏览器不支持，斟酌使用！