this关键字,是如何把你难倒的?

news2025/2/28 3:18:45

作为一名实战前端工程师,在jq时代,是经常被this关键字难倒的。几年前每次我意识到程序出现问题的时候,都本能反应是自己的this没有绑定好,于是重新绑定一下,就能解决了。但是他确实一直为难着我。

转眼到了2022年底,我想需要解决一下这个千年难题了。于是我开始认真摸索一番。

到底什么是this

简单说,this就是属性或方法“当前”所在的对象。

为什么这么简单的定义,我们理解不了?

  1. 层层嵌套,改变了this对象
  2. 对象自动携带this,或者全局默认有this对象
  3. 操作dom的时候,this对象变得扑朔迷离。

实际上JavaScript 的变量类型一样,看看这三种类型的变量,是不是更容易理解this了?
局部变量
被捕获变量
全局变量

this的实质

JavaScript 的对象类型存放给变量的是一个引用地址,是一个字符串地址。
引用地址

变量o是一个地址(reference)。后面如果要读取o.obj,引擎先从o拿到内存地址,然后再从该地址读出原始的对象,返回它的obj属性。

到这里好像跟this没关系?回忆一下,我们第一次接触this是学什么知识点的时候?没错,构造函数,new一个对象的时候,实例对象默认创建了this变量,这是我们第一次学习到this关键字。

我们把上面的对象o上加入kill方法.

var o = {
	num: 1,
	obj:{a:1},
	kill: function(){
		console.log(this.num)
	}
}

现在问题就来了,调用o.kill()会输出什么?
如果var b = o.kill; b();又输出什么?

答案是o.kill()会输出1;而b()又输出的是undefined。 为什么产生这样的不同呢?

由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

o.kill()的运行上下文是o这个对象(往上看一下哪个对象引用地址图);而b变量的运行上下文是window全局。b是window对象下的一个变量,所以b是在window对象包裹内部,而window对象其他地方没有定义num变量,所以num就是未定义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/75576.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图解LeetCode——1780. 判断一个数字是否可以表示成三的幂的和(难度:中等)

一、题目 给你一个整数 n ,如果你可以将 n 表示成若干个不同的三的幂之和,请你返回 true ,否则请返回 false 。 对于一个整数 y ,如果存在整数 x 满足 y 3^x ,我们称这个整数 y 是三的幂。 二、示例 2.1> 示例…

SpringBoot面试杀手锏——自动配置原理

引言 不论在工作中,亦或是求职面试,Spring Boot已经成为我们必知必会的技能项。除了某些老旧的政府项目或金融项目持有观望态度外,如今的各行各业都在飞速的拥抱这个已经不是很新的Spring启动框架。 当然,作为Spring Boot的精髓…

凌恩客户文章|JCR 一区:多组学联合分析揭示PCOS真元凶

期刊:Journal of Ovarian Research 影响因子:5.506 发表时间:2022年10月 客户单位:汕头大学医学院第一附属医院鄞国书课题组 一、研究背景 多囊卵巢综合征(PCOS)是导致育龄妇女不孕的最常见内分泌疾病…

MyBatis二 MyBatis常见面试题

一 MyBatis是什么? MyBatis是一款优秀的持久层框架,一个半ORM (对象关系映射)框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XM…

postman+newman+jenkins持续集成

今天为大家带来的是postmannewmanjenkins进行API接口测试的持续集成: 一. postman测试实战 postman测试API接口是通过JavaScript脚本完成测试中的功能, 在请求发起前后实现测试操作. 常用功能: 请求前脚本(pre-request scripts)设置请求前置操作如设置变量等 请求后在tests…

UE多实例云渲染之Nginx代理

Nginx的Https代理 我们实现UE像素流时大部分使用的是http协议,但是某些时候前端由于某些功能问题需要使用https的协议(如前端调用本地摄像头)需要使用https协议。如果此时在内部使用http请求就会被block掉。其中一种简单的方案就是通过修改浏览器的安全…

SOLID设计原则

1. SRP单一职责原则 任何一个软件模块都应该有且仅有一个被修改的原因。 反例是一个类的三个方法给三个部门提供服务,而这三个方法有一些公共子方法,很有可能因为A部门的代码变更改动,导致B、C部门调用的方法出现意料之外的结果。 2. OCP开…

nginx请求转发webSocket

原由 1.我有一个socket服务,用ip访问是成功的,但是老板说用这个不行,要用nginx请求转发,转发内网地址到某个域名 2.但是我改成了指定域名后失败,因为我没有配置nginx.conf 3.接下来一起学习下,怎么在ngin…

华硕电脑怎么录屏?华硕电脑录屏功能在哪?简单实用教程来了

​有很多小伙伴对如何录制华硕电脑的屏幕知识和信息知之甚少。现在大家都想多了解一些关于华硕电脑怎么录屏的相关知识和信息。所以今天小编收集了一些关于如何录制华硕电脑屏幕的知识和信息,与大家分享。 华硕电脑怎么录屏方法一:使用Windows自带的录屏…

day45 PHP反序列化POP链构造魔术方法原生类

前言 #知识点: 1、什么是反序列化操作?-格式转换 2、为什么会出现安全漏洞?-魔术方法 3、反序列化漏洞如何发现? -对象逻辑 4、反序列化漏洞如何利用?-POP链构造 补充:反序列化利用大概分类三类 -魔…

重磅来袭!共600页,又一分牛逼的Python文档面世!

前言 本文是为了帮大家快速学习 Python 中知识点,这套资料涵盖了诸多学习内容:面试题,教材视频,实战资料,电子书籍。 相信可以帮助大家在最短的时间内,能达到事半功倍效果,用来复习也是非常不…

150行代码写个低配版WPS?:手把手教你实现+附完整源码

前言:通过一个简单实例来实现Java的GUI编程,对于新手较为友好,且有一定的实用性,正在学习Java的同学看过来!!包教包会,如有疑问欢迎私信询问! 目录 实例展示 一、GUI编程基本概念 …

java面向对象----抽象类 接口

目录 抽象类与抽象方法 概念 抽象类应用 接 口 概念 接口的特点: 接口应用举例 Java 8中关于接口的改进 内部类 如何声明局部内部类 局部内部类的特点 匿名内部类 总结 抽象类与抽象方法 概念 随着继承层次中一个个新子类的定义,类变得越…

机器学习之多元线性回归

1、多元线性回归模型:定义:具有多个特征的线性回归模型 多元线性回归模型,见下图: 多元线性回归总结(参数、模型、损失函数、梯度下降算法)见下图:【注意:梯度下降算法每次都是同时…

Vue2中过滤器的用法详解

目录 一、过滤器的概念 二、过滤器的使用位置 三、过滤器的分类 1、全局过滤器 2、本地过滤器 四、过滤器应用实例 1、使用过滤器实现省略号 2、使用过滤器处理时间戳 五、Vue3中已废弃过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用。…

动态与静态获取元素

🌵知识点简介 静态获取(querySelectorAll)时,选出的所有元素的数组,不会随着文档操作而改变; 动态获取(getElementById)时,选出的所有元素的数组,会随着文档的…

Paddle 点灯人 之 Tensor

Paddle 点灯人 之 Tensor 文章目录Paddle 点灯人 之 TensorPaddle点灯人介绍Tensor介绍Pytorch和Paddle的相似之处创建张量Tensor图片/文本转TensorDataLoader不需要加ToTensorPaddle中的 Tensor 的属性形状 shape数据类型(dtype)Tensor 的设备位置&…

高压放大器驱动压电器件工作原理

高压放大器在实际应用中经常会进行电容性负载驱动,对压电器件进行驱动,那么工作原理是什么呢,下面就请安泰电子来为我们讲解一下。 高压放大器是提高信号电压的装置,当负载是谐振电路或者耦合电路的时候,要求特定频率范…

Mybatis源码解析(十):一级缓存和二级缓存

Mybatis源码系列文章 手写源码(了解源码整体流程及重要组件) Mybatis源码解析(一):环境搭建 Mybatis源码解析(二):全局配置文件的解析 Mybatis源码解析(三):映射配置文件的解析 Mybatis源码解析(四):s…

转行学python?到底值不值

大学毕业后相当迷茫,不知道做些什么,于是跟着潮流去学了python,当年2w多买的python教程,三个月的时间成功上岸,现在用不着了,文末有领取方式。 面对当前情况,让众多职场人开始紧张,…