this的指向问题

博客探讨了在JavaScript中,特别是在定时器中使用函数时遇到的this指向问题。由于定时器内部的this通常指向全局对象(在浏览器环境中是window),导致调用Vue实例上的方法b()时出现错误。文章提供了三种解决方案:1) 使用箭头函数;2) 声明一个变量保存this的引用;3) 使用Function.prototype.bind()方法绑定this的指向。

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

export default {
      methods: {
          //方法1
          a(){
              setInterval(function () {
                  this.b();  //---不执行报错:this.b() is not a function---
              },1000)
          },
          //方法2
          b(){
              console.log('调用成功')
          }
      }
}

在定时器中调用b 函数的时候报错,因为,this的指向问题。
定时器中的this指向window对象而非vue实例,在window对象中你并没有定义b()方法,自然会报错。
解决方法一:
使用箭头函数解决
a(){
setInterval(()=> {
this.b();
},1000)
},
解决方法二:
声明一个变量,存储一下this
a(){
let self = this;
setInterval(function () {
self.b();
},1000)
},
解决方法三:
利用bind改变this的指向
a(){
setInterval(function () {
this.b();
}.bind(this),1000)
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值