vue：this和that的理解

• 当我们进入公司的时候会发现一个很常见的情况，就是你的前开发者会常用这么一个变量：that、self…

• 为什么会用到that、self呢，小编是这么理解的，this指向的是当前的对象，而that、self是临时的变量，为了临时存储一下this的，保证不管我们怎么调用，都能使用到this，而且对于vue来说，能保证这个this的值不变，一直都是vue实例
• 接下来小编用个案例简单展示一下结果：

mounted () {
    this.this_that()
},
methods: {
    this_that () {
        const that = this
        console.log('this1', this)
        setTimeout(function () {
            console.log('this2', this)
            console.log('that3', that)
        }, 1000)
        setTimeout(() => {
            console.log('this4', this)
            console.log('that5', that)
        }, 1500)
    },
}

• 输出结果：

• 解析：

this1 -- this1很容易理解，肯定就是指向的vue实例了

this2 -- this2输出的是window对象，为什么呢，首先我们是用function(){}普通函数的形式，计时器是window函数调用的，所以指向的就是window

that3 -- that3为什么输出的是vm实例了呢，是因为我们在定时器外面定义了一个that变量，在定时器里面输出的只是一个变量的值，而不是this的指向

this4 -- 为什么这里跟this2不一样了呢，注意我们这里定时器使用的是箭头函数，箭头函数的this指向的是上一级调用它的对象，所以啊，这里this指向的是vue实例

that5 -- 跟that3一样

这下应该知道原因了吧：我们提前使用that存储了this，那么在这个逻辑里面，不管我们怎么调用，最终我们都能使用到vue实例的this，就不用考虑this的指向问题了，方便了我们对this的使用。