前言

最近在开发微信小程序时不时会遇到一个很奇怪的问题，有些情况下用 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,});},});
},

掌握微信小程序 this 指向，轻松编写高质量代码相关推荐

后退一步小程序_微信小程序返回上一级页面的实现代码
微信小程序返回上一级页面 wx.navigateBack({ delta: 1 //返回上一级页面}) html: 保存 js: //提交 submit(){ let data = this.data ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
Laravel 微信小程序后端实现用户登录的示例代码
Laravel 微信小程序后端实现用户登录的示例代码这篇文章主要介绍了Laravel 微信小程序后端实现用户登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 ...
荐书与免费送书：《编写高质量代码改善 Python 程序的 91 个建议》
为了学习如何打理好微信公众号,Python猫我关注了好几个python技术公众号.然后发现这些同行们都在免费送资源,或者抽奖送书耶.于是,我也去参与抽奖,竟然侥幸抽中啦一本<Python数据科学 ...
编写高质量代码改善C#程序的157个建议——建议148：不重复代码
建议148:不重复代码如果发现重复的代码,则意味着我们需要整顿一下,在继续前进. 重复的代码让我们的软件行为不一致.举例来说,如果存在两处相同的加密代码.结果在某一天,我们发现加密代码有个小Bug, ...
《编写高质量代码：改善c程序代码的125个建议》——建议3-5：避免使用浮点数作为循环计数器...
本节书摘来自华章计算机<编写高质量代码:改善c程序代码的125个建议>一书中的第1章,建议3-5,作者:马伟更多章节内容可以访问云栖社区"华章计算机"公众号查看. ...

掌握微信小程序 this 指向，轻松编写高质量代码

前言

问题描述

原因分析

掌握微信小程序 this 指向，轻松编写高质量代码相关推荐

最新文章

热门文章