三峡建设管理有限公司网站,用vs2008做网站教程,亚洲网站正在建设中,厦门网络公司网站前言 最近在开发微信小程序时不时会遇到一个很奇怪的问题#xff0c;有些情况下用 this.setData 可以改变视图显示#xff0c;有些情况下使用 this.setData 无效#xff0c;这又是为什么呢#xff1f; 问题描述
在解释这个问题前#xff0c;我们先来看两段代码#xff1…前言 最近在开发微信小程序时不时会遇到一个很奇怪的问题有些情况下用 this.setData 可以改变视图显示有些情况下使用 this.setData 无效这又是为什么呢 问题描述
在解释这个问题前我们先来看两段代码 第一段代码错误写法 initOn() {wx.request({url: 接口地址,success: function (res) {this.setData({objs: res.data.map.gdtzxx,});},});
},第二段代码正确写法 initOn() {let that this;wx.request({url: 接口地址,success: function (res) {that.setData({objs: res.data.map.gdtzxx,});},});
},通过对比上面的代码我们发现两者唯一的区别就是在 this 的使用上第一个是直接使用 this 调用另一个则是通过 let that this使用 that 来保存当前的 this 的状态才可以更新视图。虽然看似最终的目的是一致的但是当你运行时第一种写法就会报如下图的错误 原因分析
这是因为 this 作用域指向的问题success 函数实际是一个闭包 无法直接通过 this 来 setData故就会报错。
但是在 es6 中使用了箭头函数是不存在这个问题的。原因是因为当我们使用箭头函数时函数体内的 this 对象就是定义时所在的对象而不是使用时所在的对象。并不是因为箭头函数内部有绑定 this 的机制实际原因是箭头函数根本没有自己的 this它的 this 是继承外面的因此内部的 this 就是外层代码块的 this。 es6 箭头函数写法 initOn() {wx.request({url: 接口地址,success: (res) {this.setData({objs: res.data.map.gdtzxx,});},});
},
