微信小程序this指向问题

news2024/11/26 16:35:32

前言

最近在开发微信小程序时不时会遇到一个很奇怪的问题,有些情况下用 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 函数实际是一个闭包 , 无法直接通过 thissetData,故就会报错。

但是在 es6 中,使用了箭头函数是不存在这个问题的。原因是因为当我们使用箭头函数时,函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定 this 的机制,实际原因是箭头函数根本没有自己的 this,它的 this 是继承外面的,因此内部的 this 就是外层代码块的 this

es6 箭头函数写法

initOn() {
  wx.request({
    url: "接口地址",
    success: (res) => {
      this.setData({
        objs: res.data.map.gdtzxx,
      });
    },
  });
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393399.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

强烈推荐YouTube精选wxWidgets视频教程汇总

wxWidgets介绍 wxWidgets介绍 —— 一文全面了解wxWidgets_boomworks的博客-CSDN博客wxWidgets由爱丁堡大学的Julian Smart于1992年创立。最初是一个用于创建在Unix和Windows上可移植的应用程序的项目,后来它已成长为支持MacOS,GTK以及许多其他工具包和…

【Linux】-- 权限和Shell运行原理

目录 Shell的运行原理 用户切换 su - / su sudo 权限 chmod chown chgrp 八进制方法修改文件属性 目录权限 粘滞位 umask 自定义默认权限 Shell的运行原理 广义上,Linux发行版 Linux内核 外壳程序 Linux 从广义上来理解它是一个操作系统 而从狭义上…

NTLM Relay利用

简介 NTLM Relay也被就是Net-NTLM Relay攻击,当获得Net-NLTM Hash之后可以进行攻击重放, 进行中间人攻击,攻击者作为中间人在客户端与服务端之间转发NTLM认证数据包,从而模拟客户端 身份访问服务端的资源,本篇文章主要是介绍NTLM Relay常见的利用手法以及漏洞,Rela…

蓝桥杯真题31日冲刺 |第一天

蓝桥杯真题31日冲刺 |第一天 一:完全平方数 题目:[链接](完全平方数 - 蓝桥云课 (lanqiao.cn)) 思路: 将 每个 完全平方数都 消掉,剩下的就是 不能构成平方的数 以12 为例: 所以 12 只要再 乘个三 即可满足 代…

leetcode-每日一题-1653(中等,字符串判断)

这道题想清楚原理的话解决起来还是比较简单的&#xff0c;就是从第一个字母开始向两边排除字母给你一个字符串 s &#xff0c;它仅包含字符 a 和 b​​​​ 。你可以删除 s 中任意数目的字符&#xff0c;使得 s 平衡 。当不存在下标对 (i,j) 满足 i < j &#xff0c;且 s[i]…

当ChatGPT遇见stable-diffusion,你不敢相信的创意艺术之旅!

前言 欢迎来到一场创意的旅程&#xff0c;这里将聚焦于 ChatGPT 和 stable-diffusion 这两个令人激动的技术。在这篇文章中&#xff0c;我们将会探索这两种技术如何结合使用&#xff0c;为艺术创作带来全新的可能性。我们将探讨如何利用 ChatGPT 生成富有想象力的创意&#xf…

Java异常详解

文章目录1. 异常1.1 异常概述1.2 异常机制概述1.3 程序错误一般分为三种1.4 异常继承结构1.5 编译时异常和运行时异常别称1.6 编译时异常和运行时异常的区别1.7 Throwable中java的异常一般分为受查异常和非受查异常1.8 异常处理方式1.9 Java常见异常1.10 throw和throws的区别1.…

Mac安装chromedriver

1、查看当前Google浏览器版本 打开Google浏览器&#xff0c;网址栏输入&#xff1a;chrome://settings/help 2、下载对应版本的chromedriver &#xff08;1&#xff09;下载地址&#xff1a;http://chromedriver.storage.googleapis.com/index.html &#xff08;2&#xff09…

17万字 JUC 看这一篇就够了(一) (精华)

JUC 今天我们来进入到 Java并发编程 JUC 框架的学习 &#xff0c;内容比较多&#xff0c;但希望我们都能静下心来&#xff0c;耐心的看完这篇文章 文章目录JUC进程概述对比线程创建线程ThreadRunnableCallable线程方法APIrun startsleep yieldjoininterrupt打断线程打断 park终…

运算符——“Python”

各位CSDN的uu们你们好呀&#xff0c;好久没有更新Python文章了&#xff0c;今天&#xff0c;小雅兰的内容就是Python中的操作符啦&#xff0c;那么现在&#xff0c;就让我们进入Python的世界吧 注释 注释是什么 注释的语法 注释的规范 输入输出 和用户交互 通过控制台输出 通…

OpenAI CTO、吴恩达夫人……AI 领域值得关注的「她」力量,个个都是女强人

内容一览&#xff1a; 「她时代」来临&#xff0c;一些有着强大信念与热情的女性&#xff0c;纷纷投身至 AI 领域&#xff0c;成为不可或缺的存在与力量。值此国际妇女节到来之际&#xff0c;HyperAI超神经盘点了领域内令人印象深刻的杰出的女性代表。 关键词&#xff1a;国际妇…

三八妇女节送什么礼物?实用的三八妇女节礼物清单

三八妇女节送什么礼物好呢&#xff01;随着中国人民的生活越来越好&#xff0c;想法也越来越多&#xff0c;&#xff0c;一般三八妇女节送礼物的&#xff0c;基本上都是给老师送礼物&#xff0c;或者给妈妈送礼物&#xff0c;我就给大家分享下&#xff0c;我今天下午送的什么吧…

超500万人次关注的千人大会!2023实在智能【未来电商高峰论坛】,圆满收官!

数字经济时代&#xff0c;电商产业乘风而起。3月4日-5日&#xff0c;一场电商行业盛会——由实在智能参与主办的未来电商高峰论坛暨2023第一届电商生态赋能大会在杭州未来科技城圆满举办。本次大会是在经济复苏背景下&#xff0c;紧紧抓住消费回暖机遇&#xff0c;进一步创新融…

scratch老鹰捉小鸡 电子学会图形化编程scratch等级考试二级真题和答案解析2022年12月

目录 scratch老鹰捉小鸡 一、题目要求 1、准备工作 2、功能实现 二、案例分析 <

在Windows下使用Python嵌入式环境包

在 Python Releases for Windows 页面下载你需要的那个版本的 Windows embeddable package (64-bit) 文件&#xff0c;这样就得到一个 python-x.x.x-embed-amd64.zip 文件。将这个压缩包文件解压到任意目录下。 在目录中找到 pythonxxx._pth 文件&#xff0c;去掉 import site …

Micro SD Card参数基本介绍

Micro SD Card原名Trans-Flash Card或T-Flash Card&#xff0c;由SanDisk&#xff08;闪迪&#xff09;公司发明&#xff0c;目前主要用于可移动设备储存&#xff0c;比如数码相机、手机、MP4等可移动设备。 一、品牌标识 Micro SD Card虽是SanDisk&#xff08;闪迪&#xff…

Spring Cloud Gateway 服务网关详解

文章目录1.网关简介2.Gateway简介3.Gateway快速入门3.1.基础版3.2.增强版3.3.简写版4.Gateway核心架构4.1.基本概念4.2.执行流程5.断言5.1.内置路由断言工厂5.2.内置路由断言工厂的使用5.3.自定义路由断言工厂6.过滤器6.1.局部过滤器6.1.1.内置局部过滤器6.1.2.内置局部过滤器使…

电子招投标系统源码之了解电子招标投标全流程

随着各级政府部门的大力推进&#xff0c;以及国内互联网的建设&#xff0c;电子招投标已经逐渐成为国内主流的招标投标方式&#xff0c;但是依然有很多人对电子招投标的流程不够了解&#xff0c;在具体操作上存在困难。虽然各个交易平台的招标投标在线操作会略有不同&#xff0…

3.6笔试

今天做了一场cvte笔试是测试方向的一共有19道题目大概有四五道计算机网络的题目三四道python的题目三四道mysql查询问题设计测试用例题目大概有两道一道编程题1编程奇怪的是编程题出现在第二题,而且做一题交一题题目有点难理解,我看题就花了五分钟我怕后面还有编程题就草草交了…

Vue-Router路由系统

Vue-Router路由系统一、Vue路由简介和基础使用1.1 路由是什么1.2 为何使用路由1.3 Vue中如何实现路由1.4 组件分类1.5 vue-router路由系统使用二、声明式导航2.1 什么是声明式导航2.2 声明式导航跳转传参三、重定向和模式设置3.1 重定向3.2 找不到路径提示404页面3.3 路由模式设…