在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)。至此,可以证明我们的结论正确。
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐