react中类组件this指向

这是一个标准的类组件

import React,{Component} from 'react';
class View extends Component{constructor(props){super(props)}state={}  //写在这里跟写在constructor中一样,都可以起到初始化的效果,并且可以省去thisfn(){}fn1(){}render(){return(<div><button onClick={this.fn}>按钮</button><ul>{this.fn1()}</ul></div>)	}
}

接下来是this指向的问题

主要分三个模块:

  • constructor:this指向new生成的实例,这里也就是我们的View组件了

  • render():this指向也是组件实例View

  • 方法:

       fn(): this指向是undefind fn1(): this指向是组件实例
    

为什么fn()的指向是undefined?

分析:
1、我们知道调用都是有()的,所以这里只是把onClick指向堆中的fn,调用时也就没有实例————所以this会指向window
2、使用babel编译后就是严格模式(严格模式下this不能指向window),所以this就会变为undefined

改变方法this指向的4种方法

  1. 在contructor写入this.fn=this.fn.bind(this)

    会在实例的属性中添加一个fn属性,指向改变this指向之后的fn(),原型链的的fn()并无变化。
    使用bind是因为不会自执行,而call,apply都会自执行

  2. 方法使用箭头函数的写法fn=()=>{}

    箭头函数this指向特性

  3. 调用时使用箭头函数,可以传参()=>{this.fn("text")}
  4. 调用时使用bind改变this指向,也可以传参this.fn.bind(this,'text')

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

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

相关文章

如何使用 PTS 快速发起微服务压测

简介&#xff1a;本文讲阐述什么是微服务架构、微服务架构对系统稳定性带来的影响&#xff0c;以及用性能测试验证稳定性的必要性、用户进行微服务压测的痛点和 PTS 的独特优势、云上使用 PTS 快速发起微服务压测的步骤&#xff0c;以及压测完成后排查分析相关问题的 Tips。 作…

一首让计算机崩溃的歌曲!

大家好&#xff0c;我是轩辕。想象一个场景&#xff1a;手机里播放一首音乐&#xff0c;然后你带着手机从一台电脑旁经过&#xff0c;电脑就被你弄崩溃死机了。这是不是有点像电影里的桥段&#xff1f;一年前&#xff0c;我写过一篇文章&#xff1a;电脑关机了&#xff0c;黑客…

OpenYurt 之 Yurthub 数据过滤框架解析

简介&#xff1a;OpenYurt 是业界首个非侵入的边缘计算云原生开源项目&#xff0c;通过边缘自治&#xff0c;云边协同&#xff0c;边缘单元化&#xff0c;边缘流量闭环等能力为用户提供云边一体化的使用体验。在 Openyurt 里边缘网络可以使用数据过滤框架在不同节点池里实现边缘…

react中规范类型接口的使用

安装 yarn add prop-types 使用 // 注意大小写 import PropTypes from prop-types {name:小红,age:13,sex:"女"} //场景 name String类型&#xff0c;必传 // age Nuber类型&#xff0c;默认值18 // sex String类型&#xff0c;默认值男//类型的限制 Per…

金融核心系统云原生转型的三个挑战、六个误区和四个步骤

嘉宾 | 马振雄出品 | CSDN云原生近年来&#xff0c;云原生技术发展如火如荼&#xff0c;IT系统云原生转型已成共识&#xff0c;留给各行各业的只是何时云原生、怎样云原生的时间和方式问题。金融行业作为各类转型历来的排头兵&#xff0c;在推进云原生转型上同样不逞多让。金融…

KubeVela v1.3 多集群初体验,轻松管理应用分发和差异化配置

简介&#xff1a;KubeVela v1.3 在之前的多集群功能上进行了迭代&#xff0c;本文将为你揭示&#xff0c;如何使用 KubeVela 进行多集群应用的部署与管理&#xff0c;实现以上的业务需求。 作者&#xff1a;段威&#xff08;段少&#xff09; 在当今的多集群业务场景下&#…

Java 定时任务技术趋势

简介&#xff1a;定时任务是每个业务常见的需求&#xff0c;比如每分钟扫描超时支付的订单&#xff0c;每小时清理一次数据库历史数据&#xff0c;每天统计前一天的数据并生成报表等等。 作者&#xff1a;黄晓萌&#xff08;学仁&#xff09; Java 中自带的解决方案 使用 Ti…

ajax,jsonp,axios面试题

什么是前后端联调&#xff1f; react中axios跨域的配置 const { createProxyMiddleware } require(http-proxy-middleware); module.exports function (app) {app.use(// https://home-api.pinduoduo.com/home/mediareports?page_number1&page_size20/home, createPro…

从再造到赋能——360数科举办第二届技术开放日

8月31日&#xff0c;360数科在北京举办“从再造到赋能——2022年技术开放日”。这是360数科的第二届开放日&#xff0c;全面展示了公司在金融科技业务全环节的精细化运营成果&#xff0c;呈现了360数科从市场连接者到流程再造者的技术演化历程&#xff0c;展望了其成为行业赋能…

EventBridge 特性介绍|以 IaC 的方式使用 EventBridge

简介&#xff1a;本文将重点介绍 EventBridge 和 IaC 的重点概念和特性&#xff0c;然后演示如何应用 IaC 理念自动化部署 EventBridge 来使用这些概念和特性。 作者&#xff1a;王川&#xff08;弗丁&#xff09; 引言 EventBridge 作为构建 EDA 架构的基础设施&#xff0c…

关于项目经验的

页面常用的尺寸 PC&#xff1a;内容区宽度&#xff1a; 早期&#xff1a;60 980 1000 1200 1380 字体大小&#xff1a; 12px 14px 16px 18px 常用字体&#xff1a;“微软雅黑” Arial&#xff08;针对英文&#xff09; H5&#xff1a; 750(大多设计稿的宽度) 暂时保留页面状态…

如何使用 Serverless Devs 部署静态网站到函数计算(上)

简介&#xff1a;部署个静态网站到函数计算~ 前言 公司经常有一些网站需要发布上线&#xff0c;对比了几款不同的产品后&#xff0c;决定使用阿里云的函数计算&#xff08;FC)来托管构建出来的静态网站。 FC 弹性实例自带的500 Mb 存储空间对静态网站来说简直是太充足了 。 函…

盛邦安全创始人权晓文入选IDC中国CSO名人堂十大人物

在近日举办的IDC 2022 CSO全球网络安全峰会&#xff08;中国站&#xff09;上&#xff0c;盛邦安全入选API领域推荐厂商&#xff0c;盛邦安全创始人权晓文入选“中国CSO名人堂&#xff08;十大人物&#xff09;”&#xff0c;展现了盛邦安全在网络安全创新方面的不断进取和突出…

硬核调试实操 | 手把手带你实现 Serverless 断点调试

简介&#xff1a;本文将借助 Serverless Devs 工具&#xff0c;对函数计算 (FC&#xff09;应用的断点调试步骤进行详细指导&#xff0c;手把手带你实现 Serverless 的断点调试&#xff0c;并从以下四个方面为你厘清“硬核调试”的脉络步骤&#xff0c;干货满满。 导读&#x…

axios的安装指令

react中安装axios yarn add axios //安装代理 yarn add http-proxy-middleware

兑现 Service Mesh 的新价值:精确控制“爆炸半径”

简介&#xff1a;本文分享了阿里云内部所沉淀的全链路流量打标与路由的能力&#xff0c;做出服务网格技术新体验的同时&#xff0c;很好地兑现了服务网格的新价值。 作者&#xff1a;至简 软件是以持续迭代的方式去不断演进的。某种程度上&#xff0c;我们并不担心软件不完善…

15M安装包就能玩《原神》,带你了解云游戏背后的技术秘密

简介&#xff1a;对于大多数玩家来说&#xff0c;云游戏已经不是一个陌生的概念&#xff0c;它经常和秒玩、不吃设备、大屏临场感、上手门槛低、真香等字眼一起出现在评论留言区。的确&#xff0c;对于既想尝试高品质游戏大作又不想一直卷装备的玩家来说&#xff0c;云游戏做到…

ref绑定dom的三种写法

1、字符串形式 这种字符出串写法因为效率不好&#xff0c;所以不推荐使用 语法 标签上使用ref"name" 进行绑定 方法中this.refs.name拿到dom <input ref"input1" type"text" placeholder"点击按钮弹出内容" /> <button onC…

一文看懂边缘云在广电行业的应用

简介&#xff1a;随着中国广电的5G布局在不断加速&#xff0c;各地广电运营商均已开展面向边缘云建设和业务探索。边缘云作为5G网络架构中关键一环&#xff0c;具有广覆盖、低时延、大带宽的技术特点&#xff0c;是打通智慧广电建设的“经脉”&#xff0c;对未来开展4K/8K超高清…

2022 互联网中秋月饼大赏,腾讯送火腿,字节寓意圆满,你最钟爱哪款呢?(文末有抽奖)...

整理 | 梦依丹出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;配图来自视觉中国又是一年花好处&#xff0c;人月中秋两团圆&#xff01;今年的中秋&#xff0c;你是在家乡还是在他乡度过呢&#xff1f;无论在何处&#xff0c;只要心在一起&#xff0c;多远都不是距…