目录

微信小程序项目中that和this的区别this.setData报错undefined解决方法

微信小程序项目中that和this的区别(this.setData()报错undefined解决方法)

在编写获取用户信息进行登录的代码时,报了一个这样的错误

https://i-blog.csdnimg.cn/blog_migrate/34aa8a69511cc4e2d6f38cd7c133b5d1.png

后面经过摸索,最终发现是this指向的问题!!!

现在我们来看看如何解决小程序中this指向问题以及that和this的区别

在微信小程序中,setData使用最频繁的接口,也是最容易引发性能问题的接口

在上面发生了’setData’ undefined,那么我们定位到问题代码段

https://i-blog.csdnimg.cn/blog_migrate/521fc013ef59c545e2cba7de4feb53d7.png

this代表着当前对象,会随着程序的执行过程中的执行上下文改变

通常就是谁调用它,this就指向谁

打印this,看看它到底指向谁!!!

https://i-blog.csdnimg.cn/blog_migrate/a564de503732a51a2c02b589fd8aad84.png

分别打印两个不同位置的this,看看它们分别指向什么

https://i-blog.csdnimg.cn/blog_migrate/a91e55a8912067c2c0ce630d7db95a71.png

https://i-blog.csdnimg.cn/blog_migrate/737636cbc7ab75ebfc2e88aeccf52c9a.png

外部的this指向的是当前页面,内部的this为undefined

我们调用setData是要改变这个页面的data的值,所以这里用到的this是外部的this

如何修改this?

通过我们通过将外部this赋给that,来使用外部this即可,当然这里的that换成其他变量名都可以,只是大家经常用that来命名 !

箭头函数的方法

ES6语法增加了 的规则,箭头函数的this指向上一级作用域

https://i-blog.csdnimg.cn/blog_migrate/e6b4cf1475688348f1a2c0afc4753ce2.png

所以我们可以直接把success 函数里写成箭头函数形式!!!!