JavaScript全解析——this指向
本系列内容为JS全解析，为千锋教育资深前端老师独家创作
致力于为大家讲解清晰JavaScript相关知识点，含有丰富的代码案例及讲解。如果感觉对大家有帮助的话，可以【点个关注】持续追更~
this指向（掌握）
this 是一个关键字，是一个使用在作用域内的关键字
作用域分为全局作用域和局部作用域（私有作用域或者函数作用域）
全局作用域
全局作用域中this指向window
局部作用域
函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系，只看函数是如何被调用的(箭头函数除外)
可分为以下场景：
普通函数中调用
普通函数中的this和全局调用一样，this指向window
语法：函数名()
<script>// 全局使用 this console.log(this) //window console.log(window) //window console.log(window === this) //true //普通函数调用 function fn() { console.log('我是全局 fn 函数') console.log(this) //window } fn()
</script>
对象（包含数组）中调用
该函数内的 this 指向 点前面的内容，也就是那个对象或者数组
语法：
对象名.函数名()*
对象名
<script> //对象函数调用 function fn() { console.log(this) //{fun: ƒ} } var obj = { fun: fn } obj.fun() obj['fun']()
</script>
定时器处理函数中调用
定时器中的this同样也是指向window
<script> // 定时器处理函数 setTimeout(function() { console.log(this); //window }, 1000)
</script>
事件处理程序中调用
事件处理程序中的this指向的是事件源
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: red; } </style>
</head> <body> <div>hello world</div> <script> var res = document.querySelector('div') res.onclick = function() { console.log(this); //<div></div>} </script>
</body> </html>
自执行函数中调用
●自执行函数中的this也指向window
<script> (function() { console.log(this); //window })()
</script>
强行改变this指向
通过上面的学习大家知道，this在不同的情况指向是不同的，但是有时候需要指向一个制定的对象，这就需要改变this的指向
可以理解成不管之前指向哪里，现在我让你指向哪里你就要指向哪里
强行改变this指向的方式可以通过call、apply和bind来改变
call调用
作用：改变函数内部this的指向
语法：
函数名.call()
对象名.函数名.call(参数1，参数2，参数3…)
参数：
○第一个参数是this要指向的对象
○从第二个参数开始，依次给函数传递实参
特点： 会立即调用函数或者说立即执行
<script> function fn(a, b) { console.group('fn 函数内的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 对象' } var arr = [100, 200, 300, 400, 500] // 用 call 调用 fn.call(obj, 100, 200) fn.call(arr, 1000, 2000) /* this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */
</script>
apply调用
作用： 改变函数内部this的指向
语法：
○函数名.apply()
○对象名.函数名.apply(参数1，[参数2，参数3…])
参数：
○第一个参数是this要指向的对象
○第二参数的一个数组，要传递的实参要放到数组里面，就是有一个实参也要放到数组里面
特点： 会立即调用函数或者说立即执行
<script> function fn(a, b) { console.group('fn 函数内的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 对象' } var arr = [100, 200, 300, 400, 500] // 用 apply 调用 fn.apply(obj, [100, 200]) fn.apply(arr, [1000, 2000]) /* fn 函数内的 打印 this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */
</script>
bind调用
作用： 改变函数内部this的指向
语法：
函数名.bind()
对象名.函数名.bind(参数1，参数2，参数3...)
参数：
第一个参数是this要指向的对象
从第二个参数开始，依次给函数传递实参
特点： 函数不会立即调用，会返回一个改变this指向以后的函数，使用的时候需要调用
<script> function fn(a, b) { console.group('fn 函数内的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 对象' } var arr = [100, 200, 300, 400, 500] // 用 bind 调用 // 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn // res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn var res = fn.bind(obj, 100, 200) var res1 = fn.bind(arr, 1000, 2000) res() res1() /* fn 函数内的 打印 this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */
</script>
以上即为JS中this指向的一些基础知识点，更多技术干货、知识技巧可以关注我们！有不清楚的问题也可以在评论区交流讨论，也可以私信小千~
相关文章：
JavaScript全解析——this指向
本系列内容为JS全解析，为千锋教育资深前端老师独家创作 致力于为大家讲解清晰JavaScript相关知识点，含有丰富的代码案例及讲解。如果感觉对大家有帮助的话，可以【点个关注】持续追更~ this指向（掌握） this 是一个关…...
MySQL中ON DUPLICATE KEY UPDATE和REPLACE INTO区别
MySQL中的ON DUPLICATE KEY UPDATE和REPLACE INTO区别 在MySQL中，当我们需要插入新的数据到一个已存在的表中时，有两个常见的选项：ON DUPLICATE KEY UPDATE和REPLACE INTO。这两个选项可以解决类似的问题，但在处理重复键…...
37本国产SCI期刊推荐！涵盖9大领域，建议收藏！②
三、地学类 1. Acta Oceanologica Sinica | 国产之光！影响因子1分，中科院2区，国人占比81%！ 评语：Acta Oceanologica Sinica在海洋学领域处于中等水平，影响因子逐年上升。近年来我国倡导发表国内期刊的论文…...
掌握无缝云迁移方法的数据集成
随着越来越多的组织过渡到基于云的基础架构，数据集成已成为云迁移过程的关键组成部分。数据集成包括将来自不同来源的数据集成到一个整合的视角中。云迁移的上下文涉及将数据从本地系统传输到基于云的平台，同时确保数据的一致性、准确性和可用性。 本文…...
unity 3种办法实现血条效果并实现3d世界血条一直看向摄像机
普通血条栏： 渐变色血条栏： 缓冲血条栏： 3D场景血条栏跟随玩家移动： 普通血条栏： 在Canvas下创建一个空物体HP bar,在空物体下方创建3个Image，分别为血条框bar 黑色，最大HP maxHP 白色，和当前HP currentHP 红色。（PS：注意先后顺序以调整显示的图层） 效果： …...
Jenkins流水线整合k8s实现代码自动集成和部署
一、前置条件 1、安装好k8s集群 这里先要搭建好一个K8s集群，笔者这边就采用使用了一个一主一丛的k8s集群，k8s集群的版本使用1.19.5版本，服务器的配置：2核4G，操作系统: CentOS Linux release 7.9.2009 (Core) 主机名…...
@PulsarConsumer注解2
PulsarConsumer注解是 Apache Pulsar 的客户端 API 中的注解之一，它是用于自动消费 Pulsar 消息的。通过使用PulsarConsumer注解，您可以将 Pulsar 消息的消费逻辑与自身的 bean 结合起来，并且不必编写繁琐的消费者代码。当消息到达 topic 时&…...
AIGC 综述 2023：A History of Generative AI from GAN to ChatGPT
GAI：发展历史，核心技术，应用领域以及未来发展 摘要1、引言1.1、主要贡献1.2、组织结构 2、生成式AI的发展历史2.1、NLP领域的发展2.2、CV领域的发展2.3、CV与NLP的融合 3、AIGC的核心技术基础3.1、经典基础模型3.1.1、Transformer3.1.2、Pre-…...
【JOSEF约瑟 JDZS-1202B 可调断电延时中间继电器 精度高、延时宽、】
品牌：JOSEF约瑟名称：可调断电延时中间继电器型号：JDZS-1202B系列额定电压：110、220VDC/AC触点容量：250V/5A功率消耗：2W返回系数：≥5%特点：高精度、延时宽、功耗低。 用途及特点 基本…...
UNeXt:基于MLP的快速医学图像分割网络
文章目录 UNeXt: MLP-Based Rapid Medical Image Segmentation Network摘要本文方法Shifted MLPTokenized MLP Stage 实验结果 UNeXt: MLP-Based Rapid Medical Image Segmentation Network 摘要 UNeXt：一种基于卷积多层感知器（MLP）的图像分…...
软路由简述
软路由是一种基于软件实现的路由器，它可以在普通的计算机上运行，通过软件实现路由器的各种功能。相比传统的硬件路由器，软路由具有灵活性高、可定制性强、成本低等优点，因此在近年来得到了越来越广泛的应用。 软路由的实现方式有…...
python 生成设施农用地各类材料，并调用python2进行出图
python 生成设施农用地各类材料，并调用python2进行出图 -- coding: utf-8 -- import win32com.client from win32com.client import Dispatch import os, sys, glob #import traceback, shapefile from openpyxl import load_workbook, Workbook import openpyxl,…...
html - 多媒体标签（video）、音频标签（audio）
video 语法： <video src"文件地址" controls"controls" </video> 常见的属性 属性 值 描 述 autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动放的问题 controls controls …...
希望计算机专业同学都知道这些博主
湖科大教书匠——计算机网络 “宝藏老师”、“干货满满”、“羡慕湖科大”…这些都是网友对这门网课的评价，可见网课质量之高！最全面的面试网站 湖南科技大学《计算机网络》微课堂是该校高军老师精心制作的视频课程，用简单的语言描述复杂的…...
LeetCode 416 分割等和子集
题目： 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集，使得两个子集的元素和相等。 示例 1： 输入：nums [1,5,11,5] 输出：true 解释：数组可以分割成 [1, 5, 5] 和 …...
韦东山Linux驱动入门实验班（2）hello驱动---驱动层与应用层通讯，以及自动产生设备节点
前言 （1）学习韦东山老师的Linux，因为他讲的很精简，以至于很多人听不懂。接下来我讲介绍韦东山老师的驱动实验班的第二个Hello程序。 （2）注意，请先学习完视频再来看这个教程！本文仅供…...
小程序技术，打开跨端管理的思路，提高客户满意度和忠诚度
小程序容器作为跨端管理的有效工具，已经成为越来越多企业的选择。通过小程序容器，企业可以实现跨平台部署，提供一致的用户体验，整合多种渠道实现全渠道协同，进行个性化营销，以及通过数据分析和监控等手段优…...
Jmeter的Content-Type设置方式
今天调Jmeter脚本遇到一个问题：接口的请求体为Body Data时，没有在HTTP信息头管理加Content-Type参数，Content-Type: application/json，导致脚本一直跑不通，报错，一顿排查，才发现是请求头的原因。…...
SQL语法
创建基本表 创建基本表要对表进行命名，定义表的每个列，定义表的完整性约束条件，我们使用CREATE TABLE语句创建基本表 CREATE TABLE <表名> (<列名> <数据类型> [DEEAULT<缺省值>] [列级约束定义], <列名> &l…...
面试题30天打卡-day30
1、如何在 Linux 中查看系统资源使用情况？比如内存、CPU、网络端口。 以下是Linux中一些常用的命令来查看系统资源使用情况： top：实时动态地显示系统的 CPU 使用情况、进程信息、内存占用情况等。可以使用 q 键退出。top命令可以实时显示各…...
ELi_MdM_4_00电机驱动库：工业嵌入式多模式PWM控制框架
1. ELi_MdM_4_00 电机驱动库深度解析：面向工业级嵌入式控制的多模式驱动框架ELi_MdM_4_00 是 E-LAGORi 公司推出的第四代电机驱动模块专用固件库，专为嵌入式系统对多类型执行机构的精确、可靠、低开销控制而设计。该库并非通用型电机控制抽象层ÿ…...
golang如何实现知识库问答系统_golang知识库问答系统实现实践
最省事的是 Qdrant 或 Milvus——二者均有官方 Go SDK，支持 HTTP/gRPC，文档完备；Qdrant 适合中小规模，Milvus 适合横向扩展，但需锁死 SDK 版本至 v2.4.5。用什么向量数据库搭配 Go 最省事Go 原生不带向量检索能力&…...
高效金融数据采集架构：Python通达信数据获取解决方案深度解析
高效金融数据采集架构：Python通达信数据获取解决方案深度解析 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在量化投资和金融数据分析领域，获取准确、实时的市场数据是策…...
Wan2.2-I2V-A14B新手指南：无需代码，通过ComfyUI界面轻松操作
Wan2.2-I2V-A14B新手指南：无需代码，通过ComfyUI界面轻松操作 1. 认识Wan2.2视频生成模型 Wan2.2-I2V-A14B是一款专为创意工作者设计的视频生成工具，它能将静态图片转化为动态视频。这个50亿参数的轻量级模型特别适合快速内容创作࿰…...
01 微服务
一、认识微服务 1.1 微服务架构演变 单体架构： 将业务的所有功能集中在一个项目中开发，打成一个包部署（简单方便，高度耦合，拓展性差，适合小型项目，如学生管理系统）；分布式…...
StructBERT文本相似度模型Web服务开发：从零搭建RESTful API
StructBERT文本相似度模型Web服务开发：从零搭建RESTful API 你是不是也有过这样的想法：手头有一个很棒的AI模型，比如能精准判断两段文字相似度的StructBERT，但不知道怎么把它变成一个大家都能方便使用的服务？总不能每…...
从零构建嵌入式GUI：基于LVGL 8.1的Linux桌面项目实战解析
1. 为什么选择LVGL构建嵌入式GUI？ 在嵌入式开发领域，图形用户界面(GUI)的实现一直是个让人头疼的问题。传统的解决方案要么太重（比如Qt），要么太简陋（比如直接操作framebuffer）。而LVGLÿ…...
Kandinsky-5.0-I2V-Lite-5s效果展示：AI生成插画→动态叙事短片（5秒内完成情绪传递）
Kandinsky-5.0-I2V-Lite-5s效果展示：AI生成插画→动态叙事短片（5秒内完成情绪传递） 1. 开箱即用的动态叙事工具 Kandinsky-5.0-I2V-Lite-5s是一款让人眼前一亮的轻量级图生视频模型。它最吸引人的特点是：你只需要准备一张静态插…...
从零开始了解GXUI字体系统：完整解析字体嵌入与字形渲染流程
从零开始了解GXUI字体系统：完整解析字体嵌入与字形渲染流程 【免费下载链接】gxui An experimental Go cross platform UI library. 项目地址: https://gitcode.com/gh_mirrors/gx/gxui GXUI是一个实验性的Go跨平台UI库，其字体系统是实现高质量文…...
华为OD机试 - FLASH坏块监测系统 - 并查集（Java 新系统 200分）
华为OD机试 新系统 题库疯狂收录中，刷题点这里 专栏导读 本专栏收录于《华为OD机试（JAVA）真题》。 刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适…...