前端JavaScript篇之对this对象的理解

目录

  • 对this对象的理解
    • 1. 函数调用模式:
    • 2. 方法调用模式:
    • 3. 构造器调用模式:
    • 4. apply、call和bind调用模式:


对this对象的理解

在JavaScript中,this关键字是一个非常重要的概念,它用于指向当前执行上下文中的对象。具体来说,this的值是在函数调用时确定的,它的值取决于函数的调用方式。

在JavaScript中,this的指向可以通过四种调用模式来判断:

1. 函数调用模式:

当一个函数不是一个对象的属性时,直接作为函数来调用时,this指向全局对象(在浏览器中是window对象,在Node.js中是global对象)。例如:

function test() {console.log(this)
}test() // 输出全局对象,一般是window对象

请添加图片描述

2. 方法调用模式:

如果一个函数作为一个对象的方法来调用时,this指向这个对象。例如:

var obj = {name: 'Xin',sayName: function () {console.log(this.name)}
}obj.sayName() // 输出Xin

请添加图片描述

3. 构造器调用模式:

如果一个函数用new调用时,函数执行前会新创建一个对象,this指向这个新创建的对象。例如:

function Person(name) {this.name = name
}var person = new Person('Xin')
console.log(person.name) // 输出Xin

请添加图片描述

4. apply、call和bind调用模式:

这三个方法都可以显示的指定调用函数的this指向。其中apply方法接收两个参数:一个是this绑定的对象,一个是参数数组。call方法接收的参数,第一个是this绑定的对象,后面的其余参数是传入函数执行的参数。也就是说,在使用call()方法时,传递给函数的参数必须逐个列举出来。bind方法通过传入一个对象,返回一个this绑定了传入对象的新函数。这个函数的this指向除了使用new时会被改变,其他情况下都不会改变。例如:

function sayName() {console.log(this.name)
}var obj1 = {name: 'John'
}var obj2 = {name: 'Mike'
}sayName.call(obj1) // 输出John
sayName.call(obj2) // 输出Mikevar boundSayName = sayName.bind(obj1)
boundSayName() // 输出John

请添加图片描述

需要注意的是,在JavaScript中,函数嵌套时,this的指向可能会发生变化。在这种情况下,需要使用that或self等变量来保存正确的this指向。另外,在使用箭头函数时,this的指向与普通函数不同,它的值继承自外层函数的this值。

持续学习总结记录中,回顾一下上面的内容:
在JavaScript中,this关键字是一个非常重要的概念,它用于指向当前执行上下文中的对象。this的指向可以通过四种调用模式来判断。需要注意,在函数嵌套和使用箭头函数时,this的指向可能会发生变化。

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

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

相关文章

【CV论文精读】EarlyBird: Early-Fusion for Multi-View Tracking in the Bird’s Eye View

【CV论文精读】EarlyBird: Early-Fusion for Multi-View Tracking in the Bird’s Eye View 0.论文摘要 多视图聚合有望克服多目标检测和跟踪中的遮挡和漏检挑战。多视图检测和3D对象检测中的最新方法通过将所有视图投影到地平面并在鸟瞰视图(BEV)中执…

面试经典150题 -- 栈(总结)

总的链接 面试经典 150 题 - 学习计划 - 力扣(LeetCode)全球极客挚爱的技术成长平台 关于栈 -- stack 的学习链接 c的STL中的栈 -- stack-CSDN博客 20 . 有效的括号 这题直接用栈模拟就好了; 这里用一种取巧的方法 , 当遇见左括号,加入右…

JAVA设计模式之建造者模式详解

建造者模式 1 建造者模式介绍 建造者模式 (builder pattern), 也被称为生成器模式 , 是一种创建型设计模式. 定义: 将一个复杂对象的构建与表示分离,使得同样的构建过程可以创建不同的表示。 **建造者模式要解决的问题 ** 建造者模式可以将部件和其组装过程分开…

三丰云免费云服务器测评

三丰云是一家提供免费服务器和虚拟主机的服务商,它的目标是为学生和初创业者提供永久免费的云计算资源。但是,这种免费的服务是否值得使用呢?本文将从以下几个方面对三丰云免费云服务器进行评测: - 申请流程:要使用三丰…

Dynamo批量处理多个Revit文件?

Hello大家好!我是九哥~ 最近很多小伙伴都在咨询Dynamo如何批量处理多个Revit文件,之前写过一篇《Dynamo批量修改多文件项目基点参数》,利用的是后台打开Revit的方式,可以实现一些批量操作的功能。 但是这个方法,对于一…

vue-cil组件引用

这段子组件代码是一个使用Vue 3 及其新特性 <script setup> 语法糖、以及 Ant Design Vue 图标库的简单组件示例。它根据传入的prop icon 来决定渲染哪一个图标。 <template><DesktopOutlined v-if"icondesktop"/><HomeOutlined v-else-if&quo…

物理信息神经网络(PINN): 将物理知识融合到深度学习中

物理信息神经网络&#xff08;PINN&#xff09;: 将物理知识融合到深度学习中 物理信息神经网络&#xff08;PINN&#xff09;简介PINN的工作原理PINN模型如何利用物理法则指导模型训练1. 定义物理问题和相应的物理定律2. 构建神经网络3. 定义损失函数数据误差项 (Data-fidelit…

IoC原理

Spring框架的IOC是基于Java反射机制实现的&#xff0c;那具体怎么实现的&#xff0c;下面研究一下 反射 Java反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法…

32. 最长有效括号

Problem: 32. 最长有效括号 文章目录 思路解题方法复杂度Code 思路 给你一个只包含 ′ ( ′ ( ′(′ 和 ′ ) ′ ) ′)′ 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 我们可以使用动态规划的方法来解决这道题目。我们定义一个 …

Linux 命令行的世界 :1.什么是shell

shell 是一个程序&#xff0c;它接受从键盘输入的命令&#xff0c;然后把命令传递给操作系统去执行。几乎所有的 Linux 发行版都提供一个名为 bash 的来自GNU项目的 shell 程序。现在来启动终端仿真器吧&#xff0c;一旦它运行起来&#xff0c;我们应该看到一行像这样的文字&am…

(52)只出现一次的数字III

文章目录 每日一言题目解题思路代码结语 每日一言 十年磨一剑&#xff0c;风雨未曾阻挡;愿你乘风破浪&#xff0c;不负韶华时光。 题目 题目链接&#xff1a;只出现一次的数字 给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现…

面试经典:Java中list set map之间的区别

前言 大家好&#xff0c;我是chowley&#xff0c;最近正在复习Java集合&#xff0c;这次来总结一下list、set、map它们三个之间的区别。 1. List&#xff08;列表&#xff09; 定义&#xff1a; List是一种有序集合&#xff0c;允许存储重复元素&#xff0c;每个元素都有一…

多 split 窗口 in Gtkmm4

文章目录 效果预览实现概要源代码 效果预览 实现概要 使用Gtk::Paned虽然 Paned 只能装两个子控件, 但是我可以嵌套 paned1 装 box1 和 box2 paned2 装 paned1 和 box3 源代码 #include <gtkmm.h> class ExampleWindow : public Gtk::Window { public:ExampleWindow()…

大模型基础架构的变革:剖析Transformer的挑战者(下)

上一篇文章中&#xff0c;我们介绍了UniRepLKNet、StripedHyena、PanGu-π等有可能会替代Transformer的模型架构&#xff0c;这一篇文章我们将要介绍另外三个有可能会替代Transformer的模型架构&#xff0c;它们分别是StreamingLLM、SeTformer、Lightning Attention-2&#xff…

07 A B 从计数器到可控线性序列机

07. A.从计数器到可控线性序列机 让LED灯按照亮0.25秒。灭0.75秒的状态循环亮灭让LED灯按照亮0.25秒&#xff0c;灭0.5秒&#xff0c;亮0.75秒&#xff0c;灭1秒的状态循环亮灭让LED灯按照指定的亮灭模式亮灭&#xff0c;亮灭模式未知&#xff0c;由用户随即指定。以0.25秒为一…

高职单招怎么搜答案? #经验分享#微信#笔记

当今社会&#xff0c;随着信息技术的迅猛发展&#xff0c;大学生们在学习过程中面临着各种各样的困难和挑战。而在这些挑战中&#xff0c;面对繁重的作业和复杂的题目&#xff0c;大学生搜题软件应运而生 1.题老大 这是一个公众号 亿级数量题库&#xff0c;可截图搜题&#…

动态SQl简单创建

创建pojo实体类&#xff0c;使用lombok注解 package com.example.pojo;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.time.LocalDate; import java.time.LocalDateTime;Data NoArgsConstructor AllArgsConstructor pu…

Maven私服部署与JAR文件本地安装

Nexus3 是一个仓库管理器&#xff0c;它极大地简化了本地内部仓库的维护和外部仓库的访问。 平常我们在获取 maven 仓库资源的时候&#xff0c;都是从 maven 的官方&#xff08;或者国内的镜像&#xff09;获取。团队的多人员同样的依赖都要从远程获取一遍&#xff0c;从网络方…

【每日一题】LeetCode——反转链表

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

MySQL ——group by子句使用with rollup

group by 子句使用with rollup关键字之后&#xff0c;具有分组加和的功能。即&#xff1a;在所有的分组记录之后&#xff0c;自动新增一条记录&#xff0c;从全局计算所有记录的数据。 0 问题描述 求出每年的学生平均成绩&#xff0c;及历史至今的平均成绩&#xff0c;结果保留…