【ES6】Class中this指向

先上代码:
正常运行的代码:

class Logger{printName(name = 'kexuexiong'){this.print(`hello ${name}`);}print(text){console.log(text);}
}const logger = new Logger();
logger.printName("kexueixong xiong");

输出:
在这里插入图片描述
单独调用函数printName:

class Logger{printName(name = 'kexuexiong'){this.print(`hello ${name}`);}print(text){console.log(text);}
}const logger = new Logger();const {printName} = logger;printName("kexueixong xiong");

输出:
在这里插入图片描述
debugger调试一下,看看什么情况,调试代码:

 
class Logger{printName(name = 'kexuexiong'){this.print(`hello ${name}`);}print(text){console.log(text);}
}const logger = new Logger();const {printName} = logger;debugger;printName("kexueixong xiong");

调试界面,this显示undefined,在单独调用时,this的指向是undefined。在单独调用的场景下,要如何才能解决该问题呢?下面给出两种种比较简单的解决方法。
在这里插入图片描述

1、在构造方法中绑定this,这样就不会找不到print方法了
    class Logger {constructor() {this.printName = this.printName.bind(this);//bind函数绑定this对象}printName(name = 'kexuexiong') {debugger;this.print(`hello ${name}`);}print(text) {console.log(text);}}const logger = new Logger();const { printName } = logger;printName("kexueixong xiong");

调试界面,显示绑定了this。
在这里插入图片描述
输出:
在这里插入图片描述

2、解决方法是使用箭头函数

因为箭头函数有固话this的作用。

  class Logger {constructor() {this.printName = this.printName.bind(this);//bind函数绑定this对象}//使用箭头函数固化thisprintName =(name = 'kexuexiong') => {debugger;this.print(`hello ${name}`);};print(text) {console.log(text);}}const logger = new Logger();const { printName } = logger;printName("kexueixong xiong");

调试界面:
在这里插入图片描述
输出:
在这里插入图片描述

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

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

相关文章

电脑怎么设置定时关机,2个简单的操作

电脑作为现代生活中不可或缺的工具,我们通常会在工作或娱乐过程中使用它。但有时候,我们可能需要在一段时间后自动关机,例如在下载完成后或在睡觉前。那么电脑怎么设置定时关机呢?为了满足这种需求,电脑提供了多种定时…

Dom-clobbering原理和例题

目录 引入 1.获取标签 2.覆盖 3.多层覆盖 利用Dom-clobbering 1.tostring 2.集合取值 3.层级关系取值 4.三层取值 5.自定义属性 例题 1 2. 3. 引入 分析 引入 先用三个小例子看看dom-clobbering干了什么 1.获取标签 这个例子给img标签分别做了一个id和一个name…

博弈论基础

简单记录一下博弈论的知识。 博弈的分类: 关键词:正则博弈、扩展博弈、第三类博弈。 市场进入和阻挠博弈: 不完美博弈和不完全博弈: 混合策略和纯策略:

Docker安装部署ElasticSearch(ES)

文章目录 安装前准备创建挂载目录授权相关权限创建elasticsearch.yml文件 拉取镜像运行容器查看运行情况测试 安装前准备 创建挂载目录 用于在宿主机挂载日志,数据等内容 创建/opt/es/data目录 创建/opt/es/logs目录 创建/opt/es/plugins目录 创建/opt/es/conf目录…

docker 安装rabbitmq

前提:安装好docker docker安装_Steven-Russell的博客-CSDN博客 centos7安装docker_centos7 docker 安装软件_Steven-Russell的博客-CSDN博客 1、启动docker systemctl start docker 2、下载镜像 // 可以先search查询一下可用镜像,此处直接下载最新版本…

C#,《小白学程序》第十一课:双向链表(Linked-List)其二,链表的插入与删除的方法(函数)与代码

1 文本格式 /// <summary> /// 改进的车站信息类 class /// 增加了 链表 需要的两个属性 Last Next /// </summary> public class StationAdvanced { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; ///…

java八股文面试[数据库]——mysql主从复制

什么是mysql的主从复制&#xff1f; MySQL 主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点。MySQL 默认采用异步复制方式&#xff0c;这样从节点不用一直访问主服务器来更新自己的数据&#xff0c;数据的更新可以在远程连接上进行&#xff0c;从节点…

《Python魔法大冒险》005 魔法挑战:自我介绍机器人

魔法师和小鱼坐在图书馆的一扇窗户旁&#xff0c;窗外的星空闪烁着神秘的光芒。魔法师轻轻地拍了拍小鱼的肩膀。 魔法师&#xff1a; 小鱼&#xff0c;你已经学会了编写简单的魔法程序&#xff0c;现在我要教你如何创造一个有自己思想的机器人&#xff0c;让它能够和我们一样&…

联合教育部高等学校科学研究发展中心,阿依瓦科技创新教育专项正式发布!

7 月 24 日&#xff0c;教育部科技发展中心官网发布了《中国高校产学研创新基金&#xff0d;阿依瓦科技创新教育专项申请指南》。 针对高校在人工智能、智能制造、智慧校园、大数据等领域科研和教研的创新研究&#xff0c;教育部高等学校科学研究发展中心与阿依瓦(北京)技术有…

c++ vs2019 cpp20 规范,set源码分析

&#xff08;1&#xff09;set模板和map模板都是继承于一个父类 所以没有再详细注释。维持红黑树主要的功能都在父类_Tree里了&#xff0c;比如节点的添加&#xff0c;删除&#xff0c;查找。父类红黑树的操作&#xff0c;并不依赖于特定的数据类型。做到了父类模板的通用性。…

Linux命令之用户管理(详解)

Linux命令之用户管理 常用基础命令修改root密码切换用户身份改变当前目录查看命令的用法查看命令之ls 用户管理用户的创建adduser创建useradd创建两种方式的区别 用户删除用户密码重置查看当前所有用户 在介绍Linux用户管理相关的命令之前&#xff0c;我们先介绍一些Linux的一些…

低压配电室电力安全解决方案

低压电气安全监控运维系统是力安科技基于物联网核心技术自主开发的高可靠性安全监测系统。其工作原理是利用物联网、云计算、大数据、数字传感技术及RFID无线射频识别技术来获取低压配电回路电压、电流、温度、有功、无功、功率因数等全电量的采集及配电线路的漏电、温度的实时…

实训笔记8.29

实训笔记8.29 8.29笔记一、《白龙马电商用户行为日志分析平台》项目概述--大数据离线项目1.1 项目的预备知识1.1.1 电商平台1.1.2 用户行为数据1.1.3 常见的软件/网站的组成和技术实现1.1.4 大数据中数据计算场景 1.2 项目的开发背景和开发意义1.3 项目的开发流程和技术选项1.4…

OpenCV(二十):图像卷积

1.图像卷积原理 图像卷积是一种在图像上应用卷积核的操作。卷积核是一个小的窗口矩阵&#xff0c;它通过在图像上滑动并与图像的像素进行逐元素相乘&#xff0c;然后求和来计算新图像中每个像素的值。通过滑动卷积核并在图像上进行逐像素运算&#xff0c;可以实现一系列图像处理…

在公网上使用SSH远程连接安卓手机Termux:将Android手机变身为远程服务器

文章目录 前言1.安装ssh2.安装cpolar内网穿透3.远程ssh连接配置4.公网远程连接5.固定远程连接地址 前言 使用安卓机跑东西的时候&#xff0c;屏幕太小&#xff0c;有时候操作不习惯。不过我们可以开启ssh&#xff0c;使用电脑PC端SSH远程连接手机termux。 本次教程主要实现在…

计算机网络的故事——简单的HTTP协议

简单的HTTP协议 文章目录 简单的HTTP协议一、简单的HTTP协议 一、简单的HTTP协议 HTTP是不保存状态的协议&#xff0c;为了实现保存状态功能于是引入了Cookie技术。 method: get:获取资源 post:传输实体主体 put:传输文件 head:获取报文首部&#xff0c;用于确认URI的有效性以…

百度低质量站点怎么办?解决百度低质量站点的方法和工具

百度低质量站点怎么恢复&#xff1f;这是许多网站主和运营人员在SEO优化过程中经常面临的一个问题。百度作为中国最大的搜索引擎&#xff0c;对于网站收录和排名具有至关重要的影响。然而&#xff0c;由于各种原因&#xff0c;有些网站可能面临被百度降权或收录减少的情况。那么…

微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽

微信小程序文档 - slots介绍 由上述文档看俩来&#xff0c;微信小程序官方并没有提及动态插槽内容。 uniapp文档 - slots介绍 uni官方也未提及关于动态插槽的内容 在实际使用中&#xff0c;直接通过 <<slot :name"item.xxx" /> 这种形式会报错&#xff…

QProcess 调用 ffmpeg来处理音频

项目场景&#xff1a; 在文章 qt 实现音视频的分贝检测系统中&#xff0c;实现的是边播放变解析音频数据来统计音频的分贝大小&#xff0c;并不满足实际项目的需求&#xff0c;有的视频声音正常&#xff0c;有的视频声音就偏低&#xff0c;即使放到最大音量声音也是比较小&…

SpringMVC的工作流程及入门

目录 一、概述 ( 1 ) 是什么 ( 2 ) 作用 二、工作流程 ( 1 ) 流程 ( 2 ) 步骤 三、入门实例 ( 1 ) 入门实例 ( 2 ) 静态资源处理 给我们带来的收获 一、概述 ( 1 ) 是什么 SpringMVC是一个基于Java的Web应用开发框架&#xff0c;它是Spring Framework的一部…