微信小程序错误this.setData报错及解决过程


Posted in Javascript onSeptember 18, 2019

先说原因:

function声明的函数和箭头函数的作用域不同,这是一个不小心坑的地方。可参考箭头函数说明:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

所以对于这个结果,还是换回es5的function函数去写最好了。

箭头函数和function的区别:

  • 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  • 箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替,不可以使用yield命令,因此箭头函数不能用作Generator函数。

这么写会报错

thirdScriptError
this.setData is not a function;at pages/index/index onLoad function;at api getSystemInfo success callback function
TypeError: this.setData is not a function
onLoad: function () {
  wx.getSystemInfo({
   success: function (res) {
    this.setData({
     lang: res.language
    })
    console.log(res.language)
   }
  })

这么改一下就不报错了。

onLoad: function() {
  wx.getSystemInfo({
    success: (res) = >{
      this.setData({箭头函数的this始终指向函数定义时的this lang: res.language
      }) console.log(res.language)
    }
  })

或者这样:

onLoad: function () {
  var that=this;
  wx.getSystemInfo({
   success: function (res) {
    that.setData({
     lang: res.language
    })
    console.log(res.language)
   }
  })

可以用如下示例说明:

'use strict';
var obj = {
 i: 10,
 b: () => console.log(this.i, this),
 c: function() {
  console.log(this.i, this);
 }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 #Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 #Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 #Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 #Javascript
layui复选框限制选择个数的方法
Sep 18 #Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 #Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
js 替换
2008/02/19 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
python创建临时文件夹的方法
2015/07/06 Python
对Python 语音识别框架详解
2018/12/24 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python 装饰器的使用示例
2020/10/10 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
会计自我鉴定
2014/02/04 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
青蓝工程实施方案
2014/03/27 职场文书
拔河比赛口号
2014/06/10 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
新员工考核评语
2014/12/31 职场文书
西岭雪山导游词
2015/02/06 职场文书
旅游安全责任协议书
2016/03/22 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
redis 解决库存并发问题实现数量控制
2022/04/08 Redis