vue使用window.addEventListener 监视网络状态中，箭头函数与function的区别

在vue中使用window.addEventListener监视网络状态时，遇到一个坑，只能说自己跟不是步伐，知识困乏，不知道箭头函数和function函数的区别。

最初vue监视网络状态的方法是这样的：

      window.addEventListener("online", function(){
        this.wifiFlg = false;
      });

      window.addEventListener("offline", function(){
        this.wifiFlg = true;
      });

结果，this.wifiFlg的值永远不会改变。调试半天发现，换了另外一种写法

    window.addEventListener("online", ()=>{
        this.wifiFlg = false;
      });

      window.addEventListener("offline", ()=>{
        this.wifiFlg = true;
      });

这种写法达到了预期的结果，改变了this.wifiFlg的值。

后来百度了，才知道ES6中箭头函数和function函数是有区别的，就window.addEventListener来说，函数中this的指向差异如下：

 第一行，是function函数中this的指向对象

第二行，是箭头函数中this的指向对象，差异一目了然。

箭头函数和function函数的其他区别，可以参照ES6---箭头函数()=>{} 与function的区别_Run4Freedom的博客-CSDN博客