Vue中使用setinterval定时器里this的指向

最新推荐文章于 2023-01-03 19:13:39 发布

wangyuntuan

最新推荐文章于 2023-01-03 19:13:39 发布

阅读量986

点赞数

分类专栏： Vue js 文章标签： vue.js javascript 前端 setinterval

本文链接：https://blog.csdn.net/wangyuntuan/article/details/123107680

版权

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了JavaScript中箭头函数与普通函数的this指向差异。在箭头函数中，this保持定义时的上下文，而在Vue环境中指向Vue实例。而在普通函数中，this取决于函数的调用方式，可能指向调用者。通过示例展示了两个定时器，一个使用普通函数，一个使用箭头函数，显示了不同的this指向，其中箭头函数能够正确访问到Vue实例中的`showLoadingOpen`属性，而普通函数则不能。

摘要由CSDN通过智能技术生成

箭头函数中的this指向是固定不变（定义函数时的指向），在vue中指向vue;

普通函数中的this指向是变化的（使用函数时的指向），谁调用的指向谁。

例如两个定时器

      const myTimer1 = setInterval(function () {
        console.log(this)
        console.log(this.showLoadingOpen)
        clearInterval(myTimer1)
      }, 1000)
      const myTimer2 = setInterval(() => {
        console.log(this)
        console.log(this.showLoadingOpen)
        clearInterval(myTimer2)
      }, 1000)

其中showLoadingOpen是在vue的data中定义的一个bool类型值，运行后结果如下：