在 React 组件中,函数定义方式影响this指向的核心原因是箭头函数与普通函数的作用域绑定规则不同,具体差异如下:​

1. 普通函数(function定义)需要手动bind(this)的原因​

当用function在组件内定义方法时:

class MyComponent extends React.Component {handleClick() {console.log(this); // 若未绑定,此处this为undefined}render() {return <button onClick={this.handleClick}>点击</button>;}
}

函数独立于实例存在: handleClick是组件类的方法,但其this指向调用时的上下文,而非组件实例。​
事件回调中的this丢失:handleClick作为事件回调(如onClick)传递时,实际调用时脱离了组件实例,this会默认指向undefined(严格模式下)。​
bind(this)的作用: 通过bind强制将函数的this绑定到组件实例,确保调用时this能访问组件的stateprops等属性:

constructor() {super();this.handleClick = this.handleClick.bind(this); // 绑定后this指向实例
}

2. 箭头函数不需要手动绑定的原因​

箭头函数的特性决定了其this指向是定义时的上下文,而非调用时:

class MyComponent extends React.Component {handleClick = () => {console.log(this); // 此处this直接指向组件实例}render() {return <button onClick={this.handleClick}>点击</button>;}
}

词法作用域绑定: 箭头函数没有自己的this,其this继承自定义时所在的作用域(这里是组件实例的上下文)。​
与组件实例绑定: 在类组件中,箭头函数作为类属性定义时,this会自动绑定到当前组件实例,无论如何传递或调用,this都不会丢失。​
无需额外bind: 因为this在定义时已固定,作为事件回调传递时,this依然指向组件实例,可直接访问this.statethis.props

3. 本质区别:this的绑定时机

函数类型this指向规则绑定时机React 组件中的表现
普通函数由调用方式决定(谁调用指向谁)运行时绑定需手动bind(this)才能指向组件实例
箭头函数继承定义时的上下文(词法作用域)定义时绑定自动指向组件实例,无需额外绑定

4. 与call/apply的关联(呼应之前的call实现)​

普通函数this可通过bind(本质是返回一个this固定的新函数)、call/apply(立即调用时指定this)修改,这也是手动绑定的底层原理。​
箭头函数this无法被bindcall/apply修改,因为其this在定义时已固化,这也是箭头函数无需手动绑定的根本原因。

另,自己手动实现bind/call/apply函数,可参考这篇
手动实现 JavaScript 的 call、apply 和 bind 方法

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 项目中的组件引用如何实现,依赖组件间的数据功能交互及示例演示

在 Vue 项目中&#xff0c;组件间的引用与数据交互是核心功能之一。以下是组件引用和数据交互的详细实现方式及示例&#xff1a;一、组件引用方式 1. 基本组件引用 局部注册&#xff1a;在父组件中按需引入子组件并注册。 // ParentComponent.vue import ChildComponent from .…

✨ 使用 Flask 实现头像文件上传与加载功能

文章目录&#x1f9f1; 技术栈&#x1f5c2;️ 项目结构与配置&#x1f510; 用户身份校验逻辑&#x1f4e4; 头像上传接口&#xff1a;/file/avatar/upload&#x1f4e5; 加载头像接口&#xff1a;/file/avatar/load/<filename>&#x1f9ea; 示例请求&#xff08;使用 …

去除视频字幕 5: 使用 ProPainter, 记录探索过程

使用 ProPainter 去除视频上的字幕&#xff0c;效果演示&#xff08;比之前好多了。&#xff09;。 1. 项目目标 去除视频 (bear.webm) 中的硬字幕。 2. 初始尝试与关键失败&#xff1a;IOPaint 方法: 使用 IOPaint&#xff08;一个图像修复工具&#xff09;配合 PaddleOCR 逐…

JavaScript HTTP 请求:从老古董到新潮流

前端开发离不开跟后端打交道&#xff0c;HTTP 请求就是这座桥梁。JavaScript 提供了好几种方式来发请求&#xff0c;从老牌的 XMLHttpRequest (XHR) 到现代的 Fetch API&#xff0c;再到各种好用的第三方库&#xff08;像 Axios、Ky、Superagent&#xff09;。咱们一个一个聊清…

Windows10系统使用Cmake4.1.0构建工具+Visual Studio2022编译Opencv4.11教程

安装提示 后续安装本Cmake和Opencv版本及以上都可以。Microsoft Visual Studio2022已默认安装&#xff0c;没有安装给出教程链接。 一、Cmake4.1.0下载 1.官网下载&#xff1a;https://cmake.org/download/&#xff0c;找到cmake-4.1.0-rc3-windows-x86_64.zip版本 2.压缩包…

【性能测试】Jmeter+Grafana+InfluxDB+Prometheus Windows安装部署教程

一、工具作用与整体架构 1.1 各工具核心作用 工具作用描述关键特性Jmeter性能测试工具&#xff0c;模拟多用户并发请求&#xff0c;生成测试数据支持HTTP/HTTPS、数据库等多种协议&#xff0c;可自定义测试场景InfluxDB时序数据库&#xff0c;专门存储时间序列数据&#xff0…

【Kubernetes】使用Deployment进行的资源调度,资源清理,伸缩与更新管控

Kubernetes Deployment 实战&#xff1a;从资源清理到伸缩与更新管控 一、基础准备&#xff1a;清理闲置 ReplicaSet 在使用 Deployment 时&#xff0c;每次更新都会生成新的 ReplicaSet&#xff08;简称 RS&#xff09;&#xff0c;旧的 RS 会被保留但设置为 DESIRED0。这些闲…

stm32使用USB虚拟串口,因电脑缺少官方驱动而识别失败(全系列32单片机可用)

驱动下载地址 官网地址&#xff1a;https://www.st.com/en/development-tools/stsw-stm32102.html

枚举中间位置基础篇

参考资料来源灵神在力扣所发的题单&#xff0c;仅供分享学习笔记和记录&#xff0c;无商业用途。 核心思路&#xff1a; 一&#xff1a;直接直接用数据结构记录需要的数据&#xff0c;在枚举右&#xff0c;维护左的循环中&#xff0c;删除当前位置的元素即可达成一样效果 二…

企业选择将服务器放在IDC机房托管的优势

在服务器作为数据存储和传输的核心设备的社会环境中&#xff0c;服务器的稳定性和安全性会直接影响到企业业务的连续性和用户的满意程度&#xff0c;随着云计算技术和大数据的兴起&#xff0c;企业对于服务器的需求也在日益增加&#xff0c;而如何高效、安全的管理服务器则是各…

自动化UI测试工具TestComplete的AI双引擎:即时数据集 + 自愈测试

随着敏捷开发和持续交付模式的普及&#xff0c;传统的软件测试方法正面临着前所未有的挑战。测试团队在追求快速迭代的同时&#xff0c;往往陷入测试数据准备和测试维护的泥潭&#xff0c;严重制约了交付效率和质量保障能力。 TestComplete作为业界领先的自动化测试工具&#…

用KNN实现手写数字识别:基于 OpenCV 和 scikit-learn 的实战教学 (超级超级超级简单)

用KNN实现手写数字识别&#xff1a;基于 OpenCV 和 scikit-learn 的实战教学在这篇文章中&#xff0c;我们将使用 KNN&#xff08;K-Nearest Neighbors&#xff09;算法对手写数字进行分类识别。我们会用 OpenCV 读取图像并预处理数据&#xff0c;用 scikit-learn 构建并训练模…

数据结构自学Day15 -- 非比较排序--计数排序

一、计数排序&#xff08;Counting Sort&#xff09;计数排序是一种非比较型的排序算法&#xff0c;它的核心思想是&#xff1a;利用“元素的值”来确定它在结果数组中的位置&#xff0c;通过“统计每个数出现的次数”来完成排序。二、如何实现计数排序&#xff08;核心步骤&am…

k8s的权限

来自博客&#xff1a;25-k8s集群中-RBAC用户角色资源权限_权限 资源 角色-CSDN博客 一.RBAC概述&#xff08;基于角色的访问控制&#xff09; 1.图解 用户&#xff1a; 1.user 2.serviceAccount 3.Group 用户角色 1.Role:局部资源角色 2.clusterRole:全局资源角色额 角色绑…

C++ - 仿 RabbitMQ 实现消息队列--服务端核心模块实现(三)

目录 队列数据管理 代码实现 测试代码 绑定信息(交换机-队列)管理 代码实现 测试代码 队列数据管理 当前队列数据的管理&#xff0c;本质上是队列描述信息的管理&#xff0c;描述当前服务器上有哪些队列。 定义队列描述数据类 队列名称是否持久化标志是否独占标志是否自…

51c自动驾驶~合集9

自己的原文哦~ https://blog.51cto.com/whaosoft/11627386 #端到端1 说起端到端&#xff0c;每个从业者可能都觉得会是下一代自动驾驶量产方案绕不开的点&#xff01;特斯拉率先吹响了方案更新的号角&#xff0c;无论是完全端到端&#xff0c;还是专注于planner的模…

时间长了忘记jupyter的环境是哪个了

有这些但是忘记是哪个了jupyter kernelspec list查看内核路径&#xff0c;这个内核是用来告诉jupyter 去哪找内核配置的到这个路径下打开json文件查看使用的python环境从而确定是哪个conda环境为jupyter使用的python环境jupyter的工作原理&#xff1a;在创建conda环境后会安装j…

PYTHON从入门到实践-15数据可视化

数据可视化是数据分析中不可或缺的一环&#xff0c;它能够将抽象的数据转化为直观的图形&#xff0c;帮助我们更好地理解数据特征和发现潜在规律。本文将介绍如何使用Python中的Matplotlib和Plotly库进行数据可视化&#xff0c;并通过掷骰子的概率模拟案例展示可视化的实际应用…

Spring IOC 容器 **默认注册 Bean** 的 8 条规则

Spring IOC 容器 默认注册 Bean 的 8 条规则 &#xff08;Spring Framework 6.x 源码级总结&#xff09;阅读提示&#xff1a;把下面 8 条规则背下来&#xff0c;再读 Spring 源码时&#xff0c;你会在任何一行代码里立刻知道「这个 BeanDefinition 是从哪儿来的」。1️⃣ 环境…

29.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--用户配置服务

用户配置服务是孢子记账中最简单的部分。简单说&#xff0c;用户配置服务就是用户自定义的配置项存储服务&#xff0c;用于我们的APP根据用户的配置实现指定的功能。它提供了一个简单的接口&#xff0c;允许用户存储和检索他们的配置数据。就目前来说&#xff0c;用户配置只有一…