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

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

news 2025/7/8 9:39:30

具体见：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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/7 9:14:28

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/7 20:59:23

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/6 3:45:35

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/6/17 17:48:41

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/7/7 21:55:30

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/7/6 1:55:51

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/6/19 6:02:19

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/7/5 16:23:41

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/6/28 14:04:35

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/6/15 16:44:42