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

js中this的指向问题

news 来源：原创 2025/9/12 5:29:16

前言：

在js中，this出现的位置多种多样，你会不会迷糊呢？this到底指代的是哪个对象？这篇文章带你搞懂不同场景下this的指向问题。

this出现场景：

从作用域的角度来讲，this出现的位置无非就是两种类型：全局作用域，函数作用域。

全局作用域

在全局作用域中，this 指向全局对象。在浏览器中，全局对象是 window，而在 Node.js 中，它是 global。

console.log(this); // 在浏览器中，输出 window 对象

函数作用域:

函数调用：

普通函数调用：在非严格模式下，this 指向全局对象（浏览器中是 window）；在严格模式下，this 是 undefined。

function test() {console.log(this);
}test(); // 非严格模式下输出 window，严格模式下输出 undefined

严格模式下的函数调用：

'use strict';function test() {console.log(this); // 输出 undefined
}test();

方法调用：

当函数作为对象的方法被调用时，this 指向该对象。

const obj = {name: 'Alice',greet: function() {console.log(this.name);}
};obj.greet(); // 输出 'Alice'

构造函数调用：

当使用 new 关键字调用函数时，this 指向新创建的对象。

function Person(name) {this.name = name;
}const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'

箭头函数：

箭头函数不绑定自己的 this，而是继承自外围作用域的 this。

const obj = {name: 'Charlie',greet: function() {const arrowFunc = () => {console.log(this.name);};arrowFunc();}
};obj.greet(); // 输出 'Charlie'

显示指定this指向：

`call` 和 `apply`：允许显式设置 `this` 的值。

function greet(greeting) {console.log(greeting + ', ' + this.name);
}const person = { name: 'David' };
greet.call(person, 'Hello'); // 输出 'Hello, David'
greet.call(person,['Hello']); // 输出 'Hello, David'

apply 的用法与 call 类似，只是参数以数组形式传递。

`bind`：返回一个新函数，其中 `this` 被永久绑定到指定的值。

const boundGreet = greet.bind(person, 'Hi');
boundGreet(); // 输出 'Hi, David'

this指向测试题

1、

const obj = {name: 'Alice',showThis: function() {setTimeout(function() {console.log(this.name);}, 1000);}
};obj.showThis();setTimeout 中的回调函数是普通函数调用，其 this 指向全局对象（浏览器中是 window，Node.js 中是 global）。
如果全局对象没有 name 属性，输出 undefined。

2、

const obj = {name: 'Alice',showThis: function() {setTimeout(() => {console.log(this.name);}, 1000);}
};obj.showThis();箭头函数不会创建自己的 this，它会继承外层作用域的 this。
在这里，外层作用域是 showThis 方法，因此 this 指向 obj。
输出结果为：Alice。

3、

const person = {name: 'Charlie',showThis: function() {return () => {console.log(this.name);};}
};const arrowFunc = person.showThis();
arrowFunc();person.showThis() 返回的是一个箭头函数，箭头函数的 this 继承自其定义时的作用域。
定义时的作用域是 showThis 方法，而 showThis 中的 this 指向 person。
因此，最终 this 指向 person，输出结果为：Charlie。

4、

const name = 'Global';const obj = {name: 'Alice',showThis: function() {console.log(this.name);}
};const show = obj.showThis;
show();show 是从 obj 中提取的普通函数引用，调用时没有绑定到 obj。
普通函数调用中，this 指向全局对象（浏览器中是 window，Node.js 中是 global）。
如果全局对象有 name 属性（如浏览器中 window.name 默认是空字符串），输出该值；否则输出 undefined。
const声明的变量不会被挂载在window上，因此会输出undefined

5、

const obj = {name: 'Alice',showThis: function() {console.log(this.name);}
};const boundFunc = obj.showThis.bind({ name: 'Bob' });
boundFunc();bind 方法会创建一个新函数，并将 this 显式绑定到指定的对象（{ name: 'Bob' }）。
因此，this 指向 { name: 'Bob' }，输出结果为：Bob。

以上测试题如果你都搞明白了，说明你已经有了不错的收获。恭喜你，今天的你又进步了一点点，加油！！！

js中this的指向问题

前言： 在js中，this出现的位置多种多样，你会不会迷糊呢？this到底指代的是哪个对象？这篇文章带你搞懂不同场景下this的指向问题。 this出现场景： 从作用域的角度来讲，this出现的位置无非就是两…...

编程日记 2025/9/12 5:29:16

【3dSwap】3D-Aware Face Swapping

文章目录 3D-Aware Face Swapping背景points贡献方法从2D图像推断3D先验通过潜在代码操纵进行人脸交换联合枢轴调整目标函数实验与二维人脸交换方法比较进一步分析3D感知人脸交换消融实验局限性3D-Aware Face Swapping 会议/期刊：CVPR 2023 作者： code：https://lyx0208.gi…...

编程日记 2025/9/12 5:24:09

基于STM32的智能门禁系统

2.1系统方案设计本课题为基于STM32的智能门禁系统的设计，其系统架构如图2.1所示，整个系统由STM32F103单片机和MaixBit开发板两部分构成，其中MaixBit是基于K210芯片的开发板，在此主要负责人脸的录入，识别，…...

编程日记 2025/9/12 5:24:50

链表实现MP3 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <time.h> #include <dirent.h> #include <sys/stat.h> #include <sys/types.h> #include <glob.h> #inc…...

编程日记 2025/9/8 4:37:05

YOLO检测目标后实现距离测量

当我们使用YOLO检测器得到检测结果后，我们如何计算检测的物体距离相机的位置呢？ 目前，有三种较为主流的距离计算方法，分别是单目测距、双目测距以及基于深度估计的测距方法。单目测距工作原理：单目测距使用一个摄像…...

编程日记 2025/9/3 0:45:10

js 效果展示拿去练手

自学完整功能，拿去练手。鼠标移动放大通过网盘分享的文件：图片放大链接: https://pan.baidu.com/s/1w8SjtKi4kUNDnZtRDfYMeQ?pwd95p6 提取码: 95p6 通过网盘分享的文件：图片动画效果链接: https://pan.baidu.com/s/1Pjphx-Cc4HQQNNujr…...

编程日记 2025/9/7 17:58:36

【算法】欧拉函数与欧拉降幂 python

欧拉函数欧拉函数 ϕ ( n ) \phi(n) ϕ(n) 表示小于等于 n 的正整数中与 n 互质的数的个数。即： ϕ ( n ) ∣ { k ∈ Z ∣ 1 ≤ k ≤ n , gcd ⁡ ( k , n ) 1 } ∣ \phi(n) \left| \{ k \in \mathbb{Z}^ \mid 1 \leq k \leq n, \gcd(k, n) 1 \} \right| ϕ(n)…...

编程日记 2025/9/7 11:14:29

Qt触摸屏隐藏鼠标指针

Qt触摸屏隐藏鼠标指针 Chapter1 Qt触摸屏隐藏鼠标指针 Chapter1 Qt触摸屏隐藏鼠标指针使用Qt开发的屏幕软件HMI不需要显示鼠标，qt设置，可以在只启动HMI的时候隐藏光标，退出时再显示。 1.如果只希望在某个 widget 中不显示鼠标指针&#xf…...

编程日记 2025/9/8 15:00:17

QT聊天项目DAY01

1.新建初始项目 2.修改UI格式运行效果 3.创建登录界面设计登录界面UI 设计布局调整布局间距往水平布局中拖入标签和文本输入框更换控件名称并固定高度添加窗口部件往现有的资源文件中导入图片添加水平布局 4.设置登陆界面为主窗口的核心组件 #pragma once#include &l…...

编程日记 2025/9/9 0:45:52

Stable Diffusion +双Contronet：从 ControlNet 边缘图到双条件融合：实现服装图像生成的技术演进——项目学习记录

前言学习记录contronet优化：最近，我基于 diffusers 库的 ControlNet，探索了如何通过 Canny 边缘图控制服装图像生成，并逐步升级到融合颜色图的双条件模型。有不断的问题、解决和进步，从最初的边缘图生成到最终实现 2…...

编程日记 2025/9/9 8:06:20

【Hadoop入门】Hadoop生态之Spark简介

1 什么是Spark？ Apache Spark 是一个开源的分布式计算框架，专为处理大规模数据而设计。它提供了高效、通用的集群计算能力，支持内存计算，能够显著提高数据处理和分析的速度。Spark 已经成为大数据处理领域的重要工具，广…...

编程日记 2025/9/10 1:05:00

深度学习学习笔记

目录摘要 Abstracts 简介 Hourglass Module（Hourglass 模块） 网络结构 Intermediate Supervision（中间监督） 训练过程细节评测结果摘要本周阅读了《Stacked Hourglass Networks for Human Pose Estimation》&#xf…...

编程日记 2025/9/8 3:56:49

小米运维面试题及参考答案（80道面试题）

请讲解一下 linux top 后进程的状态在 Linux 系统中，使用top命令可以查看系统中正在运行的进程的相关信息，进程通常有以下几种状态：运行（R）：表示进程正在 CPU 上运行或者正在运行队列中等待运行。处于运行状态的进程正在积极地使用 CPU 资源来执行其任务。睡眠（S）：进…...

编程日记 2025/9/4 11:32:33

动态多目标优化：基于可学习预测的动态多目标进化算法（DIP-DMOEA）求解CEC2018（DF1-DF14），提供MATLAB代码

一、DIP-DMOEA介绍基于可学习预测的动态多目标进化算法（Learning-Based Directional Improvement Prediction for Dynamic Multiobjective Optimization，DIP-DMOEA）是2024年提出的一种动态多目标进化算法，核心在于利用神经网络学…...

编程日记 2025/9/8 11:00:13

第十六届蓝桥杯大赛软件赛省赛 C/C++ 大学B组

由于官方没有公布题目的数据, 所以代码仅供参考 1. 移动距离题目链接：P12130 [蓝桥杯 2025 省 B] 移动距离 - 洛谷【问题描述】小明初始在二维平面的原点，他想前往坐标 (233, 666)。在移动过程中，他只能采用以下两种移动方式&#xf…...

编程日记 2025/9/8 21:06:07

《Nature Methods》新算法|MARBLE利用几何深度学习解释神经群体动力学

一、写在前面本次分享的是2025年2月发布于《Nature Methods》的题为"MARBLE:interpretable representations of neural population dynamics using geometric deep learning"的文章。在神经科学和机器学习领域交汇的今天，我们不断探索如何从复杂的神经活…...

编程日记 2025/9/11 7:01:40

【力扣hot100题】（093）最长公共子序列

还算是挺简单的一题。维护二维数组代表截至至两个字符串的某个位置，前面的最长公共子序列长度。状态转移方程就是当两字符相等是，取俩位置前一个的值加一，否则就直接等于俩位置前一个值。 class Solution { public:int longestCommonSub…...

编程日记 2025/9/9 9:08:39

(打卡)794. 高精度除法

C： Python： aint(input()) bint(input()) print(a//b) print(a%b)...

编程日记 2025/8/21 5:04:04

网络5 TCP/IP 虚拟机桥接模式、NAT、仅主机模式

TCP/IP模型用于局域网和广域网；多个协议；每一层呼叫下一层；四层；通用标准 TCP/IP模型 OSI七层模型应用层应用层表示层会话层传输层传输层网络层网络层链路层数据链路层物理层链路层：传数据帧&#xff0…...

编程日记 2025/9/11 1:04:26

GPU虚拟化技术在深度学习集群中的应用实践

一、深度学习集群的算力困境某些985高校AI实验室曾面临典型算力管理难题：其配备的4台8卡A100服务器（总价值超300万元）实际利用率仅38%。学生提交的PyTorch任务常因GPU抢占导致训练中断，而部分研究组独占显卡却仅运行Jupyter Not…...

编程日记 2025/9/9 9:09:57

从零实现基于扩散模型的文本到视频生成系统：技术详解与Pytorch代码实现

本文详细介绍了基于扩散模型构建的文本到视频生成系统，展示了在MSRV-TT和Shutterstock视频标注数据集上训练的模型输出结果。以下是模型在不同提示词下的生成示例。首先展示一些模型生成效果展示提示词：“A person holding a camera”（训练…...

编程日记 2025/9/11 3:15:50

每天学一个 Linux 命令（14）：cat

Linux 文件查看与合并命令：cat cat（全称 concatenate）是 Linux 中用于查看文件内容、合并文件或创建简单文件的基础命令。它操作简单但功能灵活，是日常文件处理的常用工具。 1. 命令作用查看文件内容：直接输出文件内容到终端。合并文件：将多个文件内容合并输出或保存到…...

编程日记 2025/9/8 8:20:17

05--MQTT物联网协议

一、MQTT的概念 MQTT 协议快速入门 2025：基础知识和实用教程 | EMQ 1.MQTT（Message Queuing Telemetry Transport）是一种轻量级、基于发布-订阅模式的消息传输协议，适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境。它…...

编程日记 2025/9/5 8:48:21

免费下载 | 2025天津大学：智能制造与数字孪生技术：面向可持续制造方向发展

一、新一代智能制造模式下的思考当代智能制造的发展阶段智能制造定义：智能制造是基于新一代信息通信技术与先进制造技术深度融合，贯穿于设计、生产、管理、服务等制造活动的各个环节，具有自感知、自学习、自决策、自执行、自适应等功能的新…...

编程日记 2025/9/10 1:05:01

考研单词笔记 2025.04.12

aware a知道的，意识到的，警觉的 awareness n意识，了解，觉察 conscious a有意识的，意识到的，有意的，刻意的，神志清醒的，慎重的，关注的 unconscious a无意识…...

编程日记 2025/9/9 10:46:09

八股总结（Java）持续更新！

八股总结（java） ArrayList和LinkedList有什么区别 ArrayList底层是动态数组，LinkedList底层是双向链表；前者利于随机访问，后者利于头尾插入；前者内存连续分配，后者通过指针连接多块不连续的内存…...

编程日记 2025/9/6 6:40:24

SpringBoot3快速入门笔记

springboot3简介 SpringBoot 帮我们简单、快速地创建一个独立的、生产级别的 Spring 应用（说明：SpringBoot底层是Spring） 大多数 SpringBoot 应用只需要编写少量配置即可快速整合 Spring 平台以及第三方技术特性： ● 快速创建…...

编程日记 2025/9/7 13:52:49

vue3中，element-plus中el-input的v-model和value的用法示例

el-input的v-model，邦定响应式变量 <el-col :span"6"><el-form-item label"检验类别" prop"verifyType"><el-input v-model"applyAllInfo.applyBasicInfo.verifyTypeName" readonly /></el-form-item…...

编程日记 2025/9/11 21:19:56

python求π近似值

【问题描述】用公式π/4≈1-1/31/5-1/7..1/(2*N-1).求圆周率PI的近似值。从键盘输入一个整数N值，利用上述公式计算出π的近似值，然后输出π值，保留小数后8位。【样例输入】1000 【样例输出】3.14059265 def countpi(N):p0040nowid0for i i…...

编程日记 2025/9/11 0:18:45

Gerapy二次开发：搜索器组件设计开发与应用（Vue父子组件通信）

搜索器组件设计开发与应用写在前面搜索器字段定义与样式设计具体实现components/Search.vuedeploy/Index.vue后端views.py运行效果总结欢迎加入Gerapy二次开发教程专栏！本专栏专为新手开发者精心策划了一系列内容，旨在引领你深入探索Gerapy框架的二次迭代之旅。本专栏将全…...

编程日记 2025/9/8 22:14:17

深入解析Python爬虫技术：从基础到实战的功能工具开发指南

一、引言：Python 爬虫技术的核心价值在数据驱动的时代，网络爬虫作为获取公开数据的重要工具，正发挥着越来越关键的作用。Python 凭借其简洁的语法、丰富的生态工具以及强大的扩展性，成为爬虫开发的首选语言。根据 Stack Overflow 2024 年开发者调查，68% 的专业爬虫开发者…...

编程日记 2025/9/10 3:36:41

Python爬虫-爬取全球股市涨跌幅和涨跌额数据

前言本文是该专栏的第52篇，后面会持续分享python爬虫干货知识，记得关注。本文中，笔者将基于Python爬虫，实现批量采集全球股市行情（亚洲，美洲，欧非，其他等）的各股市“涨跌幅”以及“涨跌额”数据。具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。…...

编程日记 2025/9/5 0:41:59

【NLP 59、大模型应用 —— BPE 算法】

你和生生不息的河流，生动了我人生中的美好瞬间 —— 25.4.11 一、词表的构造问题为了nlp模型训练，词表（字表）是必要的统计训练语料中的所有字符（或词）是一种做法，但是容易出现一些问题&…...

编程日记 2025/9/9 1:30:48

SQL基础入门：从CRUD到JOIN再到索引（通俗易懂版）

一、为什么需要SQL？ 想象你在管理一个图书馆： 传统方法：手动记录每本书的位置、借阅者、归还日期SQL方法：用数据库系统自动管理，快速查询《Java编程思想》在哪个书架 SQL（Structured Query Language&…...

编程日记 2025/9/8 4:18:02

系统编程1（进程的概念与原理）

进程的概念与原理计算机组成部分一般遵循冯诺依曼结构，也就是由控制器、运算器、存储器、输入设备、输出设备五个部分组成。 ⦁ 程序的编译一般在编写出程序之后，并不能直接运行，而是需要把程序通过编译器进行编译，生成可执行…...

编程日记 2025/9/9 12:34:27

Git基础知识

Git基础知识目录一、Git简介 1.1 什么是Git？1.2 基本概念1.3 Git与其他版本控制系统的区别二、Git安装与配置 2.1 安装Git2.2 基础配置2.3 高级配置2.4 多账户配置三、基本操作 3.1 创建仓库3.2 基本工作流3.3 分支操作3.4 查看历史四、高级操作 4.1 撤销修改…...

编程日记 2025/9/10 7:05:40

【Flink运行时架构】核心组件

在Flink的运行架构中，有两大比较重要的组件：作业管理器（JobManager）和任务管理器（TaskManager）。 Flink的作业提交与任务处理时的系统如下图所示。其中，客户端并不是处理系统的一部分&#xff…...

编程日记 2025/9/7 4:49:28

【区块链安全 | 第四十篇】合约审计之delegatecall（二）

文章目录漏洞代码代码分析攻击流程攻击代码前文重现修复建议审计思路在阅读本文之前，请确保已先行阅读：【区块链安全 | 第三十九篇】合约审计之delegatecall（一） 漏洞代码存在一漏洞代码如下： // 库合约&#xf…...

编程日记 2025/9/11 5:26:19

Redis实现分布式定时任务

设计思路任务表示：每个任务通过一个特定格式的键来表示。键名可以包含任务ID等信息，值可以是任务的具体内容或指向任务详情的引用。过期机制：利用Redis的EXPIRE命令为任务设置过期时间，当到达设定的时间点时，Redis会…...

编程日记 2025/9/9 14:39:00

ERC20合约的基本调用

文章目录 ERC20合约的基本调用合约功能compile.js 代码读取文件进行合约编译获取二进制对象导出对象 index.js 代码编译合约读取私钥设置收款账户构造 web3 对象获取账户地址获取 abi 和 bin创建合约交易部署合约构造转账交易验证转账后余额测试项目目录执行查询 ERC20合约的…...

编程日记 2025/9/8 8:35:47

『Kubernetes(K8S) 入门进阶实战』实战入门 - Pod 详解

『Kubernetes(K8S) 入门进阶实战』实战入门 - Pod 详解 Pod 结构每个 Pod 中都可以包含一个或者多个容器，这些容器可以分为两类用户程序所在的容器，数量可多可少Pause 容器，这是每个 Pod 都会有的一个根容器，它的作用有两个可…...

编程日记 2025/9/11 1:13:57

【React框架】什么是 Vite？如何使用vite自动生成react的目录？

什么是 Vite？ Vite 是一个基于原生 ES Modules 开发的前端构建工具，由 Evan You（Vue 的作者）开发。它最大的特点包括： 极速冷启动：因为利用了浏览器原生的 ES Modules，所以在开发时无需等待整…...

编程日记 2025/8/30 3:54:27

JS实现文件点击或者拖拽上传

B站看到了渡一大师课的切片，自己实现了一下，做下记录效果展示分为上传前、上传中和上传后实现分为两步界面交互网络请求源码如下 upload.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset&q…...

编程日记 2025/9/9 5:43:51

【Vue #3】指令补充样式绑定

一、指令修饰符 Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的重要特性，它们以半角句号 . 开头，用于对指令的绑定行为进行特殊处理修饰符作用如下： 简化事件处理（如阻止默认行为、停止冒泡…...

编程日记 2025/9/6 11:57:06

Vue.js组件安全工程化演进：从防御体系构建到安全性能融合

——百万级流量场景下的安全组件架构与源码级解决方案文章目录总起：安全工程化的组件革命分论： 一、现存组件架构的七宗罪与安全改造路径　 1.1 组件生态安全赤字现状　 1.2 架构级安全缺陷深度剖析　 1.3 性能与安全的死亡螺旋二、百万级…...

编程日记 2025/9/9 3:41:55

LINUX基础 [二] - Linux常见指令

目录 💻前言 💻指令 🎮ls指令 🎮pwd指令 🎮whoami指令 🎮cd指令 🎮clear指令 🎮touch指令 🎮mkdir指令 🎮rmdir指令 🎮rm指令 &#…...

编程日记 2025/9/8 14:14:42

Linux进阶命令

目录一、touch 1. 基本语法 2. 常用选项二、which 1. 基本语法 2. 主要功能 3. 常用选项三、find 1. 基本语法 2. 常用选项和表达式四、more 1. 基本语法 2. 常用操作 3. 对比 more 和 less 五、grep 1. 基本语法 2. 常用选项六、wc 1. 基本语法 2. 常…...

编程日记 2025/9/7 15:45:20

【Spring Boot 过滤器】

文章目录前言一、什么是过滤器 Filter？二、Spring Boot 中使用 Filter 的方式1. 使用 Component 注解2. 使用 FilterRegistrationBean 显式注册三、自定义过滤器示例1. 引入必要依赖2. 创建一个自定义 Filter3. 使用 FilterRegistrationBean 显式注册四、多个 Fi…...

编程日记 2025/9/3 14:11:05

SPI通讯的软硬件NSS SSM SSI

学习自记： 1. NSS（Slave Select，从设备选择） 功能： NSS是SPI通信中用于选择从设备的信号线。主设备通过拉低NSS信号选中某个从设备，使其参与通信。通信结束后，主设备释放NSS&#…...

编程日记 2025/9/12 0:58:00

Java基础：集合List、Map、Set(超详细版)

集合体系概述 Collection常用方法补充：addAll() Collection的遍历方式迭代器增强for（空集合可以，null不可以） lambda 集合对象存储对象原理遍历方式的区别 List集合特点、特有方法遍历方式 （同上&#xff09…...

编程日记 2025/9/5 3:20:12

前言：