当前位置： 首页 > news >正文

JavaScript全解析——this指向

news 2025/7/8 15:45:21

在这里插入图片描述
本系列内容为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全解析&#xff0c;为千锋教育资深前端老师独家创作 致力于为大家讲解清晰JavaScript相关知识点&#xff0c;含有丰富的代码案例及讲解。如果感觉对大家有帮助的话&#xff0c;可以【点个关注】持续追更~ this指向&#xff08;掌握&#xff09; this 是一个关…...

编程日记 2023/5/30 15:14:02

MySQL中ON DUPLICATE KEY UPDATE和REPLACE INTO区别

MySQL中的ON DUPLICATE KEY UPDATE和REPLACE INTO区别 在MySQL中&#xff0c;当我们需要插入新的数据到一个已存在的表中时&#xff0c;有两个常见的选项&#xff1a;ON DUPLICATE KEY UPDATE和REPLACE INTO。这两个选项可以解决类似的问题&#xff0c;但在处理重复键&#xf…...

编程日记 2023/5/31 4:45:21

37本国产SCI期刊推荐！涵盖9大领域，建议收藏！②

三、地学类 1. Acta Oceanologica Sinica | 国产之光&#xff01;影响因子1分&#xff0c;中科院2区&#xff0c;国人占比81%&#xff01; 评语&#xff1a;Acta Oceanologica Sinica在海洋学领域处于中等水平&#xff0c;影响因子逐年上升。近年来我国倡导发表国内期刊的论文…...

编程日记 2023/5/31 8:11:04

掌握无缝云迁移方法的数据集成

随着越来越多的组织过渡到基于云的基础架构&#xff0c;数据集成已成为云迁移过程的关键组成部分。数据集成包括将来自不同来源的数据集成到一个整合的视角中。云迁移的上下文涉及将数据从本地系统传输到基于云的平台&#xff0c;同时确保数据的一致性、准确性和可用性。 本文…...

编程日记 2023/5/19 21:11:46

unity 3种办法实现血条效果并实现3d世界血条一直看向摄像机

普通血条栏： 渐变色血条栏： 缓冲血条栏： 3D场景血条栏跟随玩家移动： 普通血条栏： 在Canvas下创建一个空物体HP bar,在空物体下方创建3个Image，分别为血条框bar 黑色，最大HP maxHP 白色，和当前HP currentHP 红色。（PS：注意先后顺序以调整显示的图层） 效果： …...

编程日记 2023/5/19 21:06:45

Jenkins流水线整合k8s实现代码自动集成和部署

一、前置条件 1、安装好k8s集群 这里先要搭建好一个K8s集群&#xff0c;笔者这边就采用使用了一个一主一丛的k8s集群&#xff0c;k8s集群的版本使用1.19.5版本&#xff0c;服务器的配置&#xff1a;2核4G&#xff0c;操作系统: CentOS Linux release 7.9.2009 (Core) 主机名…...

编程日记 2023/5/19 21:01:44

@PulsarConsumer注解2

PulsarConsumer注解是 Apache Pulsar 的客户端 API 中的注解之一&#xff0c;它是用于自动消费 Pulsar 消息的。通过使用PulsarConsumer注解&#xff0c;您可以将 Pulsar 消息的消费逻辑与自身的 bean 结合起来&#xff0c;并且不必编写繁琐的消费者代码。当消息到达 topic 时&…...

编程日记 2023/5/19 20:56:42

AIGC 综述 2023：A History of Generative AI from GAN to ChatGPT

GAI&#xff1a;发展历史&#xff0c;核心技术&#xff0c;应用领域以及未来发展 摘要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-…...

编程日记 2023/5/19 20:51:41

【JOSEF约瑟 JDZS-1202B 可调断电延时中间继电器 精度高、延时宽、】

品牌&#xff1a;JOSEF约瑟名称&#xff1a;可调断电延时中间继电器型号&#xff1a;JDZS-1202B系列额定电压&#xff1a;110、220VDC/AC触点容量&#xff1a;250V/5A功率消耗&#xff1a;2W返回系数&#xff1a;≥5%特点&#xff1a;高精度、延时宽、功耗低。 用途及特点 基本…...

编程日记 2023/6/1 7:27:53

UNeXt:基于MLP的快速医学图像分割网络

文章目录 UNeXt: MLP-Based Rapid Medical Image Segmentation Network摘要本文方法Shifted MLPTokenized MLP Stage 实验结果 UNeXt: MLP-Based Rapid Medical Image Segmentation Network 摘要 UNeXt&#xff1a;一种基于卷积多层感知器&#xff08;MLP&#xff09;的图像分…...

编程日记 2023/5/19 20:41:39

软路由简述

软路由是一种基于软件实现的路由器&#xff0c;它可以在普通的计算机上运行&#xff0c;通过软件实现路由器的各种功能。相比传统的硬件路由器&#xff0c;软路由具有灵活性高、可定制性强、成本低等优点&#xff0c;因此在近年来得到了越来越广泛的应用。 软路由的实现方式有…...

编程日记 2023/5/31 6:16:47

python 生成设施农用地各类材料，并调用python2进行出图

python 生成设施农用地各类材料&#xff0c;并调用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,…...

编程日记 2023/5/19 20:31:37

html - 多媒体标签（video）、音频标签（audio）

video 语法&#xff1a; <video src"文件地址" controls"controls" </video> 常见的属性 属性 值 描 述 autoplay autoplay 视频就绪自动播放&#xff08;谷歌浏览器需要添加muted来解决自动放的问题 controls controls …...

编程日记 2023/5/19 20:26:36

希望计算机专业同学都知道这些博主

湖科大教书匠——计算机网络 “宝藏老师”、“干货满满”、“羡慕湖科大”…这些都是网友对这门网课的评价&#xff0c;可见网课质量之高&#xff01;最全面的面试网站 湖南科技大学《计算机网络》微课堂是该校高军老师精心制作的视频课程&#xff0c;用简单的语言描述复杂的…...

编程日记 2023/5/19 20:21:35

LeetCode 416 分割等和子集

题目&#xff1a; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和 …...

编程日记 2023/5/19 20:16:34

韦东山Linux驱动入门实验班（2）hello驱动---驱动层与应用层通讯，以及自动产生设备节点

前言 &#xff08;1&#xff09;学习韦东山老师的Linux&#xff0c;因为他讲的很精简&#xff0c;以至于很多人听不懂。接下来我讲介绍韦东山老师的驱动实验班的第二个Hello程序。 &#xff08;2&#xff09;注意&#xff0c;请先学习完视频再来看这个教程&#xff01;本文仅供…...

编程日记 2023/5/19 20:11:33

小程序技术，打开跨端管理的思路，提高客户满意度和忠诚度

小程序容器作为跨端管理的有效工具&#xff0c;已经成为越来越多企业的选择。通过小程序容器&#xff0c;企业可以实现跨平台部署&#xff0c;提供一致的用户体验&#xff0c;整合多种渠道实现全渠道协同&#xff0c;进行个性化营销&#xff0c;以及通过数据分析和监控等手段优…...

编程日记 2023/5/19 20:06:31

Jmeter的Content-Type设置方式

今天调Jmeter脚本遇到一个问题&#xff1a;接口的请求体为Body Data时&#xff0c;没有在HTTP信息头管理加Content-Type参数&#xff0c;Content-Type: application/json&#xff0c;导致脚本一直跑不通&#xff0c;报错&#xff0c;一顿排查&#xff0c;才发现是请求头的原因。…...

编程日记 2023/5/19 20:01:31

SQL语法

创建基本表 创建基本表要对表进行命名&#xff0c;定义表的每个列&#xff0c;定义表的完整性约束条件&#xff0c;我们使用CREATE TABLE语句创建基本表 CREATE TABLE <表名> (<列名> <数据类型> [DEEAULT<缺省值>] [列级约束定义], <列名> &l…...

编程日记 2023/5/19 19:56:29

面试题30天打卡-day30

1、如何在 Linux 中查看系统资源使用情况&#xff1f;比如内存、CPU、网络端口。 以下是Linux中一些常用的命令来查看系统资源使用情况&#xff1a; top&#xff1a;实时动态地显示系统的 CPU 使用情况、进程信息、内存占用情况等。可以使用 q 键退出。top命令可以实时显示各…...

编程日记 2023/5/19 19:51:29

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/6/21 9:41:59

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/7/7 5:12:18

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/8 3:33:25

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/6/20 11:13:34

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/7/7 10:04:21

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/6/16 7:49:31

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/7/7 3:33:18

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/6/21 4:22:18