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

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

news 2026/3/27 5:47:49

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

gte-base-zh场景应用：电商搜索与客服问答的语义匹配实战

gte-base-zh场景应用&#xff1a;电商搜索与客服问答的语义匹配实战 1. 电商场景中的语义匹配挑战 1.1 搜索不精准的痛点分析 在电商平台上&#xff0c;用户搜索"苹果手机"却看到水果苹果的图片&#xff0c;或者输入"轻薄笔记本"却返回游戏本&#xff0…...

编程新知 2026/3/27 5:00:29

什么时候会触发FullGC

面试 1、老年代空间不足。应该让对象在年轻代多存活一段时间&#xff0c;不要创建过大的对象及数组。 2、元空间满了。说明此时&#xff0c;系统中要加载的类、反射的类和调用的方法较多。 3、MinorGC执行后晋升到老年代的平均大小大于老年代的剩余空间。...

编程新知 2026/3/27 4:50:07

SRS + FFmpeg WebRTC 循环推流环境搭建

SRS FFmpeg WebRTC 循环推流环境搭建指南 本指南介绍如何使用 Docker Compose 快速搭建一个基于 SRS (Simple Realtime Server) 的流媒体测试环境。 推流协议&#xff1a;RTMP (FFmpeg 模拟推流)拉流协议&#xff1a;WebRTC (低延迟播放)特性&#xff1a;视频循环播放、不保存…...

编程新知 2026/3/27 4:21:50

OpenClaw智能邮件助手：nanobot镜像自动分类与回复重要邮件

OpenClaw智能邮件助手&#xff1a;nanobot镜像自动分类与回复重要邮件 1. 为什么需要智能邮件助手 每天早晨打开邮箱&#xff0c;看到堆积如山的未读邮件总是让人头疼。重要客户的询盘可能被埋没在促销广告中&#xff0c;紧急的协作请求可能因为延迟回复而影响项目进度。作为…...

编程新知 2026/3/27 4:21:50

深入解析PLL锁相环在FPGA时钟管理中的核心应用

1. 从闹钟到芯片&#xff1a;PLL如何成为FPGA的"时间管家" 想象一下你早上起床的场景&#xff1a;手机闹钟准时响起&#xff0c;咖啡机开始自动煮咖啡&#xff0c;窗帘缓缓拉开让阳光照进来。这些设备之所以能完美同步&#xff0c;全靠它们内部精确的时钟信号。而在…...

编程新知 2026/3/27 3:51:34

MD_DS3231库：工业级DS3231 RTC全功能驱动设计与实践

1. MD_DS3231库深度解析&#xff1a;面向工业级RTC应用的DS3231全功能驱动设计与工程实践DS3231是Maxim&#xff08;现属Analog Devices&#xff09;推出的高精度IC实时时钟芯片&#xff0c;其2ppm温漂特性、内置温度补偿晶振&#xff08;TCXO&#xff09;、独立电池供电备份、…...

编程新知 2026/3/27 3:33:08

如何使用CSS自定义属性加速前端开发：Open Props实用指南

如何使用CSS自定义属性加速前端开发&#xff1a;Open Props实用指南 【免费下载链接】open-props CSS custom properties to help accelerate adaptive and consistent design. 项目地址: https://gitcode.com/gh_mirrors/op/open-props Open Props是一个开源的CSS自定义…...

编程新知 2026/3/27 2:32:45

零基础手写大模型

从零搭建大模型&#xff1a;零基础学习实现职业经济跃迁指南 引言 在人工智能重塑全球产业格局的今天&#xff0c;“大模型”已不再仅仅是科技巨头的专利&#xff0c;而是成为了数字经济时代新的“电力”与“石油”。对于广大职场人士、创业者及寻求转型的个体而言&#xff0…...

编程新知 2026/3/27 1:28:20

Cartographer实战：如何用Velodyne 32E激光雷达跑通GraphSLAM（附避坑指南）

Cartographer实战&#xff1a;Velodyne 32E激光雷达的GraphSLAM全流程解析与性能调优 当Velodyne 32E激光雷达遇上Cartographer的GraphSLAM算法&#xff0c;如何在复杂环境中实现厘米级建图精度&#xff1f;本文将拆解从硬件配置到算法调优的完整落地流程&#xff0c;分享我在大…...

编程新知 2026/3/27 1:26:20

Qwen3.5-35B-A3B-AWQ-4bit开源镜像实战：法律合同关键条款图示定位与文本提取

Qwen3.5-35B-A3B-AWQ-4bit开源镜像实战&#xff1a;法律合同关键条款图示定位与文本提取 1. 引言&#xff1a;当AI遇到法律合同 想象一下&#xff0c;你是一位法务人员&#xff0c;面前摆着一份长达50页的PDF合同。老板急着要你找出所有关于“违约责任”的条款&#xff0c;并…...

编程新知 2026/3/27 0:35:33