Vue中的var that=this；是啥意思？为什么要这样写？

初学vue，记录一个思考内容。

文章目录

Vue中的var that=this；是啥意思？为什么要这样写？
var that=this;？为什么要这样写
总结

var that=this;？为什么要这样写

在vue的代码中，经常能看到这样一段代码：

 var that=this;

这个代码的作用是什么呢？看了些博客后，我们来浅谈一下this与that的区别。

以下面这段代码为例：

var app=new Vue({
    el:"#player",
    data:{
        query:"五月天",
        musicList:[]
    },
    methods:{
        searchMusic() {
            var that=this;
            axios.get("url" + this.query).then(
                function (res) {
                	this.musicList=res.data.result.songs;
                    that.musicList=res.data.result.songs;
                }
            ).catch(function (err) {
                console.log(err);
            })
        }
})

在javascript中，this用以指代当前对象，但是this却不是固定不变的。例如在this.query中，此时的this是指app这个实例本身。而this.musicList中的this指代的实际上是axios的回调函数本身，所以此时你在回调函数中，使用this.musicList必然是找不到相应的属性的，因为axios回调函数本身没有musicList这个属性。

所以，我们要在使用回调函数之前将app实例中的属性存储给一个其他值，也就是用that指向this。此时，that即代表app这个实例，this代表axios的回调函数。所以这个时候我们的that.musicList即可以找到相应的属性。同理，当我们的methods在定义函数中自定义了其他函数或者使用其他函数代替了axios回调函数的位置，同样回出现this.musicList找不到属性。

下面我们以一个实例证明我们的推测：

运行代码，使用F12打开控制台，查看运行结果。
可以看到第一个打印结果对应console.log(this.test);。
第二个打印结果对应于console.log(this.musicList);，
第三个打印结果对应于console.log(that.musicList)。
至此，可以证明我们的结论正确。