这适用于 Vue 中的匿名函数和箭头函数

序言

大家都知道，我们在用Vue的时候经常要用到this，例如要在方法中访问data中的变量，例如要在调用定义在methods中的方法等等。但有时候你发现像往常一样简单的用this.xxx会报出this的undefined。这是因为在某些情况下，this并不是和普通情况下指当前组件。下面我来总结一下我用this时遇到的一些问题

匿名函数

在匿名函数中想使用this来调用data或methods中的变量，方法时，会报出thi为undefined。

methonds: {
    query() {
         let count = 0;
         let f = function() {
            console.log('this', this, 'count', count);  // this,undefined  count,0
        }
        f();
    }
}

那么怎么解决呢？
可以看到这里还是能获取这个匿名函数外层的变量的count=0,那么我们只要用一个变量把this引用起来就好

methonds: {
    query() {
         let count = 0;
         let that = this;
         let f = function() {
            console.log('this', that, 'count', count);  // this,VueComponent{...}  count,0
        }
        f();
    }
}

那如果我们不想定义一个引用变量，那该如何解决——我们可以用箭头函数

箭头函数

methonds: {
    query() {
         let count = 0;
         let arrow = () => {
            console.log('arrow count', count, 'arrow this', this)  // arrow this,VueComponent{...}  arrow count,0
        };
        arrow();
    }
}

其实箭头函数这里的this是指外层函数的this，因为箭头函数是没有定义this，当在箭头函数内部用到this后会从他的父级作用域寻找。他父级就是query（）函数，在这函数里使用this是指向当前组件的，所以这个直接在这函数里定义的箭头函数也是如此。

结合

有些场景下我们会结合匿名函数和箭头函数，用this的时候就要非常小心了。
就像这次我在实现一个轮询查询订单状态的功能时就用了这样的结构：

queryTimeOut(params) {
                let count = 0;
                let messageDialog = this.$message;
                let f = function () {
                    queryOrder(params).then(res => {
                        count++;
                        console.log('第',count,'轮询');
                        ...
                        if (code === '200') {
                            if (status === 'SUCCESS' || status === 'REFUND') {
                                  ...
                            }
                        } else {
                            if (count >= 5) {
                                messageDialog.error(msg)
                            } else {
                                setTimeout(f, 3000)
                            }
                        }
                    })
                };
                if (count === 0) {
                    f()
                }
            }

轮询第一次的时候直接执行，一共轮询五次，随后的四次轮询采用setTimeOut三秒一次，可以看到这里实际上使用axios请求的方法是被定义在一个变量为f的匿名函数里，而axios的回调函数使用箭头函数写的。因此里就不能用this了，因为如果在这里用了this，实际上是匿名函数的this，也就是undefined了。所以一般把this是定义为匿名函数外层，然后在里面引用。

总结

Javascript的this真的是复杂，不像Java那样明显，平时还是得多注意一下，这玩意真的就是空指针问题一样困扰Js开发者。