React-component-this-类组件及JS中this指向性问题

2023-10-24 14:30
文章标签 javascript 问题 react 组件 js frontend component 指向性

本文主要是介绍React-component-this-类组件及JS中this指向性问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

React类组件中this指向性问题

JS中this指向性问题

1.普通函数

2.箭头函数

3.没有显式调用

4.严格模式

5.es6 class语法

React类组件中this指向性问题

<body><script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app"></div><script type="text/babel">class Clock extends React.Component{constructor(props){console.log('constructor--');super(props)this.state = {time:new Date().toLocaleTimeString()}console.log('constructor',this);// go函数产生新的函数(已经绑定了this)=>新的go函数赋值给this.go属性上this.go = this.go.bind(this)//指向新的函数,不再指向go() this.go()=新的函数(this指向组件实例)}go(){console.log(this);//默认指向undefinedthis.setState({time:new Date().toLocaleTimeString()})}render(){console.log('render--');console.log('render--',this);//当前组件实例,也是箭头函数(内部函数)this指向return(<div><h1>Clock</h1><h3>time:{this.state.time}</h3>{/*go0:go中的this指向underfined*/}<button onClick = {this.go}>指针走动go0</button>{/*1:未点击就报错:内存溢出 react-dom.development.js:23833 Uncaught Error: Maximum update depth花括号中是直接执行函数 不是绑定函数this是组件实例,谁调用指向谁 this是当前组件实例死循环:this.go()=>go()=>serStaet=>render=>this.go()死循环 内存溢出*/}{/*<button onClick = {this.go()}>指针走动go1</button>*/}<br /><br />{/*2: 执行函数声明函数:const fn=()=>{}执行函数:fn(){箭头函数:this指向外围的作用域}此外围作用域为render,this指向当前组件实例问题:2.1:函数是特殊对象,占用的是堆内存空间,重复声明会导致重新开辟新的内存空间,相对来说,性能相对比较差2.2:JSX元素中添加了js逻辑代码,会导致代码复杂,臃肿,后期维护困难*/}<button onClick = {()=>{console.log("=>",this);this.setState({time:new Date().toLocaleTimeString()})}}>指针走动go001</button><button onClick = {()=>{// 箭头函数中this指向render实例this.go()}}>指针走动go002</button><button onClick = {function(){// 方式不可行 this查找不到 会报错:Uncaught TypeError: Cannot read properties of undefineconsole.log(this);//this指向underfinedthis.setState({time:new Date().toLocaleTimeString()})}}>指针走动go003</button>{/*3.通过bind的方式,手动改变this指向,解决了代码混乱的问题bind原理:bind里面每次声明新的函数,新的函数指向手动改变this的指向,将其返回,每次都会重新绑定问题:bind重新绑定生成新的函数,占内存*/}<button onClick ={this.go.bind(this,'可以传参')}>指针走动go004</button>{/*4.一次性绑定,解决重复绑定问题执行此阶段的时候 this.go = 函数(已经绑定好this)*/}<button onClick ={this.go}>指针走动go005</button>{/*5.es7新特性写法*/}<button onClick ={this.go}>指针走动go006</button>{/*go(){console.log(this);//默认指向undefinedthis.setState({time:new Date().toLocaleTimeString()})}*/}{/*或者是写道constructor中this.go(){console.log(this);//默认指向undefinedthis.setState({time:new Date().toLocaleTimeString()}) }*/}</div>)}}ReactDOM.render(<Clock />,document.getElementById('app'))</script>
</body>

运行页面：

 

JS中this指向性问题

1.普通函数

<script>var name = 'jack'var objX = {name:'objxName',sayName:function(){// 普通函数console.log(this.name);}}var objY = {name:'objyName'}objX.sayName() //输出：objxNameobjX.sayName.call(objY) //this指向具体对象objY 输出：objy objX.sayName.call() //指向全局对象window 输出：jack// 普通函数this跟 调用对象函数 有关，谁调用指向谁；和改变this指向方法有关，有具体指向对象时this指向该对象；没有具体指向对象时，指向window</script>

普通函数this跟 调用对象函数 有关，谁调用指向谁；和 改变this指向方法 有关，有具体指向对象时this指向该对象；没有具体指向对象时，指向window

2.箭头函数

<script>var name = 'jack'var objX = {name:'objxName',sayName:()=>{// 箭头函数console.log(this.name);}}var objY = {name:'objyName'}objX.sayName() //输出：jackobjX.sayName.call(objY) //输出：jackobjX.sayName.call() //输出：jack// 箭头函数：// 箭头函数中的this和 定义函数时所在作用域所指向的对象 (定义时所在作用域的外围环境就是this指向 外围的js对象 跟调用对象没有关系)在此处就是window// 失效：调用失效&强制改变this指向也失效</script>

箭头函数：

箭头函数中的this和 定义函数时所在作用域所指向的对象 有关 (定义时所在作用域的外围环境就是this指向 外围的js对象 跟调用对象没有关系) 在此处就是window

失效：调用失效&强制改变this指向也失效

3.没有显式调用

<script>var name = 'jack'var objX = {name:'objxName',sayName:function(){// 普通函数console.log(this.name);}}objX.sayName() //输出：objxNamevar copyFun = objX.sayNamecopyFun()//输出：jack//没有显示调用(显示调用：前面有具体的对象调用叫做显示调用)=>window调用=>谁调用this指向谁,this指向window
</script>

没有显示调用 (显示调用：前面有具体的对象调用叫做显示调用) =>window调用=>谁调用this指向谁,this指向window

4.严格模式

<script>'use strict'//开启严格模式，意味着this不会自动绑定到全局对象windowvar name = 'jack'var objX = {name:'objxName',sayName:function(){// 普通函数console.log(this.name);//Cannot read properties of undefined出错，找不到this}}objX.sayName() //输出：objxNamevar copyFun = objX.sayNamecopyFun()//输出：undefined 相当于undefined.copyFun()=>copyFun.sayName=>this.name=>undefined.name// 出现报错：TypeError: Cannot read properties of undefined
</script>

'use strict' ：开启严格模式，意味着this不会自动绑定到全局对象window

5.es6 class语法

<script>class C{// es6语法// 类通过new的方式调用go(){console.log(this);//C{}}// react:将自定义函数传给react，再去执行callback(fun){// 严格模式：使用es6 class中声明的方法自动使用了严格模式//var fun = this.go => fun()隐式调用(this不会自动绑定window)fun()//}render(){// 将go函数转给reactthis.callback(this.go)}}var c = new C()c.go()//输出：C{} this指向类的实例(类似类组件实例)c.render() //undefind
</script>

使用es6 class中声明的方法自动使用了严格模式

这篇关于React-component-this-类组件及JS中this指向性问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/275826。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2