JavaScript中的(this)指向问题(如何正确判断this,箭头函数的this是什么)

news2024/11/18 21:33:58

🐾如何正确判断this

👉我们先运用下面的代码,模拟我们日常生活中常见的三个开发场景,并针对每个场景我们来一 一介绍this的指向


	function fun1() {
		console.log(this.a)
	}
	var a = 1
	//场景1
	fun1()
	const obj = {
		a: 2,
		fun1: fun1
	}
	//场景2
	obj.fun1()
	//场景3
	const c = new fun1()

1️⃣ 场景1,我们直接调用了fun1 函数,这种情况不管 fun1 放在上面地方,它的this 一定指向window
2️⃣ 场景2,我们通过obj对象去调用了fun1方法,这时候我们只需要记住谁调用了它,谁就要对它负责,谁就是this,在这里 this 就指向了**obj**
3️⃣场景3,这里使用 new 关键字创建了一个实例,对于这种方式来说 this 也就被绑定在了 c 的上面

🔱箭头函数的this 指向

🎲 介绍完上面的几种情况相信大家对 this 的指向有了初步的了解,下面我们继续介绍箭头函数 的this 指向问题:
🥇 首先箭头函数其实是没有 this 的,箭头函数中的 this 取决于包裹着箭头函数的最外层普通函数,在下面这个例子中:

function a() {
return () => {
return () => {
console.log(this)
}
}
}
console.log(a()()())

因为包裹着箭头函数的最外层普通函数是fun ,而funthis 指向 window ,所以在这里的箭头函数自然 this也是指向了 window。另外对箭头函数使用 bind 这类函数是无效的。

🥇 最后种情况:类似于 bind 这些改变上下文的API,在这些函数中,this 取决于第一个参数,如果第一个参数为空,那么就指向了 window

let obj = {}
		let fn = function () { console.log(this) }
		fn.bind().bind(obj)()
		
		fn.bind(obj).bind()()

在这里插入图片描述
我们还可以把上述代码进一步的转换:


// fn.bind().bind(a) 等于

let fn2 = function fn1() {
	return function() {
		return fn.apply()
		}.apply(obj)
}
fn2()

🍰从上述代码中发现,不管我们给函数 bind 几次,fun 中的this 永远由第一次 bind 决定, 所以结果永远是 window

let obj = { name: 'jscj' }
function fun() {
console.log(this.name)
}
fun.bind(obj)() // => 'jscj'

✌️ 以上就是 this 的规则了,但是可能会发生多个规则同时出现的情况,这时候不同的规则之间会根据优先级最高的来决定 this 最终指向哪里。
💨优先级:
new 的方式优先级最高,接下来是 bind 这些函数,然后是 obj.fun() 这种调用方式,最后是 fun 这种调用方式,同时,箭头函数的 this 一旦被绑定,就不会再被任何方式所改变。

在这里插入图片描述
今天的分享就到这里啦,小江会一直与大家一起努力,文章中如有不足之处,你的支持是我前进的最大动力,请多多指教,感谢支持,持续更新中 ……

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

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

相关文章

Arduino UNO R3自学笔记17 之 Arduino为啥要用中断?

注意:学习和写作过程中,部分资料搜集于互联网,如有侵权请联系删除。 前言:学习Arduino中断的概念及其功能。 1.什么是中断? 单片机在执行程序时,发生一些其它紧急的事情,单片机将立即暂停当前…

RD-Agent Windows安装教程

RD-Agent Windows安装教程 QuantML QuantML 2024年09月23日 18:30 Content RD-Agent 是微软亚洲研究院推出的一款自动化研究与开发工具,能够通过LLMs自动构建因子和策略,相关介绍见我们之前的文章:RD-Agent :自动化Quant工厂 然…

Redis: Sentinel哨兵监控架构及环境搭建

概述 在主从模式下,我们通过从节点只读模式提高了系统的并发能力并发不断增加,只需要扩展从节点即可,只要主从服务器之间,网络连接正常主服务器就会将写入自己的数据同步更新给从服务器,从而保证主从服务器的数据相同…

国外电商系统开发-用户第一次需求反馈

一、用户反馈 因用户不懂系统开发,不知道需求应该怎么整理,用户只能从页面端说。 1、首页 a、太花里胡哨啦,不是一目了然; b、主次感不是很强; 2、分类 a、太复杂,前期产品不多 3、详情 a、太多了广…

极端天气道路目标检测数据集 3400张 带标注 VOC YOLO 6类

分类名: (图片张数,标注个数) car: (3210, 13654) truck: (1168,1629) per son: (1517,4359) bicyc le: (334, 589) bus: (381, 439) motorcycle: (164, 214) 总数: (3404, 20884) 总类(nc): 6类 极端天气道路目标检测…

RAG(Retrieval Augmented Generation)及衍生框架:CRAG、Self-RAG与HyDe的深入探讨

近年来,随着大型语言模型(LLMs)的迅猛发展,我们在寻求更精确、更可靠的语言生成能力上取得了显著进展。其中,检索增强生成(Retrieval-Augmented Generation)作为一种创新方法,极大地…

<<机器学习实战>>10-11节笔记:生成器与线性回归手动实现

10生成器与python实现 如果是曲线规律的数据集,则需要把模型变复杂。如果是噪音较大,则需要做特征工程。 随机种子的知识点补充: 根据不同库中的随机过程,需要用对应的随机种子: 比如 llist(range(5)) random.shuf…

Linux 实用工具Axel安装及使用教程(支持多线程下载)

一、Axel 简介 Axel 是一个轻量级的命令行下载加速器,旨在提高文件下载速度。 多线程下载: Axel 可以同时使用多个连接来下载文件,从而加快下载速度。断点续传: 支持中断后继续下载,避免重新开始下载整个文件。轻量级: 资源占用少&#xff0c…

G502 鼠标自定义(配合 karabiner)

朋友送了我一个 G502 多功能鼠标,除了鼠标正常的左键、右键和滑轮外,额外提供了 6 个按键,并且滑轮可以向左、向右、向下按下,共计 9 个自定义的按键。 虽然是 karabiner 的老用户,但一直在使用 TrackPad,所…

SpringBoot上传图片实现本地存储以及实现直接上传阿里云OSS

一、本地上传 概念&#xff1a;将前端上传的文件保存到自己的电脑 作用&#xff1a;前端上传的文件到后端&#xff0c;后端存储的是一个临时文件&#xff0c;方法执行完毕会消失&#xff0c;把临时文件存储到本地硬盘中。 1、导入文件上传的依赖 <dependency><grou…

C++ | Leetcode C++题解之第451题根据字符出现频率排序

题目&#xff1a; 题解&#xff1a; class Solution { public:string frequencySort(string s) {unordered_map<char, int> mp;int maxFreq 0;int length s.size();for (auto &ch : s) {maxFreq max(maxFreq, mp[ch]);}vector<string> buckets(maxFreq 1)…

MySQL--数据库约束(详解)

目录 一、前言二、概念三、数据库约束3.1 约束类型3.1.1 NOT NULL 约束3.1.2 UNIQUE (唯一&#xff09;3.1.3 DEFAULT&#xff08;默认&#xff09;3.1.4 PRIMARY KEY&#xff08;主键&#xff09;3.1.5 FOREIGN KEY&#xff08;外键&#xff09;3.1.6 CHECK 四、总结 一、前言…

Redis篇(最佳实践)(持续更新迭代)

介绍一&#xff1a;键值设计 一、优雅的key结构 Redis 的 Key 虽然可以自定义&#xff0c;但最好遵循下面的几个最佳实践约定&#xff1a; 遵循基本格式&#xff1a;[业务名称]:[数据名]:[id]长度不超过 44 字节不包含特殊字符 例如&#xff1a; 我们的登录业务&#xff0…

十四、磁盘的管理

1.磁盘初始化 Step1:进行低级格式化(物理格式化)&#xff0c;将磁盘的各个磁道划分为扇区。一个扇区通常可分为头、数据区域(如512B大小)、尾 三个部分组成。管理扇区所需要的各种数据结构一般存放在头、尾两个部分&#xff0c;包括扇区校验码(如奇偶校验、CRC循环几余校验码等…

Azkaban:大数据任务调度与编排工具的安装与使用

在当今大数据时代&#xff0c;数据处理和分析任务变得越来越复杂。一个完整的大数据分析系统通常由大量任务单元组成&#xff0c;如 shell 脚本程序、mapreduce 程序、hive 脚本、spark 程序等。这些任务单元之间存在时间先后及前后依赖关系&#xff0c;为了高效地组织和执行这…

【架构】prometheus+grafana系统监控

文章目录 一、Prometheus简介二、Grafana简介三、PrometheusGrafana系统监控的实现四、优势与应用场景 参考 PrometheusGrafana系统监控是一个强大的组合&#xff0c;用于实时监控和分析系统的性能与状态。以下是对这一组合在系统监控中的详细解析&#xff1a; 一、Prometheus…

postgresql僵尸进程的处理思路

简介 僵尸进程&#xff08;zombie process&#xff09;是指一个已经终止但仍然在进程表中保留条目的进程。正常情况下&#xff0c;当一个进程完成执行并退出时&#xff0c;操作系统会通过父进程调用的wait()或waitpid()系统调用来收集该子进程的退出状态。如果父进程未及时调用…

快速了解:MySQL InnoDB和MyISAM的区别

目录 一、序言二、InnoDB和MyISAM对比1、InnoDB特性支持如下2、MyISAM特性支持如下 三、两者核心区别1、事务支持2、锁机制3、索引结构4、缓存机制5、故障恢复6、使用场景 一、序言 在MySQL 8.0中&#xff0c;InnoDB是默认的存储引擎。除了InnoDB&#xff0c;MySQL还支持其它的…

SQL - 函数

1. 操作类函数 这一类函数针对数据结构&#xff0c;表格进行筛选操作 1.1 GROUP BY 根据某个单一列中属性或者多个列对结果集进行分组 SELECT column1, SUM(column2) FROM table GROUP BY column1; 上述代码将所选择列进行column1中的属性分组&#xff0c;作为每一行的索引…