vue组件中使用this指向时
问题场景:
返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效 检查后发现this指向window,而非vue实例,所以无法操作数据。
mounted() {
window.onscroll=function(){
if(document.documentElement.scrollTop>100) {
this.isActive=true;
}else{
this.isActive=false;
}
}
}
解决方法:
因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,首先需要在最外部,设置一个变量,将其绑定上vue实例
例如:
mounted() {
/* 问题:在内部直接操作this失效? */
/* 解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
var that=this;
window.onscroll=function(){
if(document.documentElement.scrollTop>100) {
that.isActive=true;
}else{
that.isActive=false;
}
}
}
this指向分析:
使用let that=this保存this的指向,嵌套函数的this指向为window
可能出现this指向问题的地方
例如:window.onscroll中、setTimeout()和setInterval() 中
1、内置函数setTimeout()和setInterval() 中,第一个参数的回调函数中的this,默认指向了window
2、普通函数调用,此时 this 指向 window
3、被嵌套的函数独立调用时,this默认指向了window
4、自执行函数 this默认指向了window
5、闭包中this默认指向window