这在匿名函数下

方便本地演示，无需使用网络包

介绍两个文件，vue和axios

Axios返回一个promise对象，我们通过axios发出ajax请求

script src=' http :https://cdn . jsdeliver . net/NPM/vue/dist/vue . js '/script script src=' http3360https://unpkg.com/axios/dist/axios.min.js'/scriptbody div id=' app ' { 0

Var message='我是全球消息！'；Var app=newvue ({el:' # app '，data () {return {message3360 '我是vue下的一条消息！'} }，created() { this.getData() }，methods : { getData(){ axios . get '(https://easy-mock.com/mock/5b 0525349 AE 34 e7a 89352191/example/promise 1 ')。然后(function(){ console . log(this . message)；//=我是全球消息！})}}})不关心axios请求的接口返回的数据

在axios下，输出是=我是全局消息！为什么？我们要输出=“我是vue下的消息！”

这里有这么多盲人。为什么在axios下会出现这种情况？

Axios有话要说：

当这种情况发生时，它不是axios的锅。

不相信我就往下看

//其他代码省略getdata(){ settimeout(function(){ console . log(this . message))；//=我是全球消息！}, 1000);}}我们用定时器替换了getData方法下的axios请求，其他部分保持不变

输出依旧=我是全球消息！

为什么呢？

因为.

在匿名函数下，这指向窗口

至于原因，这里已经解释清楚了，https://www.zhihu.com/question/21958425

你只需要记住，默认情况下，匿名函数指向这个窗口

匿名函数下该如何处理由此指向的问题？

捆绑处理

结合我们之前所学，我们可以用bind来处理它

//有些代码省略了created () {this。getdata ()}，methods : { getdata(){ settimeout(function(){ console }。日志(这个。消息)；//=我是vue下的留言！}.绑定(本)，1000)；}} bind可以改变这个方向，这是解决方案之一

还有一个更常见的

此作业的临时存储

created() { this.getData()}，methods: { getData() { const那=this setTimeout(function(){ console . log(that . message))；//=我是vue下的留言！}, 1000);}}在匿名函数之前，我们先把这个赋给那个，在匿名函数中用那个代替这个，这样也可以达到预期的效果

如果您的项目支持ES6标准，那么

箭头功能是您的最佳选择

getData(){ axios . get(' https://easy-mock.com/mock/5b 0525349 AE 34 e7a 89352191/example/promise 1 ')。然后(()={ console . log(this . message)；})}我们在上一篇文章中总结了一个结论

这一点是在执行函数时定义的，而不是在创建函数时定义的。这指向最后调用它的对象

我们下一篇文章的另一个知识点

这在箭头函数中

看一个栗子

Varheronname='黄蓉'；Var heroObj={heroName: '郭靖'，call name 3360 function(){ console . log(this。hero)//=郭靖} } herobj . call name()；这指向最后调用它的对象，因此输出=郭靖

再看看箭头函数的栗子

Varheronname='黄蓉'；Var heroObj={heroName: '郭靖'，call name 3360()={ console . log(this。heronamie)//=Huang Rong } } herobj . call name()；你对这个输出感到惊讶吗？

不管你是否愚蠢，让我们看看另一个栗子

Varheronname='黄蓉'；函数getheronamie () {this。heronamie='郭靖' constfoo=()={console.log (this。heronamie)//=郭靖} foo()；} getHeroName()；将它们放在一起进行比较：

普通函数：这一点是在函数执行时绑定的，而不是在创建函数时绑定的

箭头函数：这一点是在创建函数时绑定的，而不是在执行函数时。

在任何情况下，箭头函数的这个和外部函数的这个是一致的，外部函数的这个指向它所指向的任何人；如果外部函数不是函数，它指向window。

当在ES6中定义时，这个绑定是在继承的父执行上下文中

这在小程序中

如果项目中的小程序也支持ES6标准，那么使用箭头功能无疑是一个不错的选择

//省略。getLocation(){ wx . choose location({ success : RES={ if(RES . address RES . name){ this . setdata({ shopped address : ` $ { RES . address }($ { RES . name })`})else if(RES . address){ this。setdata({ shop address : ` $ { RES . address } `})} } } }很多场景都不需要缓存这个。

var=this//用箭头函数代替这个方案会让我们事半功倍

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。