使用this调用vue中定义的,data中数据或methods中的方法,报错undefined的原因及解决办法
使用this调用vue中定义的,data中数据或methods中的方法,报错undefined的原因及解决办法
问题描述
使用this调用vue中定义的data时,报错,这个变量undefined
<template>
<div>
<button @click="clicks()">测试按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
cacheList: [1, 2, 3, 4, 5],
t: 0//在data中定义了变量t
}
},
methods: {
clicks() {
this.cacheList.forEach(function (item, index, arr) {
console.log(this)//undefined
this.t = item//t未被定义,报错
});
}
}
}
</script>
报错:
解决办法
既然知道是this的指向发生了错误,那么,在this发生错误之前,将this使用一个变量存储起来就行
原因
参考文章 彻底理解js中this的指向
网上基本的观点是:
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象
事实上,在大部分的情况下,这种说法是成立的,但是也不绝对,如下:
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();
这里最终调用fn()方法的是o对象,可是输出中的是b对象的值
应该是这样:
- 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window(而是undefined),但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。
- 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
- 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
还有一个需要注意的点:
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
原因:this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
在我出现的问题中,我没有使用严格模式,但是出现this是undefined的情况呢?参考文章 : vue中的this指向
在JS的框架下,vue中this的指向有以下规则
1、 data中的this指向window 所有的生命周期函数中的this都指向vue实例对象
2、vue的v-on指令中可以接收JS语句,其中的this是window(vue组件中的v-on指令除外)
3、 computed中的this指向vue实例对象
methods中的this有以下几种情况
1、普通函数的this指向vue实例对象
2、箭头函数没有自己的this,因此this指向其宿主对象的this(注意宿主对象是函数对象(它被调用后this的指向要进行具体分析),简单对象没有this
)
3、普通函数形式的回调函数的this是window,箭头函数形式的回调函数的this遵循箭头函数的原则(大多数情况下是vue实例对象)
由于我在foresch中使用的是匿名函数,匿名函数属于简单函数(简单函数不包括箭头函数),简单函数对象是没有this的,所以上述报错undefined
其实我出现的报错还有一个解决办法,就是将匿名函数变成箭头函数(原因:箭头函数没有自己的this,因此this指向其宿主对象的this)
这样,this就会指向他的上一级,也就是vue了
更多推荐
所有评论(0)