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

news2024/11/19 3:33:23

目录

  • 对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) // 输出Mike

var boundSayName = sayName.bind(obj1)
boundSayName() // 输出John

请添加图片描述

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

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

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

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

相关文章

数据可视化之维恩图 Venn diagram

文章目录 一、前言二、主要内容三、总结 🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、前言 维恩图(Venn diagram),也叫文氏图或韦恩图,是一种关系型图表,用于显示元素集合之间的重叠区…

Linux系统基础 03 IP地址虚拟网络、Linux软件包管理、ssh服务、apache服务和samba服务的简单搭建

文章目录 一、IP地址虚拟网络二、Linux软件包管理1、rpm包管理器2、yum包管理器3、源码安装 三、ssh服务四、apache服务五、samba服务 一、IP地址虚拟网络 1、IP地址格式是点分十进制,例:172.16.45.10。即4段8位二进制 2、IP地址分为网络位和主机位。网…

腾讯云4核8g10M轻量服务器能承受多少人在线访问?

腾讯云轻量4核8G12M轻量应用服务器支持多少人同时在线?通用型-4核8G-180G-2000G,2000GB月流量,系统盘为180GB SSD盘,12M公网带宽,下载速度峰值为1536KB/s,即1.5M/秒,假设网站内页平均大小为60KB…

TCP 传输控制协议——详细

目录 1 TCP 1.1 TCP 最主要的特点 1.2 TCP 的连接 TCP 连接,IP 地址,套接字 1.3 可靠传输的工作原理 1.3.1 停止等待协议 (1)无差错情况 (2)出现差错 (3)确认丢失和确认迟到…

电商小程序05用户注册

目录 1 搭建页面2 设置默认跳转总结 我们上一篇拆解了登录功能,如果用户没有账号就需要注册了。本篇我们介绍一下注册功能的实现。 1 搭建页面 打开应用,点击左上角的新建页面 输入页面的名称,用户注册 删掉网格布局,添加表单容…

知识图谱与图神经网络融合:构建智能应用的新前沿

目录 前言1 知识图谱表示学习1.1 典型模型1.2 下游任务 2 图神经网络与知识图谱表示学习2.1 Compgcn:合成图卷积模型2.2 知识图谱嵌入在归纳设置下的推进 3 图神经网络与知识图谱构建3.1 关系抽取的进阶应用3.2 结构信息补全与知识图谱的完整性 4 图神经网络与知识图…

栈和队列(Stack、Queue)

目录 前言: 栈: 栈的方法: 栈的源码: 队列: Queue和Deque接口: 队列的一些方法: Queue源码: 双端队列: 总结: 前言: 栈其实就是吃了吐…

vue3初识

目录 一、前言二、主观感受三、vue3初探 原文以及该系列教程文章后续可点击这里查看:vue初识 一、前言 Vue.js是一款流行的前端框架,最初由尤雨溪(Evan You)于2014年创建,非常的年轻。官网为vue3, 但要注…

七、热身仪式(Warm-Up Rituals)

5.Warm Up Rituals 五、热身仪式 A warm up ritual is your per flight checklist you go through before you start focusing for a big session.It may be checking that you have water, that you don’t need to use the bathroom, that your phone is turned off or you’…

【C++跬步积累】—— 构造函数+析构函数

🌏博客主页:PH_modest的博客主页 🚩当前专栏:C跬步积累 💌其他专栏: 🔴 每日一题 🟡 每日反刍 🟢 C语言跬步积累 🌈座右铭:广积粮,缓称…

【十二】【C++】vector用法的探究

vector类创建对象 /*vector类创建对象*/ #if 1 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std; #include <vector> #include <algorithm> #include <crtdbg.h>class Date {public:Date(int year 1900, int month 1, int …

Compose之Slider全面解析

JetPack Compose系列&#xff08;14&#xff09;—Slider Slider&#xff0c;即拖动条&#xff0c;默认包含了一个滑块和一个滑动轨道。允许用户在一个数值范围内进行选择。 按照惯例&#xff0c;先观察其构造函数&#xff1a; Composable fun Slider(value: Float,onValueCh…

#Z0463. 巡逻1

Description 在一个地区中有 n 个村庄&#xff0c;编号为 1, 2, ..., n。有 n – 1 条道路连接着这些村 庄&#xff0c;每条道路刚好连接两个村庄&#xff0c;从任何一个村庄&#xff0c;都可以通过这些道路到达其 他任一个村庄。每条道路的长度均为 1 个单位。 为保证该地区的…

了解数据治理体系化建模

目录 一、走近数据体系化建模 &#xff08;一&#xff09;软件体系化建模 &#xff08;二&#xff09;数据体系化建模 二、数据体系化建模实践 三、数据管理考量思考 &#xff08;一&#xff09;数据质量方面的考量 &#xff08;二&#xff09;数据安全、合规方面的考量…

攻防世界 CTF Web方向 引导模式-难度1 —— 11-20题 wp精讲

PHP2 题目描述: 暂无 根据dirsearch的结果&#xff0c;只有index.php存在&#xff0c;里面也什么都没有 index.phps存在源码泄露&#xff0c;访问index.phps 由获取的代码可知&#xff0c;需要url解码(urldecode )后验证id为admin则通过 网页工具不能直接对字母进行url编码 …

CSS 2D转换 3D动画 3D转换

目录 2D转换(transform): 移动translate: 旋转rotate: 缩放scale&#xff1a; CSS3动画&#xff08;transform&#xff09;&#xff1a; 动画常用的属性&#xff1a; 将长图片利用盒子实现动画的效果&#xff1a; 3D转换&#xff1a; 透视perspective&#xff1a; 旋转r…

【动态规划】【字符串】1092. 最短公共超序列

作者推荐 【动态规划】【前缀和】【C算法】LCP 57. 打地鼠 本文涉及知识点 动态规划汇总 LeetCode1092最短公共超序列 给你两个字符串 str1 和 str2&#xff0c;返回同时以 str1 和 str2 作为 子序列 的最短字符串。如果答案不止一个&#xff0c;则可以返回满足条件的 任意…

C++数据类型、变量常量

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家新年快乐&#xff0c;今天我们来学习C的数据类型&#xff0c;变量常量。 文章目录 1.数据类型的概念与思想 1.1基本数据类型 1.2复合数据类型 1.3类型修饰符 1.4类型转换 1.4.1static_cast 1.4.2…

【机器学习】数据清洗之处理缺失点

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步…

腾讯云4核8G服务器最大能承载多少用户在线?12M带宽

腾讯云轻量4核8G12M轻量应用服务器支持多少人同时在线&#xff1f;通用型-4核8G-180G-2000G&#xff0c;2000GB月流量&#xff0c;系统盘为180GB SSD盘&#xff0c;12M公网带宽&#xff0c;下载速度峰值为1536KB/s&#xff0c;即1.5M/秒&#xff0c;假设网站内页平均大小为60KB…