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

菜鸡程序员_小小

于 2023-07-14 15:41:49 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验，学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qingdatiankong/article/details/131724827

经验，学习专栏收录该内容

119 篇文章

订阅专栏

在Vue应用中，使用window.addEventListener监听网络状态时，发现使用function定义的回调函数中，this.wifiFlg无法正确赋值，而改用箭头函数则解决了问题。这是因为箭头函数不会创建自己的this，它会从父作用域继承this，而在function中，this通常在事件处理函数中指向事件触发的对象。了解这一关键区别对于解决JavaScript中的this绑定问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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的指向差异如下：