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

深入解读 JavaScript 中 `this` 的指向机制：覆盖所有场景与底层原理

news 来源：原创 2025/8/21 15:30:36

this 是 JavaScript 中最容易引发困惑的核心概念之一，它的指向在不同场景下呈现截然不同的行为。本文将系统性地解析 this 的所有使用场景，结合代码示例和底层原理，帮助你彻底掌握其运行机制。

一、全局环境下的 `this`

1. 浏览器环境
在浏览器全局作用域中，this 指向 window 对象：

console.log(this === window); // true (非严格模式)

2. Node.js 环境
在 Node.js 模块顶层作用域中，this 指向当前模块的 exports 对象：

console.log(this === module.exports); // true

底层原理
全局环境中的 this 由执行环境的全局对象决定，浏览器为 window，Node.js 模块中为 exports。

二、函数调用中的 `this`

1. 独立函数调用（非严格模式）

function showThis() {console.log(this);
}
showThis(); // window (浏览器) / global (Node.js)

2. 严格模式下的函数调用

"use strict";
function strictThis() {console.log(this);
}
strictThis(); // undefined

底层原理
函数调用时，若未指定 this（即非方法调用、未使用 new 或绑定），非严格模式下 this 回退到全局对象；严格模式下保持为 undefined。

三、对象方法中的 `this`

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

隐式丢失问题

const greet = obj.greet;
greet(); // undefined (严格模式下) 或 window.name (非严格模式)

原理分析
方法赋值给变量后，调用变为独立函数调用，this 丢失原始绑定。

四、构造函数中的 `this`

使用 new 调用构造函数时，this 指向新创建的实例：

function Person(name) {this.name = name;
}
const bob = new Person("Bob");
console.log(bob.name); // "Bob"

底层过程

创建空对象，其 [[Prototype]] 指向构造函数原型
构造函数内的 this 绑定到此新对象
若构造函数无显式返回，自动返回新对象

五、显式绑定：call/apply/bind

1. call & apply

function introduce(lang) {console.log(`${this.name} codes in ${lang}`);
}
const user = { name: "Charlie" };
introduce.call(user, "JavaScript"); // "Charlie codes in JavaScript"
introduce.apply(user, ["Python"]);   // 参数以数组传递

2. bind 方法

const boundFunc = introduce.bind(user);
boundFunc("Java"); // "Charlie codes in Java"

优先级规则
显式绑定 > 隐式绑定（对象方法） > 默认绑定

六、箭头函数的 `this`

箭头函数没有自身的 this，继承外层词法作用域的 this：

const obj = {value: 42,getValue: () => {console.log(this.value); // 指向全局对象}
};
obj.getValue(); // undefined (浏览器中 window.value 未定义)

适用场景

function Timer() {this.seconds = 0;setInterval(() => {this.seconds++; // 正确指向 Timer 实例}, 1000);
}

底层机制
箭头函数的 [[ThisMode]] 为 lexical，不创建自身的 this 绑定。

七、事件处理器中的 `this`

DOM 事件处理函数中，this 指向触发事件的元素：

<button onclick="console.log(this)">Click</button> 
<!-- 输出 <button> 元素 -->

例外情况（箭头函数）

button.addEventListener("click", () => {console.log(this); // 指向外层 this（通常为 window）
});

八、严格模式的影响总结

场景	非严格模式	严格模式
独立函数调用	全局对象	`undefined`
未绑定方法的调用	全局对象	`undefined`
构造函数未使用 new	意外修改全局对象	抛出错误

九、底层原理深度解析

1. 执行上下文与 `this` 绑定

每次函数调用时，会创建执行上下文（ExecutionContext），其中包含：

LexicalEnvironment：用于变量/函数声明
VariableEnvironment：用于 var 变量
ThisBinding：确定当前 this 值

2. [[ThisMode]] 内部属性

函数对象拥有内部属性 [[ThisMode]]：

lexical：箭头函数，继承外层 this
strict：严格模式函数，this 不转为对象
global：非严格模式函数，this 可能为全局对象

3. 绑定优先级

new 绑定：new Foo()
显式绑定：call/apply/bind
隐式绑定：obj.method()
默认绑定：独立函数调用

十、特殊场景与陷阱

1. 回调函数中的 `this`

const loader = {load: function() {fetchData(function() {console.log(this); // 指向全局或 undefined});}
};
// 解决方案：使用箭头函数或 bind

2. 原型链上的 `this`

function Animal(name) {this.name = name;
}
Animal.prototype.speak = function() {console.log(this.name);
};
const cat = new Animal("Whiskers");
cat.speak(); // "Whiskers"

3. 类（Class）中的 `this`

类方法默认启用严格模式：

class User {constructor(name) {this.name = name;}sayHi() {console.log(this.name);}
}
const user = new User("Dave");
const say = user.sayHi;
say(); // TypeError: Cannot read property 'name' of undefined

总结与最佳实践

优先使用箭头函数：避免意外 this 指向问题
必要时显式绑定：在复杂场景使用 bind
构造函数始终使用 new：防止全局污染
事件处理注意上下文：传统函数 vs 箭头函数选择
严格模式统一行为：推荐启用严格模式

通过理解这些规则和底层机制，开发者可以精准控制 this 的指向，写出更健壮的 JavaScript 代码。

深入解读 JavaScript 中 `this` 的指向机制：覆盖所有场景与底层原理

this 是 JavaScript 中最容易引发困惑的核心概念之一，它的指向在不同场景下呈现截然不同的行为。本文将系统性地解析 this 的所有使用场景，结合代码示例和底层原理，帮助你彻底掌握其运行机制。一、全局环境下的 this 1. 浏览器环境在浏览器…...

编程日记 2025/8/21 15:30:36

无人机全景应用解析与技术演进趋势

无人机全景应用解析与技术演进趋势 ——从立体安防到万物互联的空中革命一、现有应用场景全景解析 （一）公共安全领域 1. 立体安防体系空中哨兵：搭载 77 GHz 77\text{GHz} 77GHz毫米波雷达（探测距离 5 km 5\text{km} 5km&…...

编程日记 2025/8/16 12:44:23

手写简易Tomcat核心实现：深入理解Servlet容器原理

目录一、Tomcat概况 1. tomcat全局图 2.项目结构概览二、实现步骤详解 2.1 基础工具包（com.qcby.util） 2.1.1 ResponseUtil：HTTP响应生成工具 2.1.2 SearchClassUtil：类扫描工具 2.1.3 WebServlet：自定义注解…...

编程日记 2025/8/21 15:28:18

【音视频】ffmpeg命令提取像素格式

1、提取YUV数据提取yuv数据，并保持分辨率与原视频一致使用-pix_fmt或-pixel_format指定yuv格式提取数据，并保持原来的分辨率 ffmpeg -i music.mp4 -t "01:00" -pixel_format yuv420p music.yuv提取成功后，可以使用ffplay指定y…...

编程日记 2025/8/18 10:23:13

深度剖析Redis：双写一致性问题及解决方案全景解析

在高并发场景下，缓存与数据库的双写一致性是每个开发者必须直面的核心挑战。本文通过5大解决方案，带你彻底攻克这一技术难关！ 一、问题全景图：当缓存遇到数据库 1.1 典型问题场景 // 典型问题代码示例 public void updateProduc…...

编程日记 2025/8/21 15:29:37

Redis----大key、热key解决方案、脑裂问题

文章中相关知识点在往期已经更新过了，如果有友友不理解可翻看往期内容出现脑裂问题怎么保证集群还是高可用的什么是脑裂问题脑裂说的就是当我们的主节点没有挂，但是因为网络延迟较大，然后和主节点相连的哨兵通信较差，之后主…...

编程日记 2025/8/21 15:29:39

Android 调用c++报错 exception of type std::bad_alloc: std::bad_alloc

一、报错信息 terminating with uncaught exception of type std::bad_alloc: std::bad_alloc 查了那部分报错c++代码 szGridSize因为文件太大，初始化溢出了 pEGM->pData = new float[szGridSize]; 解决办法直接抛出异常，文件太大就失败吧最后还增加一个日志输出，给…...

编程日记 2025/8/21 15:24:27

【从零开始学习计算机科学】操作系统（五）处理器调度

【从零开始学习计算机科学】操作系统（五）处理器调度处理器调度一些简单的短程调度算法的思路先来先服务（First-Come-First-Served，FCFS）优先级调度及其变种最短作业优先调度算法（SJF）--非抢占式最短作业优先调度算法（SJF）--抢占式最高响应比优先调度算法轮转调度算法…...

编程日记 2025/8/16 11:43:01

LeetCode1871 跳跃游戏VII

LeetCode 跳跃游戏 IV：二进制字符串的跳跃问题题目描述给定一个下标从 0 开始的二进制字符串 s 和两个整数 minJump 和 maxJump。初始时，你位于下标 0 处（保证该位置为 0）。你需要判断是否能到达字符串的最后一个位置&#xf…...

编程日记 2025/8/19 21:03:26

ResNet50深度解析：原理、结构与PyTorch实现

ResNet50深度解析：原理、结构与PyTorch实现 1. 引言 ResNet（残差网络）是深度学习领域的一项重大突破，它巧妙解决了深层神经网络训练中的梯度消失/爆炸问题，使得构建和训练更深的网络成为可能。作为计算机视觉领域的里…...

编程日记 2025/8/18 1:18:47

MATLAB 控制系统设计与仿真 - 24

PID 控制器分析- 控制器的形式连续控制器的结构： 为滤波时间常数，这类PID控制器在MATLAB系统控制工具箱称为并联PID控制器，可由MATLAB提供的pid函数直接输入，格式为： 其他类型的控制器也可以由该函数直接输入&#x…...

编程日记 2025/8/21 15:22:40

数字IC后端设计实现教程 |Innovus ICC2 Routing Pin Access Setting设置方法

默认情况下routing 引擎可以在标准单元可以打孔的任何地方（via region）打孔，甚至工具还会先拉出一块metal，然后再打孔过渡到高层。随之工艺节点越做越小，标准单元内部的结构也越来越复杂。此时如果还沿用传统工艺的走…...

编程日记 2025/8/21 15:29:39

1、准备数据 -- drop drop table if exists dept; drop table if exists emp; drop table if exists salgrade;-- CREATE CREATE TABLE dept (deptno int NOT NULL COMMENT 部门编号,dname varchar(14) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMM…...

编程日记 2025/8/21 13:52:03

网络编程-----服务器（多路复用IO 和 TCP并发模型）

一、单循环服务器模型 1. 核心特征 while(1){newfd accept();recv();close(newfd);}2. 典型应用场景 HTTP短连接服务（早期Apache）CGI快速处理简单测试服务器 3. 综合代码 #include <stdio.h> #include <sys/types.h> /* See NO…...

编程日记 2025/8/18 14:19:56

GitHub 项目版本管理与 Release 发布流程记录

GitHub 项目版本管理与 Release 发布流程记录 1. 项目环境设置 1.1 打开 VS Code 并进入项目目录 E:\adb\Do>code .1.2 配置 Git 用户信息 E:\adb\Do>git config --global user.name "n" E:\adb\Do>git config --global user.email "**gmail.com&q…...

编程日记 2025/8/20 8:59:52

GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

运行效果介绍我们已经使用了这个元素，它能够构建一个完整的播放管道，而无需做太多工作。本教程介绍如何进一步自定义，以防其默认值不适合我们的特定需求。将学习： • 如何确定文件包含多少个流，以及如何切换其中。…...

编程日记 2025/8/21 15:30:35

Python+DeepSeek：开启AI编程新次元——从自动化到智能创造的实战指南

文章核心价值技术热点：结合全球最流行的编程语言与国产顶尖AI模型实用场景：覆盖代码开发/数据分析/办公自动化等高频需求流量密码：揭秘大模型在编程中的创造性应用目录结构环境搭建：5分钟快速接入DeepSeek场景一：AI辅助代码开发（智能补全+调试）场景二：数据分析超级助…...

编程日记 2025/8/18 11:52:00

使用OpenCV和MediaPipe库——驼背检测（姿态监控）

目录驼背检测的运用 1. 驾驶姿态与疲劳关联分析 2. 行业应用案例 1. 教育场景痛点分析 2. 智能教室系统架构代码实现思路 1. 初始化与配置 2. MediaPipe和摄像头设置 3. 主循环 4. 资源释放 RGB与BGR的区别一、本质区别二、OpenCV的特殊性内存结构示意图&…...

编程日记 2025/8/21 6:43:14

maven的项目构建

常用构建命令命令说明mvn clean清理编译结果（删掉target目录）mvn compile编译核心代码，生成target目录mvn test-compile编译测试代码，生成target目录mvn test执行测试方法mvn package打包，生成jar或war文件mvn insta…...

编程日记 2025/8/19 8:58:23

光电感知赋能智能未来灵途科技护航新质生产力发展

2024年《政府工作报告》将大力推进现代化产业体系建设，加快发展新质生产力作为首要工作任务。这是“新质生产力”首次出现在《政府工作报告》中。发展新质生产力具体包括新兴产业 ：推动商业航天、低空经济等新兴产业实现安全健康发展。未来产业 &a…...

编程日记 2025/8/21 15:26:22

文件上传靶场（10--20）

目录实验环境： 具体内容实现： 第十关（双写绕过）： 第十一关：（%00截断，此漏洞在5.2版本中） 正确用法错误用法思路： 操作过程： 第十二关…...

编程日记 2025/8/19 5:22:48

deepseek在pycharm中的配置和简单应用

对于最常用的调试python脚本开发环境pycharm，如何接入deepseek是我们窥探ai代码编写的第一步，熟悉起来总没坏处。 1、官网安装pycharm社区版（免费），如果需要安装专业版，需要另外找破解码。 2、安装Ollama…...

编程日记 2025/8/18 1:35:42

Linux 生成静态库

文章目录前提小知识生成和使用.a库操作步骤在应用程序中，有一些公共的代码需要反复使用的，可以把这些代码制作成“库文件”；在链接的步骤中，可以让链接器在“库文件”提取到我们需要使用到的代码，复制到生成的可执行…...

编程日记 2025/8/21 15:23:12

yolo-TensorRT相关代码逐步详解-pt转engine

基于TensorRT 的推论运行速度会比仅使用CPU 快40倍，提供精度INT8 和FP16 优化，支援TensorFlow、Caffe、Mxnet、Pytorch 等深度学习框架，其中Mxnet、Pytorch 需先转换为ONNX 格式。 TensorRT的构建流程大致分为几个步骤：创建构建器和网络、解析模型、配置构建参数、构建引擎…...

编程日记 2025/8/21 15:22:40

简记_ MCU管脚的防静电处理

一、分析（一） 接口处的信号要先过 ESD/TVS 管，然后拉到被保护器件； 建个 ESD 电路发生器的模型，代入到我们的电路中去分析： 继电器实现这两个“开关”，并且还会感应出一些额外的RLC寄生。 ES…...

编程日记 2025/8/21 15:24:28

C语言实现算法（二）

以下是 “10个不重复的C语言经典算法案例“，包含可运行代码、开发环境配置及系统要求。所有代码基于标准C语法，已在GCC 9.3.0环境下测试通过。开发环境配置编译器：GCC（推荐） Windows：安装 MinGW 或 Visual Studio Linux：sudo apt-get install gcc macOS：通过Xcode Co…...

编程日记 2025/8/21 15:26:21

transformer模型介绍——大语言模型 LLMBook 学习（二）

1. transformer模型 1.1 注意力机制 **注意力机制（Attention Mechanism）**在人工智能中的应用，实际上是对人类认知系统中的注意力机制的一种模拟。它主要模仿了人类在处理信息时的选择性注意（Selective Attention）&a…...

编程日记 2025/8/21 15:23:14

K8s 1.27.1 实战系列（十一）ConfigMap

ConfigMap 是 Kubernetes 中管理非敏感配置的核心资源，通过解耦应用与配置实现灵活性和可维护性。一、ConfigMap 的核心功能及优势 1、配置解耦将配置文件（如数据库地址、日志级别）与容器镜像分离，支持动态更新而无需重建镜像。 2、多形式注入环境变量：将键值…...

编程日记 2025/8/20 12:21:19

下降路径最⼩和（medium）

题目描述： 给你一个 n x n 的方形整数数组 matrix ，请你找出并返回通过 matrix 的下降路径的最小和。下降路径可以从第一行中的任何元素开始，并从每一行中选择一个元素。在下一行选择的元素和当前行所选元素最多相隔一列&#xff08…...

编程日记 2025/8/16 10:02:25

数据结构--【顺序表与链表】笔记

顺序表 template <class T> class arrList :public List<T> //表示 arrList 类以公有继承的方式继承自 List<T> 类 //公有继承意味着 List<T> 类的公共成员在 arrList 类中仍然是公共成员，受保护成员在 arrList 类中仍然是受保护成员。 { …...

编程日记 2025/8/17 12:31:14

使用AI一步一步实现若依前端(9)

功能9：退出登录功能功能8：页面权限控制功能7：路由全局前置守卫功能6：动态添加路由记录功能5：侧边栏菜单动态显示功能4：首页使用Layout布局功能3：点击登录按钮实现页面跳转功能2&#xf…...

编程日记 2025/8/17 21:27:59

Excel两列和依次相减

Excel实现左列依次行数的和减去右列依次行数的和： 举例：结余SUM(预付款)-SUM(开支) 公式：SUM($B$2:B2)-SUM($C$2:C2)...

编程日记 2025/8/16 11:48:40

智能合约中权限管理不当

权限管理不当 ： 权限管理不当是智能合约中常见的安全问题之一，尤其是在管理员或特定账户被过度赋予权限的情况下。如果合约中的关键功能，如转移资产、修改合约状态或升级合约逻辑，可以被未经授权的实体随意操作，这将构…...

编程日记 2025/8/16 11:23:57

Java糊涂包（Hutool）的安装教程并进行网络爬虫

Hutool的使用教程 1：在官网下载jar模块文件 Central Repository: cn/hutool/hutool-all/5.8.26https://repo1.maven.org/maven2/cn/hutool/hutool-all/5.8.26/ 下载后缀只用jar的文件 2：复制并到idea当中，右键这个模块点击增加到库 3&…...

编程日记 2025/8/19 16:48:51

ubuntu软件

视频软件，大部分的编码都能适应 sudo apt install vlc图片软件 sudo apt install gwenview截图软件 sudo apt install flameshot设置快捷键 flameshot flameshot gui -p /home/cyun/Pictures/flameshot也就是把它保存到一个自定义的路径菜单更换 sudo apt r…...

编程日记 2025/8/21 12:59:14

python高效试用17---两个字符串组成一个新的字符串和两个字符串组成元组作为key哪个更高效

在 Python 中，使用字符串连接 (str1 str2) 作为 key 和使用元组 ((str1, str2)) 作为 key 的效率差异，主要受以下因素影响： 哈希计算速度： 字符串连接 (str1 str2)：会创建一个新的字符串对象，并计算哈希…...

编程日记 2025/8/18 14:32:06

【C++模板】：开启泛型编程之门（函数模版，类模板）

📝前言： 在上一篇文章C内存管理中我们介绍了C的内存管理，重点介绍了与C语言的区别，以及new和delete。这篇文章我们将介绍C的利器——模板。在C编程世界里，模板是一项强大的特性，它为泛型编程奠定了坚实基础…...

编程日记 2025/8/20 9:38:14

华为eNSP:2.配置OSPF报文分析和验证

一、OSPF的5种数据包 Hello包：用于发现和维护邻居关系。定期发送，确保邻居路由器在线。数据库描述包（DBD, Database Description Packet）：在邻居关系建立后，用于交换链路状态数据库的摘要信息。链路状…...

编程日记 2025/8/18 3:03:40

一学就会的深度学习基础指令及操作步骤（3）模型训练验证

文章目录模型训练验证损失函数和优化器模型优化训练函数验证函数模型保存模型训练验证损失函数和优化器 loss_function nn.CrossEntropyLoss() # 损失函数 optimizer Adam(model.parameters()) # 优化器，优化参数模型优化获得模型所有的可训练参数&#x…...

编程日记 2025/8/18 12:25:18

【病毒分析】熊猫烧香病毒分析及其查杀修复

目录前言一、样本概况 1.1 样本信息 1.2 测试环境及工具 1.3 分析目标二、具体行为分析 2.1 主要行为 2.1.1 恶意程序对用户造成的危害 2.2 恶意代码分析 2.2.1 加固后的恶意代码树结构图(是否有加固) 2.2.2 恶意程序的代码分析片段三、解决方案(或总结) 3.1 …...

编程日记 2025/8/16 9:54:41

K8s 1.27.1 实战系列（九）Volume

一、Volume介绍 Volume 指的是存储卷，包含可被Pod中容器访问的数据目录。容器中的文件在磁盘上是临时存放的，当容器崩溃时文件会丢失，同时无法在多个Pod中共享文件，通过使用存储卷可以解决这两个问题。 1、Volume 的核心作用数据持久化与生命周期管理 Volume 的核心目标…...

编程日记 2025/8/19 18:14:01

火绒企业版V2.0全面支持Linux与国产化系统！免费试用助力国产化终端安全升级

国产化浪潮下的安全新挑战随着信创产业的加速推进，国产操作系统（统信UOS、麒麟OS等）和ARM架构服务器逐步成为政企核心业务的基础设施。然而，针对国产化系统的勒索攻击、网页篡改、供应链漏洞等威胁频发，传统安全方案…...

编程日记 2025/8/17 13:31:51

黑色RGB是什么

>好的，用户现在问的是“黑色rgb是什么”。我需要先理解用户的问题。之前用户在使用MATLAB调整网格线颜色时，可能看到了默认颜色是黑色，或者之前我提到过默认颜色是[0.15 0.15 0.15]，而用户可能现在想知道黑色的RGB值具体是什么…...

编程日记 2025/8/18 1:44:12

基于springboot+vue的佳途旅行分享预约平台

编程日记 2025/8/15 17:18:42

Nuxt3 ssr build/dev时区分不同的环境

package.json "scripts": {"build": "nuxt build --dotenv .env.prod","build:dev": "nuxt build --dotenv .env.dev","postbuild": "mv -f .output ./dist/.output", //支持自定义文件名"dev&quo…...

编程日记 2025/8/19 7:15:00

利用OpenResty拦截SQL注入

需求客户的一个老项目被相关部门检测不安全，报告为sql注入。不想改代码，改项目，所以想到利用nginx去做一些数据校验拦截。也就是前端传一些用于sql注入的非法字符或者数据库的关键字这些，都给拦截掉，从而实现拦截sql…...

编程日记 2025/8/15 13:28:42

保姆级别使用Python实现“机器学习“案例

从安装到运行手把手教学，保证不迷路～ 🌈 零基础友好版教程 📦 第一步：安装必备工具包别慌！这里有两种安装方式，选你顺手的方式1：用代码自动安装（推荐新手）直接在你的Python代码最前面加这几行，运行时会自动安装： # 把这坨代码贴在文件最前面！ import sys im…...

编程日记 2025/8/16 9:57:19

【最新】DeepSeek 实用集成工具有那些？

deepseek 系列github仓库地址【主页】deepseek-aiDeepSeek-R1DeepSeek-V3DeepSeek-VL2【本文重点介绍】awesome-deepseek-integration 注意：以下内容来自awesome-deepseek-integration DeepSeek 实用集成（awesome-deepseek-integration） 将…...

编程日记 2025/8/20 5:23:45

【前端面试题】Vu3常见的面试题

1.Vue3与 Vue2的核心区别有哪些？ ‌ 响应式系统 ‌： ‌ Vue2：通过Object.defineProperty 实现响应式。这种方式在处理对象属性的添加和删除时存在局限性，且无法直接监控数组的变化 ‌;‌Vue3：采用Proxy 实现响应式&…...

编程日记 2025/8/20 18:12:45

论文阅读分享——UMDF（AAAI-24）

概述题目：A Unified Self-Distillation Framework for Multimodal Sentiment Analysis with Uncertain Missing Modalities 发表：The Thirty-Eighth AAAI Conference on Artificial Intelligence (AAAI-24) 年份：2024 Github：暂…...

编程日记 2025/8/15 23:03:03

一、全局环境下的 this

二、函数调用中的 this