当前位置: 首页 > news >正文

【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.lryc.cn/news/156597.html

相关文章:

  • Python 编程竟然如此幽默!揭秘程序员们的搞笑日常,快来看看吧!
  • Linux c++开发-03-使用CMake组织工程
  • 【C++】函数重载 ④ ( 函数指针定义的三种方式 | 直接定义函数指针 | 通过 函数类型 定义 函数指针 | 通过 函数指针类型 定义 函数指针 )
  • 异常-java
  • 软件测试/测试开发丨Selenium Web自动化测试 高级控件交互方法
  • 深入Go语言:进阶指南
  • FOXBORO FBM232 P0926GW 自动化控制模块
  • 【C# Programming】编程入门:方法和参数
  • 【报错】 Cannot create property ‘showColumn‘ on number ‘-1‘
  • C++容器string的运用和注意
  • 用对工具,你的全渠道电子商务业务就成功了一半
  • TDengine学习(1):采集量(Metric),标签(label),数据采集点,表,超级表,子表、库
  • 【洛谷 P1029】[NOIP2001 普及组] 最大公约数和最小公倍数问题 题解(辗转相除法)
  • Golang 中的 errors 包详解:返回自定义 error 类型
  • C#开发的OpenRA游戏之信标按钮
  • 16字节协议的串口通信
  • 升哲科技城市级“算力+数字底座”服务亮相2023服贸会
  • 动态规划之简单多状态
  • 跨数据中心Multi-Fabric解决方案:L2和L3网络的高效连接和扩展
  • upload-labs靶场通关详解
  • Leetcode刷题笔记--Hot41-50
  • 「MySQL-02」数据库的操纵、备份、还原和编码规则
  • Effective C++条款24——若所有参数皆需类型转换,请为此采用non-member涵数(设计与声明)
  • 决策工具箱:战略分析必备工具与框架
  • 【压力测试指南】没有任何文档,小白也可以做的压力测试
  • Linux: memory: memblock: debug
  • 搬家快递服务小程序的便利性
  • 软件架构师 Debugging
  • ​7.1 项目1 学生通讯录管理:文本文件增删改查(C++版本)(自顶向下设计+断点调试) (A)​
  • 学习使用php判断阿里云oss图片单图或批量上传、查询图片文件是否存在