5分钟懂一个前端知识点系列之this关键字

前言

本人在学习this和原型(特别是this指向)的时候遇到了些许困惑,今天跟大家详细解释一下我在学习路上对this和原型的了解。难点先来攻克,今天先来讲讲this。这里统一声明不讨论严格模式下面的使用,因为我也不了解不能误导大家!

this

this 关键字在JavaScript中主要用于指代当前函数执行时的上下文对象,即函数内部的一个特殊变量,它指向函数调用时所属的对象。如果不太清楚函数上下文对象的可以看我的5分钟系列的其他文章,里面有讲解函数执行的上下文对象是个啥,存储的是什么内容,这里就不过多描述。

this 关键字是一个非常重要且有时可能引起混淆的概念。它的值取决于函数调用的上下文,即函数是如何被调用的,而不是函数在哪里被定义

普通函数this指向
  • 普通函数是不需要this对象的,因为仅仅只是使用函数并不需要知道函数执行的所属对象。所以一个普通函数是没有特定的this指向的,默认指向window全局对象
对象内部的this指向
  • 一个对象内部的this指向一般都是对象本身,当然也有例外
    看下面这段代码
    function Person(){function printThis(){console.log(this);}}var p1 =new Person().printThis;p1();

这里输出打印的this指向的是全局对象,因为这里的printThis函数是被当作一个普通函数调用了。普通函数调用this就是默认指向全局。

如何判断一个函数会被当成普通函数

如果一个函数不是作为某个对象的方法被调用,也没有使用.call(), .apply(), 或 .bind() 方法来改变this的绑定(这个可以暂时先不管),那么它被视为直接调用当作一个普通函数。

而上段代码创建了一个Person的实例,并尝试访问其printThis方法,但随后立即丢弃了新创建的实例,只保留了printThis函数的引用。当执行p1()时,printThis函数是以独立函数的形式被调用的,而非作为某个对象的方法调用。所以这里的printThis也被当做了普通函数。

如果回调函数是在全局上下文中定义的或者在非严格模式下被调用,且没有通过对象方法调用,那么this通常指向全局对象

箭头函数this指向

箭头函数不绑定自己的this,它会捕获其所在上下文的this值作为自己的this值,也就是词法作用域下的this

这意味着在箭头函数中,this的值是定义时所在的上下文决定的,而非调用时的上下文。这对于避免常规函数中常见的this混乱问题非常有帮助,尤其是在处理异步代码、回调函数或者在类的方法中。下面是一段实例代码

const obj = {normalFunc: function() {setTimeout(function() {console.log(this); // 这里的this通常指向全局对象(非严格模式)}, 1000);},arrowFunc: function() {setTimeout(() => {console.log(this); // 这里的this指向obj对象,因为箭头函数没有自己的this,它继承了外层的this}, 1000);}
};obj.normalFunc(); // 输出可能不是obj
obj.arrowFunc(); // 输出obj

测试

下面是有关的几道题目可以尝试做做。这里的答案都是在浏览器上执行,而非nodeJS因为两者全局对象有所不同。

function showName() { console.log(this.name); }// 这里的this指向哪里?输出什么?
var name = "全局"; 
showName(); 

答案解析: this指向全局对象(浏览器中是window,Node.js中是global)。

const obj = {name: "Object",showName: function() {console.log(this.name);// 这里this指向什么?输出什么?}
};obj.showName(); 

答案解析: 当函数作为对象的一个方法被调用时,this指向该对象。因此,这里this指向obj

function Person(name) {this.name = name;setTimeout(function() {console.log(this.name); // 这里this指向什么?输出什么?}, 1000);
}const person = new Person("Alice"); 

答案解析: 在setTimeout的回调函数中,如果没有特别处理,this通常会指向全局对象(非严格模式下),因为它是作为全局函数调用的。因此,这里的this.name可能不是预期的"Alice",而是全局对象的属性。但是,题目问的是new Person("Alice")中的this,这里this指向新创建的Person实例,即指向新创建的person对象。

function Person(name) { this.name = name; } 
Person.prototype.printName = function() { console.log(this.name); }; // 这里的this指向哪里?
const person = new Person("Bob"); 
person.printName(); //输出什么?

答案解析: 当通过实例调用原型链上的方法时,this指向该实例。因此,person.printName()中的this指向person实例,输出是"Bob"。

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

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

相关文章

ctfshow-web入门-爆破(web21-web24)

目录 1、web21 2、web22 3、web23 4、web24 1、web21 爆破什么的,都是基操 需要认证才能访问 随便输一个用户名和密码抓包看看: 多出来一个认证的头 Authorization: Basic YWRtaW46MTIzNDU2 base64 解码看看: 就是我们刚才输入的用于测…

C语言 | Leetcode C语言题解之第127题单词接龙

题目&#xff1a; 题解&#xff1a; struct Trie {int ch[27];int val; } trie[50001];int size, nodeNum;void insert(char* s, int num) {int sSize strlen(s), add 0;for (int i 0; i < sSize; i) {int x s[i] - ;if (trie[add].ch[x] 0) {trie[add].ch[x] size;m…

计算机系统结构之FORK和JOIN

程序语言中用FORK语句派生并行任务&#xff0c;用JOIN语句对多个并发任务汇合。 FORK语句的形式为FORK m&#xff0c;其中m为新领程开始的标号。 JOIN语句的形式为JOIN n&#xff0c;其中n为并发进程的个数。 例1&#xff1a;给定算术表达式ZEA*B*C/DF经并行编译得到如下程序…

刘强东的简历很拉风!

正式宣布&#xff1a;GPT 4o 在国内直接使用 ~ 来看一下江湖人称“东哥”刘强东的简历&#xff0c;大佬确实很拉风&#xff1a; 刘强东&#xff0c;京东的创始人&#xff0c;是中国互联网行业的传奇人物。他的故事充满了奋斗和创新&#xff0c;以下是我对他简历的一些看法&…

spring中处理跨域的3种方案

前言 跨域是指一个域下的文件想要和另一个域下的资源发生HTTP通信时,浏览器出于安全限制所引发的问题。如果协议、子域名、主域名、端口有任何一个不同,都会出现跨域问题。 举个例子,如果一个网页来自https://www.example.com,那么它只能访问同域下的资源,如https://www.exam…

元组的常用操作小结

元组的常用操作小结 元组&#xff08;Tuple&#xff09;是一种不可变的容器&#xff0c;可以存储多个值。下面是元组的常用操作和示例&#xff1a; 创建元组 # 创建一个简单的元组 my_tuple (apple, banana, cherry)print(my_tuple) # 输出&#xff1a;(apple, banana, ch…

GPG简介

简介 The GNU Privacy Guard GnuPG 是 RFC4880 定义的 OpenPGP 标准&#xff08;也称为 PGP&#xff09;的完整且免费的实现。GnuPG 允许您加密和签署您的数据和通信;它具有多功能的密钥管理系统&#xff0c;以及用于各种公钥目录的访问模块。GnuPG&#xff0c;也称为 GPG&…

Vitis HLS 学习笔记--HLS流水线类型

目录 1. 简介 2. 优缺点对比 2.1 Stalled Pipeline 2.2 Free-Running/Flushable Pipeline 2.3 Flushable Pipeline 3. 设置方法 4. FRP的特殊优势 5. 总结 1. 简介 Vitis HLS 会自动选择正确的流水线样式&#xff0c;用于流水打拍函数或循环。 停滞的流水线&#xff…

K8S SWCK SkyWalking全链路跟踪工具安装

官方参考&#xff1a;如何使用java探针注入器? 配置两个demo&#xff0c;建立调用关系&#xff0c; 首先创建一个基础镜像dockerfile from centos 先安装java 参考: linux rpm方式安装java JAVA_HOME/usr/java/jdk1.8.0-x64 CLASSPATH.:$JAVA_HOME/lib/tools.jar PATH…

了解Maven,并配置国内源

目录 1.了解Maven 1.1什么是Maven 1.2快速创建一个Maven项⽬ 1.3Maven 核⼼功能 1.3.1项⽬构建 1.3.2依赖管理 1.4Maven Help插件 2.Maven 仓库 2.1中央仓库 2.2本地仓库 3.Maven 设置国内源 1.查看配置⽂件的地址 2.配置国内源 3.设置新项⽬的setting 1.了解Ma…

Hive安装-内嵌模式

1.官网下在hive3.1.2版本 Index of /dist/hive/hive-3.1.2 2.上传到master节点的/opt/software目录下 3.解压到/opt/module目录下 tar -zxvf apache-hive-3.1.2-bin.tar.gz -C /opt/module/ 检查解压后文件 4.修改名字 改为hive cd /opt/module mv apache-hive-3.1.2-bin…

期权的时间价值是什么?和期权内在价值有啥不同?

今天带你了解期权的时间价值是什么&#xff1f;和期权内在价值有啥不同&#xff1f;期权的内在价值&#xff0c;是指期权立即执行产生的经济价值。 期权的时间价值是什么&#xff1f; 期权的时间价值是期权价格的一个重要组成部分&#xff0c;也被称为期权的外在价值。它是指期…

【再探】设计模式—备忘录模式与解释器模式

备忘录模式是用于保存对象在某个时刻的状态&#xff0c;来实现撤销操作。而解释器模式则是将文本按照定义的文法规则解析成对应的命令。 1 备忘录模式 需求&#xff1a;保存对象在某个时刻的状态&#xff0c;后面可以对该对象实行撤销操作。 1.1 备忘录模式介绍 提供一种状…

RK3568笔记二十九:RTMP推流

若该文为原创文章&#xff0c;转载请注明原文出处。 基于RK3568的RTMP推流测试&#xff0c;此代码是基于勇哥的github代码修改的&#xff0c;源码地址MontaukLaw/3568_rknn_rtmp: rk3568的推理推流 (github.com) 感兴趣的可以clone下来测试。 也可以下载修改后的代码测试。Y…

【面试宝藏】Go并发编程面试题

深入Go语言并发编程 Go语言以其简洁、高效的并发处理能力而闻名。在Go中&#xff0c;通过各种同步机制和原子操作&#xff0c;可以轻松地实现高性能并发编程。本文将深入探讨Go语言中的并发编程&#xff0c;包括Mutex、RWMutex、Cond、WaitGroup、原子操作等内容。 1. Mutex几…

普华永道信任危机:上市公司解约风波与反思

在全球会计业界的星空中&#xff0c;普华永道无疑是那颗最为耀眼的星之一。然而&#xff0c;近日这颗星却遭遇了前所未有的信任危机。这家大名鼎鼎的四大会计师事务所之一&#xff0c;近期陷入了上市公司解约的风波之中&#xff0c;其声誉与地位正面临严峻挑战。 就在昨晚&…

没有WebSecurityConfigurerAdapter的Spring Security

没有WebSecurityConfigurerAdapter的Spring Security 最近一直在从springboot2.x向3.x学习迁移&#xff0c;付出了很大的学习成本&#xff0c;心得会不断分享。对于spring security来说&#xff0c;是该和WebSecurityConfigurerAdapter说再见了&#xff0c;因为在Spring Secur…

Vivado的两种下载安装方式:Webpack下载与安装、本地文件安装详细步骤讲解

目录 1.前言2. Vivado Webpack下载、安装3.本地文件下载安装 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 本人自本科大二开始接触FPGA相关知识&#xff0c;现已将近六年&#xff0c;由于一直在上学&#xff0c;也不是一直在搞FPGA&#xff0c;但是也完成过一些项目…

【学习】企业如何选择一个合适的DCMM咨询机构

DCMM是我国首个数据管理领域正式发布的国家标准。旨在帮助企业利用先进的数据管理理念和方法&#xff0c;建立和评价自身数据管理能力&#xff0c;持续完善数据管理组织、程序和制度&#xff0c;充分发挥数据在促进企业向信息化、数字化、智能化发展方面的价值。该标准借鉴了国…

数据仓库核心:维度表设计的艺术与实践

文章目录 1. 引言1.1基本概念1.2 维度表定义 2. 设计方法2.1 选择或新建维度2.2 确定维度主维表2.3 确定相关维表2.14 确定维度属性 3. 维度的层次结构3.1 举个例子3.2 什么是数据钻取&#xff1f;3.3 常见的维度层次结构 4. 高级维度策略4.1 维度整合维度整合&#xff1a;构建…