JavaScript函数中this的指向
总结:谁调用我,我就指向谁(es6箭头函数不算)
一、ES6之前
-
每一个函数内部都有一个关键字是
this
,可以直接使用 -
重点: 函数内部的 this 只和函数的调用方式有关系,和函数的定义方式没有关系
1、 函数内部的 this 指向谁,取决于函数的调用方式
1.1、全局定义的函数直接调用,this => window
function fn() {console.log(this)}fn()// 此时 this 指向 window
1.2、 对象内部的方法调用,this => 调用者
var obj = {fn: function () {console.log(this)}
}
obj.fn()
// 此时 this 指向 obj
1.3、 定时器的处理函数,this => window
setTimeout(function () {console.log(this)
}, 0)
// 此时定时器处理函数里面的 this 指向 window
1.4、事件处理函数,this => 事件源
div.onclick = function () {console.log(this)
}
// 当你点击 div 的时候,this 指向 div
1.5、自调用函数,this => window
(function () {console.log(this)
})()
// 此时 this 指向 window
2、改变this指向
call 和 apply 和 bind
- 刚才我们说过的都是函数的基本调用方式里面的 this 指向
- 我们还有三个可以忽略函数本身的 this 指向转而指向别的地方
- 这三个方法就是 call / apply / bind
- 是强行改变 this 指向的方法
call
-
call
方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向 -
语法:
函数名.call(要改变的 this 指向,要给函数传递的参数1,要给函数传递的参数2, ...)
var obj = { name: 'Jack' } function fn(a, b) {console.log(this)console.log(a)console.log(b) } fn(1, 2) fn.call(obj, 1, 2)
fn()
的时候,函数内部的 this 指向 windowfn.call(obj, 1, 2)
的时候,函数内部的 this 就指向了 obj 这个对象- 使用 call 方法的时候
- 会立即执行函数
- 第一个参数是你要改变的函数内部的 this 指向
- 第二个参数开始,依次是向函数传递参数
apply
-
apply
方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向 -
语法:
函数名.apply(要改变的 this 指向,[要给函数传递的参数1, 要给函数传递的参数2, ...])
var obj = { name: 'Jack' } function fn(a, b) {console.log(this)console.log(a)console.log(b) } fn(1, 2) fn.apply(obj, [1, 2])
fn()
的时候,函数内部的 this 指向 windowfn.apply(obj, [1, 2])
的时候,函数内部的 this 就指向了 obj 这个对象- 使用 apply 方法的时候
- 会立即执行函数
- 第一个参数是你要改变的函数内部的 this 指向
- 第二个参数是一个 数组,数组里面的每一项依次是向函数传递的参数
bind
-
bind
方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向 -
和 call / apply 有一些不一样,就是不会立即执行函数,而是返回一个已经改变了 this 指向的函数
-
语法:
var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)
var obj = { name: 'Jack' } function fn(a, b) {console.log(this)console.log(a)console.log(b) } fn(1, 2) var newFn = fn.bind(obj) newFn(1, 2)
- bind 调用的时候,不会执行 fn 这个函数,而是返回一个新的函数
- 这个新的函数就是一个改变了 this 指向以后的 fn 函数
fn(1, 2)
的时候 this 指向 windownewFn(1, 2)
的时候执行的是一个和 fn 一摸一样的函数,只不过里面的 this 指向改成了 obj
方法 | this 指向 | 参数传递方式 | 执行时机 |
---|---|---|---|
call | 指定 | 逐个传递 | 立即执行 |
apply | 指定 | 数组形式传递 | 立即执行 |
bind | 指定 | 逐个传递(可选) | 返回新函数,需手动调用 |
二、ES6之后的箭头函数
箭头函数内部没有 this,箭头函数的 this 是上下文的 this
const input = document.getElementById('input');
const btn = document.getElementById('btn');const obj = {value: 'Hello',printWithRegularFunction: function() {setTimeout(function() {console.log('普通函数:', this.value); // 这里的 this 指向全局对象(window)}, 1000);},printWithArrowFunction: function() {setTimeout(() => {console.log('箭头函数:', this.value); // 这里的 this 指向 obj 对象}, 1000);}};btn.addEventListener('click', () => {obj.value = input.value; // 将输入框的值赋值给 obj.valueobj.printWithRegularFunction();obj.printWithArrowFunction();});
运行结果
注意对象中的箭头函数
虽然箭头函数不能用于定义对象方法(因为它没有自己的 this),但可以在对象中定义箭头函数作为普通属性。
const obj = {name: 'Alice',sayHello: () => {console.log(`Hello, ${this.name}`); // 这里的 this 指向外层作用域}
};obj.sayHello(); // Hello, undefined
注意:箭头函数不适合用于对象方法,因为它会丢失对对象 this 的绑定。
相关文章:

JavaScript函数中this的指向
总结:谁调用我,我就指向谁(es6箭头函数不算) 一、ES6之前 每一个函数内部都有一个关键字是 this ,可以直接使用 重点: 函数内部的 this 只和函数的调用方式有关系,和函数的定义方式没有关系 …...

【java学习笔记】@Autowired注解 使用方法和作用 | 配合@Component注解使用 | IOC控制反转
原本在类中,要用什么对象,就直接new一个对象。这种原始的方式 是由应用本身去控制实例的。 用了Autowired注解后,就相当于把实例(对象)的控制权 交给外部容器来统一管理(降低耦合)。(…...

数论问题76一一容斥原理
容斥原理是一种计数方法,用于计算多个集合的并集中元素的个数,以避免重复计算。以下是其基本内容及相关公式: 两个集合的容斥原理 若有集合A和集合B,那么A与B的并集中元素的个数等于A集合元素个数加上B集合元素个数,再…...

python-leetcode-从中序与后序遍历序列构造二叉树
106. 从中序与后序遍历序列构造二叉树 - 力扣(LeetCode) # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right r…...

【Oracle篇】使用Hint对优化器的执行计划进行干预(含单表、多表、查询块、声明四大类Hint干预)
💫《博主介绍》:✨又是一天没白过,我是奈斯,从事IT领域✨ 💫《擅长领域》:✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控;并对SQLserver、NoSQL(…...

设置jmeter外观颜色
设置jmeter外观颜色 方法: 步骤一、点击顶部选项 ->外观,这里提供了不同的主题,可选自己喜欢的风格。 步骤二、选择后,弹框提示点击Yes。...

计算机网络 IP 网络层 2 (重置版)
IP的简介: IP 地址是互联网协议地址(Internet Protocol Address)的简称,是分配给连接到互联网的设备的唯一标识符,用于在网络中定位和通信。 IP编制的历史阶段: 1,分类的IP地址: …...

神经网络和深度学习
应用 类型 为什么近几年飞速发展 数据增长,算力增长,算法革新 逻辑回归 向量化 浅层神经网络(Shallow neural network) 单条训练数据前向传播计算表达式 batch训练数据前向传播计算表达式 反向传播计算表达式 参数随机初始化 不能全部设为0 原因是同一…...

MySQL 基础学习(3):排序查询和条件查询
MySQL 查询与条件操作:详解与技巧 在本文中,我们将探讨 MySQL 中的查询操作及其相关功能,包括别名、去重、排序查询和条件查询等,并总结一些最佳实践和注意事项。 一、使用别名(AS) 在查询中,…...

webAPI -DOM 相关知识点总结(非常细)
title: WebAPI语法 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端WEB API 了解DOM的结构并掌握其基本的操作,体验 DOM 在开发中的作用 API简介 就是使用js来操作html和浏览器 什么是DOM? 就是一个文档对象模型,是用来呈现预计于任意htm…...

web集群
项目名称 基于keepalivednginx构建一个高可用、高性能的web集群 项目架构图 项目描述 构建一个基于nginx的7层负载均衡的web集群项目,模拟企业的业务环境达到构建一个高并发、高可用的web集群。通过压力测试来检验整个集群的性能,找出瓶颈࿰…...

Elasticsearch——Elasticsearch性能优化实战
摘要 本文主要介绍了 Elasticsearch 性能优化的实战方法,从硬件配置优化、索引优化设置、查询方面优化、数据结构优化以及集群架构设计等五个方面进行了详细阐述,旨在帮助读者提升 Elasticsearch 的性能表现。 1. 硬件配置优化 升级硬件设备配置一直都…...

不背单词快捷键(不背单词键盘快捷键)
文章目录 不背单词快捷键 不背单词快捷键 ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ …...

kafka-保姆级配置说明(consumer)
bootstrap.servers #deserializer应该与producer保持对应 #key.deserializer #value.deserializer ##fetch请求返回时,至少获取的字节数,默认值为1 ##当数据量不足时,客户端请求将会阻塞 ##此值越大,客户端请求阻塞的时间越长&…...

1.五子棋对弈python解法——2024年省赛蓝桥杯真题
问题描述 原题传送门:1.五子棋对弈 - 蓝桥云课 "在五子棋的对弈中,友谊的小船说翻就翻?" 不!对小蓝和小桥来说,五子棋不仅是棋盘上的较量,更是心与心之间的沟通。这两位挚友秉承着"友谊第…...

python3+TensorFlow 2.x(三)手写数字识别
目录 代码实现 模型解析: 1、加载 MNIST 数据集: 2、数据预处理: 3、构建神经网络模型: 4、编译模型: 5、训练模型: 6、评估模型: 7、预测和可视化结果: 输出结果ÿ…...

杨辉三角(蓝桥杯2021年H)
输入一个数字,看杨辉三角压缩矩阵第几个数与之相等。 #include<iostream> using namespace std; /* typedef struct Node {int* data;int size;Node* next; }Node,*Linklist; */ int C(int a,int b) {//求解组合数int c 1,div 1;if (b 0) {c 1;}else {fo…...

【蓝桥杯嵌入式入门与进阶】2.与开发板之间破冰:初始开发板和原理图2
个人主页:Icomi 专栏地址:蓝桥杯嵌入式组入门与进阶 大家好,我是一颗米,本篇专栏旨在帮助大家从0开始入门蓝桥杯并且进阶,若对本系列文章感兴趣,欢迎订阅我的专栏,我将持续更新,祝你…...

C++ queue
队列用vector<int>好不好 不好 为什么? 因为队列是先进先出 vector没有提供头删(效率太低) 要强制适配也可以 就得用erase函数和begin函数了 库里面的队列是不支持vector<int>的 queue实现 #pragma once #include<vector…...

【MySQL-7】事务
目录 1. 整体学习思维导图 2. 什么是事务 2.1 事务的概念 2.2 事务的属性(ACID) 2.3 事务出现的原因 2.4 查看存储引擎对事务的支持 3. 事务的使用 3.1 事务的提交方式 3.1.1 手动提交 3.1.2 自动提交 结论: 3.2 事务的隔离级别 3.2.1 理解隔离 3.2.2…...

03链表+栈+队列(D1_链表(D1_基础学习))
目录 一、什么是链表 二、基本操作 三、为什么要使用链表 四、为什么能够在常数时间访问数组元素 数组优点 数组缺点 五、动态数组诞生 链表优点 链表缺点 六、链表、数组和动态数组的对比 七、 链表种类 1. 单向链表 2. 双向链表 3. 循环链表 八、链表衍生 ...…...

Git 出现 Please use your personal access token instead of the password 解决方法
目录 前言1. 问题所示2. 原理分析3. 解决方法前言 1. 问题所示 执行Git提交代码的时候,出现如下所示: lixiaosong@IT07 MINGW64 /f/java_project/JavaDemo (master) $ git push -u origin --all libpng warning: iCCP: known incorrect sRGB profile libpng warning...

AI大模型开发原理篇-1:语言模型雏形之N-Gram模型
N-Gram模型概念 N-Gram模型是一种基于统计的语言模型,用于预测文本中某个词语的出现概率。它通过分析一个词语序列中前面N-1个词的出现频率来预测下一个词的出现。具体来说,N-Gram模型通过将文本切分为长度为N的词序列来进行建模。 注意:这…...

STM32新建不同工程的方式
新建工程的方式 1. 安装开发工具 MDK5 / keil52. CMSIS 标准3. 新建工程3.1 寄存器版工程3.2 标准库版工程3.3 HAL/LL库版工程3.4 HAL库、LL库、标准库和寄存器对比3.5 库开发和寄存器的关系 4. STM32CubeMX工具的作用 1. 安装开发工具 MDK5 / keil5 MDK5 由两个部分组成&#…...

【Rust自学】14.5. cargo工作空间(Workspace)
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 14.4.1. 为什么需要cargo workspace 假如说我们构建了一个二进制crate,里面既有library又有库。随着项目规模不断增长&#…...

全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI
不管是在传统领域还是 Crypto,AI 都是公认的最有前景的赛道。随着数字内容需求的爆炸式增长和技术的快速迭代,Web3 AIGC(AI生成内容)和 AI Agent(人工智能代理)正成为两大关键赛道。 AIGC 通过 AI 技术生成…...

10.3 LangChain实战指南:解锁大模型应用的10大核心场景与架构设计
LangChain实战指南:解锁大模型应用的10大核心场景与架构设计 关键词: LangChain使用场景、LLM应用案例、检索增强生成、智能体开发、知识库问答 一、LangChain场景全景图:从简单到复杂的应用分层 #mermaid-svg-nzjpyXIPLzL0j3PG {font-family:"trebuchet ms",ver…...

Swing使用MVC模型架构
什么是MVC模式? MVC是一组英文的缩写,其全名是Model-View-Controller,也就是“模型-视图-控制器”这三个部分组成。这三个部分任意一个部分发生变化都会引起另外两个发生变化。三者之间的关系示意图如下所示: MVC分为三个部分,所以在MVC模型中将按照此三部分分成三…...

设计新的 Kibana 仪表板布局以支持可折叠部分等
作者:来自 Elastic Teresa Alvarez Soler, Hannah Mudge 及 Nathaniel Reese 在 Kibana 中构建可折叠仪表板部分需要彻底改造嵌入式系统并创建自定义布局引擎。这些更新改进了状态管理、层次结构和性能,同时为新的高级仪表板功能奠定了基础。 我们正在开…...

修改maven的编码格式为utf-8
1.maven默认编码为GBK 注:配好MAVEN_HOME的环境变量后,在运行cmd. 打开cmd 运行mvn -v命令即可. 2.修改UTF-8为默认编码. 设置环境变量 变量名 MAVEN_OPTS 变量值 -Xms256m -Xmx512m -Dfile.encodingUTF-8 3.保存,退出cmd.重新打开cmd 运行mvn -v命令即可. 源码获取&…...