广州蓝景分享—「JavaScript」this关键字的五个重要事项

news2025/7/11 12:42:49

首先this 关键字是 JavaScript 中最令人困惑的部分之一,今天通过介绍有关它的五个重要事项来阐明其目的和用法。

在这里插入图片描述

1、它允许访问同一对象上的其他属性

在 JavaScript 中,函数可以是独立的单元,但它们也可以用作对象的值。

考虑下一个对象。

const obj = {
msg: 'Hi',
logMessage: function(){}
}

logMessage 属性存储一个函数,logMessage 是一种方法。

logMessage 函数如何访问同一对象上的其他成员?

这是这个伪参数变得有用的地方,它允许访问同一对象上的其他成员。

const obj = {
msg: 'Hi',
logMessage: function(){
console.log(this.msg);
}
}
obj.logMessage();
//'Hi'

在 logMessage 方法中,this 关键字用于访问同一对象的 msg 属性。

基本上,这就是在 JavaScript 中使用 this 关键字的原因,它允许访问其他拥有或继承的属性。

这种行为只有一个条件,函数应该作为方法调用,而不是作为函数调用。

2、它取决于函数的调用方式而不是函数的定义位置

考虑以下访问 this 参数的函数。

this.msg = "Parent";
function logMessage(){
console.log(this.msg);
}

在下一个示例中,对两个对象使用相同的函数。

const obj = {
msg: 'Hi',
logMessage
}
const newObj = {
msg: 'Hello',
logMessage
}

这个变量引用的对象是什么?

这取决于函数的调用方式,而不是函数的定义位置。

当 logMessage 作为 obj 对象上的方法调用时,它引用该对象。

obj.logMessage();
//'Hi'

当它作为 newObj 对象上的方法被调用时,它指向它。

newObj.logMessage();
//'Hello'

请考虑以下示例,其中 logMessage 属性存储在 obj 对象内定义的函数。

const obj = {
msg: 'Hi',
logMessage: function(){
console.log(this.msg);
}
}

logMessage 中的 this 参数是否总是引用 obj 对象,因为它是在该对象中定义的?

答案是,NO。

下面是调用 logMessage 并使用 call 方法传递由 this 参数引用的不同对象的示例。

const newObj = {
msg: 'Hello'
}
obj.logMessage.call(newObj);
//'Hello'

同样可以使用 apply 方法来完成,我们甚至可以强制它使用空对象运行,这次函数记录未定义。

obj.logMessage.apply({});
//undefined

3、与函数形式一起使用时,它指向其他东西

函数不一定是对象的一部分,它们可以是独立的单元,因此,可以用函数形式调用。

考虑下一个例子。

const obj = {
msg: 'Hi',
logMessage: function(){
console.log(this.msg);
}
}
const logMessage = obj.logMessage;
logMessage();
//undefined

logMessage 中的 this 不依赖于函数的定义位置,在这种情况下是在 obj 对象中。

这取决于如何调用 logMessage,在前面的示例中,logMessage 被调用为函数而不是方法。这指向了一些意想不到的东西,this.msg 给出了未定义的内容。

这是另一个例子。

const obj = {
msg: '',
logMessage: function(){
this.msg = 'Hi';
function logSomething(){
console.log(this.msg);
}
logSomething();
}
}
obj.logMessage();
//undefined

logMessage 作为方法调用(obj.logMessage()),但 logSomething 作为函数调用。因为 logSomething 不是作为方法调用,而是作为函数调用,所以,在其中 this 指向未例外的东西。在这种情况下,this.msg 给出未定义。

如果您希望 this 引用正确的对象,请确保始终将 logMessage 作为方法调用。

4 、箭头函数没有this

确实箭头函数没有自己的 this。它们实际上是用来解决我们之前在方法内部调用内部函数时遇到的问题。

检查下一个示例。

const obj = {
logMessage: function(){
const msg = 'Hi';
const logSomething = ()=>{
console.log(msg);
}
logSomething();
}
}
obj.logMessage();
//'Hi'

logSomething 是否将 msg 作为变量?不。

logSomething 在尝试访问它没有的变量时会发生什么?

它向下看它的父级元素来找到变量并使用它。

据说箭头函数没有自己的 this,它实际上是什么意思?

这意味着它看不起它的父级元素来找到变量并使用它。

看下面的例子。

const obj = {
msg: '',
logMessage: function(){
this.msg = 'Hi';
const logSomething = ()=>{
console.log(this.msg);
}
logSomething();
}
}
obj.logMessage();
//'Hi'

logSomething 没有这个参数,与从外部环境中使用的其他变量和参数一样,它向下查看链并在其父级中找到它并使用它。

logSomething 中的 this 与 logMessage 中的对象相同。

5、应用程序可以在不使用它的情况下编写

除非应用程序已经以这种方式编写,否则无需使用 this 关键字编写应用程序。

像 React Hooks、VueJs Composition API 和 Svelte 这样的 UI 框架允许在不使用 this 关键字的情况下编写组件。

我们可以使用闭包来编写封装对象,这是一个例子。

const obj = (function(){
let msg = '';
function logMessage(){
msg = 'Hi';
const logSomething = ()=>{
console.log(msg);
}
logSomething();
}
return {
logMessage
}
})();
obj.logMessage();
//'Hi'

logMessage 是在自执行函数内部定义的内部函数。logMessage 是一个闭包。它从外部函数引用 msg 变量。即使在自执行函数返回后,它也可以访问此变量。

现在它不关心我们是否将 logMessage 作为函数或作为方法调用,它总是引用正确的 msg 变量。

const logMessage = obj.logMessage;
logMessage();
//'Hi'

总结

如果您真的想使用 this 关键字,或者受限于应用程序内部已经做出的决定,请记住该函数应作为方法调用以指向正确的对象。如果真的不喜欢使用 this 关键字,您也可以考虑使用闭包实现对象并完全避免使用 this。以上就是今天所分享的知识点,希望对你有所帮助,可以点个赞,或者关注我们。

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

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

相关文章

SpringFramework:循环依赖与三级缓存

循环依赖与三级缓存 文章目录循环依赖与三级缓存一、Spring 中的循环依赖问题1. Spring 中的循环依赖概述2. Spring 中的循环依赖的 5 种场景二、Spring 三级缓存1. spring 创建 bean 的流程2. 场景一:单例的 setter 注入3. 三级缓存4. 关于二级缓存三、循环依赖的其…

ELFK——ELK结合filebeat日志分析系统(2)

目录 一、filebeat 二、ELFK 1.原理简介 2.在ELK基础上部署filebeat ​​​​​​ELK 企业级日志分析系统(1)_Evens7xxX的博客-CSDN博客 紧接上一期,这期会介绍ELK结合filebeat的部署和使用 一、filebeat Filebeat,轻量级的…

Word编辑论文,实现1.题目、摘要、关键词为通栏,正文为双栏 2.首页底端添加通栏脚注,在脚注中写作者简介,并使其实现悬挂对齐效果

Q1. 如何使题目、摘要、关键词为通栏,而下面开始的正文为双栏? 将光标移动到最后一个关键词后 布局—分隔符—分节符(连续) 将光标移动到正文第一个大标题前 布局—页面设置—文档网格—文字排列—栏数设置为 2,操作…

Python如何爬取免费爬虫ip

做过大数据抓取的程序员应该都知道,正常市面上的爬虫ip只分为两种,一种是API提取式的,还有一种是账密形式隧道模式的。往往因为高昂费用而止步。对于初学者觉得没有必要,我们知道每个卖爬虫ip的网站有的提供了免费IP,可…

基于CentOS使用宝塔+Nginx搭建个人小H站

本文目录前言第一步 - 购置服务器第二步 - 连接服务器第三步 - 安装宝塔第四步 - 部署网站总结前言 最近心血来潮,恰逢帅地老哥在公众号搞活动,白嫖了一台服务器,于是打算搭一个小网站玩玩。其实早有此念头,只是因为懒(●ˇ∀ˇ●…

项目实战——实现注册和登录模块

目录 一、整体框架 二、实现JwtToken验证 1、添加依赖 2、编写、修改相关类 三、实现后端 API 四、实现前端的登录,注册界面 ps:本篇文章篇幅较长,且难度有所提升,希望大家耐心看完,种一棵树最好的时间是十年前&…

ヾ(⌐ ■_■)— HTML-CSS常用属性

目 录 1.文字的设置 (1)文字的基本属性(font) (2)文字的排版以及添加文字的修饰 2.颜色的设置 3.背景的设置(background) 4.边框的相关设置 (1)边框样式的设置(border-style) (2)边框宽度的设置…

操作系统4小时速成:操作系统发展和分类,运行环境:运行机制和内核,用户态非特权,核心态特权,中断技术,访管指令

操作系统4小时速成:操作系统发展和分类,运行环境:运行机制和内核,用户态非特权,核心态特权,中断技术,访管指令 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂…

有趣的 Go HttpClient 超时机制

hello,大家好呀,我是既写 Java 又写 Go 的小楼,在写 Go 的过程中经常对比这两种语言的特性,踩了不少坑,也发现了不少有意思的地方,今天就来聊聊 Go 自带的 HttpClient 的超时机制。 Java HttpClient 超时底…

Ubuntu22.04中root用户下依然权限不够,执行不了可执行文件

文章目录先看现象解决方法什么情况下会遇到这样的错误先看现象 provider是一个C语言编译得到的可执行文件。 开始,我直接运行它,告诉我权限不够然后我加上sudo运行,告诉我找不到命令最后我进入root用户运行,竟然还告诉我权限不够…

PraNet: Parallel Reverse Attention Networkfor Polyp Segmentation

Tittle:用于息肉分割的并行反向注意力网络 摘要 准确的息肉分割主要面临着两个难点:1)相同类型的息肉有不同的大小,颜色和纹理。2)息肉与周围粘膜的边界模糊不清晰。 为了解决这些挑战本文提出了一种并行反向注意网络ParNet。具…

10、MySQL——子查询

目录 一、子查询 1、子查询出现的位置 2、子查询结果集的形式 二、实例演示 1、查询工资高于JONES的员工 1.1 分析 1.2 代码 2、查询与SCOTT同一部门的员工 2.1 分析 2.2 代码 3、工资高于30号部门所有人的员工信息 3.1 分析 3.2 代码 4、查询工作和工资…

mannose-OH|甘露糖-羟基|mannose-PEG-OH|甘露糖-聚乙二醇-羟基

mannose-OH|甘露糖-羟基|mannose-PEG-OH|甘露糖-聚乙二醇-羟基 羟基(oxhydryl)是一种常见的极性基团,化学式为-OH。羟基与水有某些相似的性质,羟基是典型的极性基团,与水可形成氢键,在无机化合物水溶液中以…

钙尔奇30周年以行动,力挺中国骨骼健康发展

启动行动力赋能新旅程 近日,2022年度西普会于中国海南博鳌盛大举行。以“构筑患者价值同心圆——二元发展驱动健康产业新增长”为主题,本届西普会的会议内容和参会主体全面升维,从全球视野到中国特色聚合优质资源、拓宽产业边界,…

vue项目中实际构建echarts拓扑关系图业务

vue项目中实际构建echarts拓扑关系图业务前言一、关系拓扑是什么?二、需求梳理三、封装关系图组件1.父组件引用2.测试数据引入3.封装关系子组件4.关系组件完整代码总结前言 由于现在echarts的利用率增强,需要用到拓扑图的设计,如果单纯针对e…

Ubuntu虚拟机安装

文章目录VMware添加虚拟机等待开机(需要一些时间安装系统)检查网络环境设置 Ubuntu 中文支持一些基础设置VMware添加虚拟机 文件——>新建虚拟机 下一步:安装程序光盘映像文件(iso) 设置主机名,用户名及…

reportportal 集成 robotframework 自动化执行及结果可视化

最近领导想了个需求,想把目前组内在linux平台上执行的自动化脚本搞成可视化,如果是web站点相关日志可视化倒是简单了,ELK就是不错的选择,大部分可视化项目这种的,可以做的开起来很炫。 我们这边是自己写的脚本&#x…

机器学习西瓜书-1-2章

学习目标: 概览机器学习西瓜书 1、2章 学习内容: 第一章 绪论 1.1 基本术语 1.2 假设空间 1.3 归纳偏好 1.4 发展历程 第二章 模型评估与选择 2.1 经验误差与过拟合 2.2 评估方法 2.3 性能度量 学习时间: 两天 学习产出: 第…

爱了爱了,20个好用到爆的 Python 函数

大家好,今天分享20个日常工作中必不可少的Python函数,这些函数平时看到的不多,但是它们使用起来倒是非常的方便,它们可以大幅度地提高工作效率。内容较长,欢迎收藏学习,喜欢点赞支持。 文章目录技术提升isi…

你以为的Java面试只是背答案?跳槽涨薪不还是得靠自己的技术

前言 Java面试当然不能只靠背答案,为了应付面试背完答案拿到offer只是进入了这个行业,后面的实操还是得看自己的技术!技术的挂钩当然和技术底层也是挂钩的。 这是我在工作、面试中学习并总结到的一些知识点,都是一些比较典型的、…