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

【前端学习——js篇】 10.this指向

news 2025/12/15 11:20:00

具体见：https://github.com/febobo/web-interview

10.this指向

根据不同的使用场合，this有不同的值，主要分为下面几种情况：

  • 默认绑定
  • 隐式绑定
  • new绑定
  • 显示绑定
①默认绑定

全局环境中定义person函数，内部使用this关键字

var name = 'Jenny';
function person() {return this.name;
}
console.log(person());  //Jenny

上述代码输出Jenny，原因是调用函数的对象在游览器中位window，因此this指向window，所以输出Jenny

注意：

严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined，只有函数运行在非严格模式下，默认绑定才能绑定到全局对象

②隐式绑定

函数还可以作为某个对象的方法调用，这时this就指向这个上级对象。

//this 永远指向最后调用它的对象
var o = {a:10,b:{fn:function(){console.log(this.a); //undefined}}
}
o.b.fn();

因为this的上一级对象为b，而b内部并没有a变量的定义，所以输出undefind

③new绑定

通过构建函数new关键字生成一个实例对象，此时this指向这个实例对象

function test() {this.x = 1;
}var obj = new test();
obj.x // 1

上述代码之所以能过输出1，是因为new关键字改变了this的指向。

而当new的过程中遇到return一个对象时，此时this指向这个对象。

function fn()  
{  this.user = 'xxx';  return {user = '123'};  
}
var a = new fn();  
console.log(a.user); //123

而当return一个基本类型时，this还是指向它的实例。

function fn()  
{  this.user = 'xxx';  return 1;
}
var a = new fn;  
console.log(a.user); //xxx

null同理指向实例。

④显式修改

使用apply | call | bind改变函数的调用对象，第一个参数就是改变后调用这个函数的对象。

var x = 0;
function test() {console.log(this.x);
}var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(obj) // 1

而三者的区别：

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
  • 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
  • bind 是返回绑定this之后的函数，apply 、call 则是立即执行 。
⑤箭头函数

箭头函数的this非常特殊，因为它在函数定义时就被确定了，而且不会被动态改变。

<body><div><button class="btn1">普通函数</button><button class="btn2">箭头函数</button></div>
</body>

const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');btn1Click = function () {console.log("btn1" + this); //button
}
btn2Click = () =>{console.log("btn2" + this); // window
}
btn1.addEventListener("click", btn1Click, false);
btn2.addEventListener("click", btn2Click, false);

可以看到默认函数的是由btn2调用的，所以指向btn2；而箭头函数在编译时就被绑定了，即btn2Click在创建时就定义了this，所以this指向window对象。

此外，箭头函数可以看作是匿名函数，是一次性的，所以与默认函数区别很明显。

  • 箭头函数没有构造函数，没有原型对象
  • 箭头函数没有arguments对象
  • 箭头函数的this在定义时就被确认了，不会动态更新
其他

隐式绑定 VS 显式绑定

function foo() {console.log( this.a );
}var obj1 = {a: 2,foo: foo
};var obj2 = {a: 3,foo: foo
};obj1.foo(); // 2
obj2.foo(); // 3obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

显然，显示绑定的优先级更高

new绑定 VS 隐式绑定

function foo(something) {this.a = something;
}var obj1 = {foo: foo
};var obj2 = {};obj1.foo( 2 );
console.log( obj1.a ); // 2obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4

可以看到，new绑定的优先级>隐式绑定

new绑定 VS 显式绑定

因为new和apply、call无法一起使用，但硬绑定也是显式绑定的一种，可以替换测试

function foo(something) {this.a = something;
}var obj1 = {};var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

bar被绑定到obj1上，但是new bar(3) 并没有像我们预计的那样把obj1.a修改为3。但是，new修改了绑定调用bar()中的this

我们可认为new绑定优先级>显式绑定

综上，new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级

相关文章：

【前端学习——js篇】 10.this指向

具体见&#xff1a;https://github.com/febobo/web-interview 10.this指向 根据不同的使用场合&#xff0c;this有不同的值&#xff0c;主要分为下面几种情况&#xff1a; 默认绑定隐式绑定new绑定显示绑定 ①默认绑定 全局环境中定义person函数&#xff0c;内部使用this关…...

编程日记 2024/3/28 10:34:44

项目搭建之统一返回值

自定义枚举类 Getter public enum ReturnCodeEnum {/*** 操作失败**/RC999("999","操作XXX失败"),/*** 操作成功**/RC200("200","success"),/*** 服务降级**/RC201("201","服务开启降级保护,请稍后再试!"),/*** …...

编程日记 2024/3/28 10:32:41

嵌入式和 Java 走哪条路?

最近看到一个物联网大三学生的疑问&#xff0c;原话如下&#xff1a; 本人普通本科物联网工程专业&#xff0c;开学大三&#xff0c;现在就很迷茫&#xff0c;不打算考研了&#xff0c;准备直接就业&#xff0c;平时一直在实验室参加飞思卡尔智能车比赛&#xff0c;本来是想走嵌…...

编程日记 2024/3/28 10:30:38

C++ 控制语句（一）

一 顺序结构 程序的基本结构有三种&#xff1a; 顺序结构、分支结构、循环结构 大量的实际问题需要通过各种控制流程来解决。 1.1 顺序结构 1.2 简单语句和复合语句 二 循环 2.1 for循环 语句流程图 注意&#xff1a;使用for语句的灵活性 三 while语句 四 do while语句...

编程日记 2024/3/28 10:29:37

mysql 用户管理-权限表

学习了《mysql5.7安装》&#xff0c;就先再了解下用户管理&#xff0c;先了解下权限表。 MySQL是一个多用户数据库&#xff0c;具有功能强大的访问控制系统&#xff0c;可以为不同用户指定允许 的权限。MySQL用户可以分为普通用户和root用户。root 用户是超级管理员,拥有所有权…...

编程日记 2024/3/28 10:27:33

【Postman如何进行接口测试简单详细操作实例】

1、下载Postman postman下载地址&#xff1a;Download Postman | Get Started for Free 2、安装Postman (1)双击下载好的postman-setup.exe文件&#xff0c;进行安装postman工具 (2)安装完成后&#xff0c;在桌面找到并打开postman软件&#xff0c;输入邮箱和密码进行登录&a…...

编程日记 2024/3/28 10:26:32

docker搭建Project Calico环境

Project Calico 是一个开源的网络和网络安全解决方案，专为容器、虚拟机和本地工作负载设计。它提供了高度可扩展的网络层，支持广泛的容器编排平台，如 Kubernetes、Docker Swarm和OpenStack。Calico 的主要特点包括： 支持多层网络策略，包括基于角色的访问控制(RBAC)。提供网…...

编程日记 2024/3/28 10:24:28

pyecharts操作一

pyecharts 是一个用于生成Echarts图表的Python库。Echarts是百度开源的一个数据可视化JS库&#xff0c;可以生成一些非常酷炫的图表。 环境安装 pip install pyecharts 检查版本 import pyecharts print(pyecharts.version) 2.0.3 柱状图绘制 from pyecharts.charts impor…...

编程日记 2024/3/28 10:21:24

『Apisix进阶篇』动态负载均衡：APISIX的实战演练与策略应用

&#x1f680;『Apisix系列文章』探索新一代微服务体系下的API管理新范式与最佳实践 【点击此跳转】 &#x1f4e3;读完这篇文章里你能收获到 &#x1f3af; 掌握APISIX中多种负载均衡策略的原理及其适用场景。&#x1f4c8; 学习如何通过APISIX的Admin API和Dashboard进行负…...

编程日记 2024/3/28 10:19:22

【开发篇】十一、GC调优的分析工具

文章目录 1、调优的主要指标2、工具一&#xff1a;jstat3、工具二&#xff1a;Visual VM的插件4、工具三&#xff1a;Prometheus Grafana5、生成GC日志6、工具四&#xff1a;GC Viewer7、工具五&#xff1a;GCeasy GC调优&#xff0c;是为了避免因垃圾回收引起程序性能下降&am…...

编程日记 2024/3/28 10:17:20

SpringCloudConfig 使用git搭建配置中心

一 SpringCloudConfig 配置搭建步骤 1.引入 依赖pom文件 引入 spring-cloud-config-server 是因为已经配置了注册中心 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-config-server</…...

编程日记 2024/3/28 10:16:19

c#基础-引用类型和值类型的区别

在C#中，数据类型分为两类：值类型和引用类型。 值类型：直接存储数据，分配在栈(Stack)上。常见的值类型包括基本数据类型（int, float, double等），结构体（struct），枚举（enum）等。 引用类型：存储数据的引用和对象，分配在托管堆(Heap)上。常见的引用类型包括类（cla…...

编程日记 2024/3/28 10:14:16

面试题-3.20

1、__FILE__表示什么意思&#xff1f; __FILE__&#xff1a;当前文件的完整路径和文件名 __LINE__&#xff1a;当前行 __DIR__&#xff1a;当前文件所在的目录 2、如何获取客户端的IP地址&#xff1f; 通过超全局数组$_SERVER&#xff1a;echo $_SERVER[REMOTE_PORT]; 3、写…...

编程日记 2024/3/28 10:13:15

glibc内存管理ptmalloc - 多线程内存管理

上图 此图着重描述的是子线程&#xff0c;一个heap&#xff08;由heap_info结构体描述&#xff09;用完&#xff0c;需要另一个的情况。 子线程内存特点 1. 第一个heap物理内存上从低地址到高地址依次是&#xff1a;heap_infomalloc_state(arena)chunks /* arena.c #0 new_…...

编程日记 2024/3/28 10:10:11

区块链食品溯源案例实现（一）

引言&#xff1a; 食品安全问题一直是社会关注的热点&#xff0c;而食品溯源作为解决食品安全问题的重要手段&#xff0c;其重要性不言而喻。传统的食品溯源系统往往存在数据易被篡改、信息不透明等问题&#xff0c;而区块链技术的引入&#xff0c;为食品溯源带来了革命性的变革…...

编程日记 2024/3/28 10:09:09

4S店车辆管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. 管…...

编程日记 2024/3/28 10:07:07

SpringBoot+Prometheus+Grafana实现应用监控和报警

一、背景 SpringBoot的应用监控方案比较多&#xff0c;SpringBootPrometheusGrafana是目前比较常用的方案之一。它们三者之间的关系大概如下图&#xff1a; 关系图 二、开发SpringBoot应用 首先&#xff0c;创建一个SpringBoot项目&#xff0c;pom文件如下&#xff1a; <…...

编程日记 2024/3/28 10:05:05

10 - Debian如何让特定用户切换root身份

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何让特定用户切换root身份 《傅老师Debian小知识库系列之10》——原创 前言 傅老师Debian小知识库特点&#xff1a; 1、最小化拆解Debian实用技能…...

编程日记 2024/3/28 9:59:59

HPT发布HyperGAI 多模态大模型：性能领先GPT-4V，全面胜过Gemini Pro

前言 HyperGAI研究团队自豪地宣布推出HPT——新一代领先的多模态大型语言模型&#xff08;Multimodal Large Language Model, Multimodal LLM&#xff09;。作为人工通用智能&#xff08;Artificial General Intelligence, AGI&#xff09;构建的基石&#xff0c;HPT跨入多模态…...

编程日记 2024/3/28 9:47:47

汇春科技之MDT10F684

目录 第一、时钟 第二&#xff0c;定时器Timer0 第三&#xff0c;pwm 汇春官网&#xff1a;汇春科技 (yspringtech.com) 汇春是麦肯的原厂&#xff0c;以下是两个论坛&#xff0c;其中都有关于麦肯单片机的学习论坛&#xff0c;可以参考学习&#xff0c;第一个叫英锐恩&…...

编程日记 2024/3/28 9:45:44

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/12/12 16:39:33

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/12/14 2:31:21

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/12/10 1:24:24

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/12/5 2:21:03

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/12/5 21:11:55

Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...

编程新知 2025/10/26 4:25:02

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

编程新知 2025/10/14 21:11:26

Java设计模式：责任链模式

一、什么是责任链模式&#xff1f; 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 是一种 行为型设计模式&#xff0c;它通过将请求沿着一条处理链传递&#xff0c;直到某个对象处理它为止。这种模式的核心思想是 解耦请求的发送者和接收者&#xff0c;…...

编程新知 2025/12/11 23:46:26