【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.mzph.cn/news/75176.shtml

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

相关文章

【Java基础】学习笔记5 - 包装类与集合介绍

目录 第四阶段包装类StringStringBufferArraysSystemCollectionArrayListVector 第四阶段 包装类 装箱拆箱以及手动自动 package chapter4;public class Pack {public static void main(String[] args) {// 自动装箱int a 100;Integer aa a;// 自动拆箱int b aa;// 手动装…

搭建自己的OCR服务,第二步:PaddleOCR环境安装

PaddleOCR环境安装,遇到了很多问题,根据系统不同问题也不同,不要盲目看别人的教程,有的教程也过时了,根据实际情况自己调整。 我这边目前是使用windows 10系统CPU python 3.7 搭建。 熟悉OCR的人应该知道&#xff0…

合宙Air724UG LuatOS-Air LVGL API控件-标签 (Label)

标签 (Label) 标签是 LVGL 用来显示文字的控件。 示例代码 label lvgl.label_create(lvgl.scr_act(), nil) lvgl.label_set_recolor(label, true) lvgl.label_set_text(label, "#0000ff Re-color# #ff00ff words# #ff0000 of\n# align the lines …

时间管理类书籍阅读笔记

背景 这段时间看了时间管理方面的书籍,大部分和早晨时间利用相关。之所以有了利用早晨时间的想法,是某天下班后,感觉很疲惫,什么都不想做,于是就打了一晚上游戏,然后第二天重复着这样的生活。 突然意识到…

基于Spring、SpringMVC、Mybatis的超市管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的超市订单管理系统,java项目。 …

微信小程序替换双重循环渲染中报错图片

当微信小程序中的图片加载失败导致报错时&#xff0c;你可以通过以下步骤替换报错图片&#xff1a; 确保你有一个用于替换报错图片的备用图片&#xff0c;可以是与原始图片相同尺寸和格式的另一张图片。 在相关的.wxml文件中&#xff0c;找到显示报错图片的 <image> 标签…

AWK语言第二版 2.2选择

2.2 选择 Awk的基本结构组成&#xff0c;就是用一系列的样式选择出感兴趣的行&#xff0c;并对其进行操作。这样的程序很多都是一次性的&#xff0c;敲出来之后就用几次。然而&#xff0c;有些程序很有用&#xff0c;如果每次用之前都要重新敲一遍代码&#xff0c;就太麻烦了&…

Linux修改fs.inotify.max_user_watches(“外部文件更改同步可能很慢”和“当前的 inotify(7) 监视限制太低”)

fs.inotify.max_user_watches 参数是用于控制 Linux 内核中 inotify 子系统的观察者数量限制。inotify 是一种文件系统监控机制&#xff0c;它可以用于检测文件或目录的变化&#xff0c;并在事件发生时通知相关的应用程序。 具体而言&#xff0c;fs.inotify.max_user_watches …

B站:AB test [下]

Focus在&#xff1a;AB Test结束后&#xff0c;如何进行显著性检验&#xff1f;&#xff08;以判断改动是否有效果&#xff09; 引入&#xff1a;Z检验和T检验 而T检验适用于 n<30 的小样本 值得注意的是&#xff1a;统计上显著并不意味着现实中显著&#xff01; e.g. 加速…

尚硅谷大数据项目《在线教育之离线数仓》笔记008

视频地址&#xff1a;尚硅谷大数据项目《在线教育之离线数仓》_哔哩哔哩_bilibili 目录 P123 P124 P125 P126 P127 P128 P129 P123 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接各种数据源&#xff0c;包括很多现代的大数…

设计模式的六大设计原则

一、单一职责原则 一个类只负责一个单一明确的职责。如果一个类同时负责多个职责&#xff0c;来自职责A的需求变更引起的修改可能会导致职责B的功能发生故障。 比如说一个类T原本是符合单一职责的&#xff0c;后来因为某种原因或者是需求变更了&#xff0c;需要将职责P细分为…

医院空调冷热源设计方案VR元宇宙模拟演练的独特之处

作为一个备受关注的技术-元宇宙&#xff0c;毋庸置疑的是&#xff0c;因为建筑本身契合了时尚、前卫、高端、虚拟、科幻、泛在、协作、互通等元素特征&#xff0c;因此在建筑行业更需要元宇宙&#xff0c;以居民建筑环境冷热源设计来说&#xff0c;元宇宙会打破既定的现实阻碍和…

D1D2. Candy Party

d1的题意是有n个人每个人都有一定的糖果&#xff0c;同时每个人必须给其他人一次糖果和接收其他人给他的一次糖果&#xff0c;同时给出的糖果和接收的数目都是2^x&#xff0c;最后确保每个人拥有的糖果数目一样 思路&#xff1a;我们可以先由平均数算出每个人最终要拥有的糖果…

LVS NAT模式负载均衡群集部署

目录 1 群集(集群) cluster 1.1 群集的类型 2 LVS的工作模式及其工作过程 2.1 NAT模式&#xff08;VS-NAT&#xff09; 2.2 直接路由模式&#xff08;VS-DR&#xff09; 2.3 IP隧道模式&#xff08;VS-TUN&#xff09; 3 LVS-NAt 模式配置步骤 3.1 部署共享存储 3.2 配…

SSL证书验签时要带www吗?

单域名证书&#xff1a;顶级域名如www.abc.com或abc.com 不管你提交订单的时候填写的域名是带www或不带www的域名&#xff0c;签发的证书均支持www和不带www的域名 单域名证书&#xff1a;子域名如mail.abc.com&#xff0c;签发的证书仅支持mail.abc.com 通配符证书&#xff…

MySQL触发器使用指南大全

一、介绍 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前或之后&#xff0c;触发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&#xff0c;数据校验等操作。 使用别名OLD和NEW来引…

工程管理系统简介 工程管理系统源码 java工程管理系统 工程管理系统功能设计

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…

C++之生成key-value键值三种方式(一百九十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Linux命令(77)之curl

linux命令之curl 1.curl介绍 linux命令之curl是一款强大的http命令行工具&#xff0c;它支持文件的上传和下载&#xff0c;是综合传输工具。 2.curl用法 curl [参数] [url] curl参数 参数说明-C断点续传-o <filename>把输出写到filename文件中-x在给定的端口上使用HT…

Web server failed to start. Port 8080 was already in use.之解决方法

问题&#xff1a; Web server failed to start. Port 8080 was already in use&#xff0c;这句错误描述意思是当前程序的端口号8080被占用了&#xff0c;需要将占用该端口的程序停止掉才行&#xff1b;错误如图所示&#xff1a; 解决方法&#xff1a; 按住winr&#xff0c;输入…