this在面向对象的编程语言里指的是当前对象。
1、在匿名函数中,因为匿名函数不是一个对象,所以在匿名函数内的中的当前对象应该是其父对象,没有自定义的父对象只能是其根对象Window。
2、解释实例如下:
<script type="text/javascript">window.onload=function(){
alert(this)
}
</script>
结果弹出的应该为window对象,因为此时匿名函数不是对象,只是一个实践处理函数,所以this应该为当前对象即window对象。
匿名函数的this一般都是指向window的,这个不需要分析。《javascript高级程序设计》这本书里的匿名函数这一章也有讲到,摘抄如下:
this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。不过,匿名函数的执行环境具有全局性,因为其this对象通常指向window。
大家都知道,我们在用Vue的时候经常要用到this,例如要在方法中访问data中的变量,例如要在调用定义在methods中的方法等等。但有时候你发现像往常一样简单的用this.xxx会报出this的undefined。这是因为在某些情况下,this并不是和普通情况下指当前组件。下面我来总结一下我用this时遇到的一些问题
在匿名函数中想使用this来调用data或methods中的变量,方法时,会报出thi为undefined。
那么怎么解决呢?
可以看到这里还是能获取这个匿名函数外层的变量的count=0,那么我们只要用一个变量把this引用起来就好
那如果我们不想定义一个引用变量,那该如何解决——我们可以用箭头函数
其实箭头函数这里的this是指外层函数的this,因为箭头函数是没有定义this,当在箭头函数内部用到this后会从他的父级作用域寻找。他父级就是query()函数,在这函数里使用this是指向当前组件的,所以这个直接在这函数里定义的箭头函数也是如此。
有些场景下我们会结合匿名函数和箭头函数,用this的时候就要非常小心了。
就像这次我在实现一个 轮询查询订单状态 的功能时就用了这样的结构:
轮询第一次的时候直接执行,一共轮询五次,随后的四次轮询采用setTimeOut三秒一次,可以看到这里实际上使用axios请求的方法是被定义在一个变量为f的匿名函数里,而axios的回调函数使用箭头函数写的。因此里就不能用this了,因为如果在这里用了this,实际上是匿名函数的this,也就是undefined了。所以一般把this是定义为匿名函数外层,然后在里面引用。
Javascript的this真的是复杂,不像Java那样明显,平时还是得多注意一下,这玩意真的就是空指针问题一样困扰Js开发者。