阅读 27

「Krystalcsdn」的原创文章 微信小程序Cannot read property 'setData' of undefined问题解决 两种方法可用

微信小程序Cannot read property ‘setData‘ of undefined问题解决

Krystalcsdn 2020-03-08 23:57:39 300 收藏
展开
今天写小程序,需要读取窗口高度然后设置scroll-view高度,在this.setData时报错“Cannot read property ‘setData‘ of undefined”,代码如下:

onShow: function () {
wx.getSystemInfo({
success: function(res) {
this.setData({
scrollHeight:res.windowHeight-100*res.windowHeight/750
});
},
});
},
原因是getSystemInfo函数体中的this指向闭包,而不是page对象,所以需要在函数外定义this才能用。

onShow: function () {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
scrollHeight:res.windowHeight-100*res.windowHeight/750
});
console.log(that.data.scrollHeight);
},
});
},
另外一种解决方法是使用箭头函数,ES6规定箭头函数没有自己的this,导致内部的this指向外层代码的this(最近的this),这个指向在定义时就已经确定,不会在执行时再指向执行环境的this。

因此可以:

onShow() {
wx.getSystemInfo({
success: (res) => {
//80为顶部搜索框区域高度 rpx转px 屏幕宽度/750
this.setData({
scrollHeight: res.windowHeight - (100 * res.windowWidth / 750)
});
}
})
},
普通函数this和箭头函数this对比分析详细见这篇文章https://segmentfault.com/a/1190000014027459

关于this的指向
总的来说:
this指向执行主体

分几种情况:
普通函数执行时,如果没有执行主体,在非严格模式下指向window,在严格模式下指向undefined。
箭头函数没有this,它继承上下文的this。
构造函数里的this指向生成的实例对象。
事件绑定函数中的this指向当前操作的元素。
call, apply, bind把函数中的this改为指定的执行对象。
————————————————
版权声明:本文为CSDN博主「Krystalcsdn」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/KrystalCSDN/article/details/104743327

原文:https://www.cnblogs.com/puyunzhong/p/12897700.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐