微信小程序错误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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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 session和cookie使用说明
2010/04/07 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
关于js类的定义
2011/06/28 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python 2.7.14安装图文教程
2018/04/08 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python调用C语言的实现
2019/07/26 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
毕业生求职的求职信
2013/12/05 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
森林防火标语
2014/06/23 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android