Vue中匿名函数和箭头函数的this

Posted 2023-04-25

参考技术A

大家都知道，我们在用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开发者。

面试题系列---箭头函数和普通函数的区别？箭头函数的优缺点？

箭头函数和普通函数的区别？

1.外形不同：箭头函数使用箭头定义，普通函数中没有

2.箭头函数都是匿名函数

3.箭头函数不能用于构造函数，不能使用new**

4.箭头函数中this的指向不同
(1)在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

(2)箭头函数本身没有this，箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()

5.其他区别
（1）箭头函数不能用作Generator函数，不能使用yeild关键字。
（2）箭头函数不具有prototype原型对象。
（3）箭头函数不具有super。
（4）箭头函数不具有new.target。

（5）箭头函数不能使用arguments对象。

注意：this一旦被捕获，就不再发生变化

箭头函数有什么优缺点？

优点：写法很简洁，不用再定义this

缺点：this指向会难以阅读