微信小程序错误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 相关文章推荐
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
简单实现python收发邮件功能
2018/01/05 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
优良学风班总结材料
2014/02/08 职场文书
文艺晚会策划方案
2014/06/11 职场文书
公益广告标语
2014/06/19 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js