ES6 关于Class类的继承 extends(2024-04-10)

1、简介

类Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多。

class Foo {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    console.log('父类构造函数')
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

class Baroo extends Foo {
  constructor(x, y, color) {
    this.color = color; // ReferenceError  super(x, y)之后才能使用子类this
    super(x, y); // 调用父类的constructor(x, y) 目的是新建子类实例
    this.color = color;
    console.log(x,y,color)
    console.log('子类构造函数')
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

let baroo = new Baroo(1,2,'#ffffff')  // 1,2,'#ffffff'
console.log(baroo)  //Baroo {x: 1, y: 2, color: '#ffffff'}
console.log(baroo.toString())  // #ffffff (1, 2)

上面示例中,constructor()方法和toString()方法内部,都出现了super关键字。super在这里表示父类的构造函数,用来新建一个父类的实例对象

ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。

注意,这意味着新建子类实例时,父类的构造函数必定会先运行一次。

上面示例中,子类 Bar 新建实例时,会输出 "父类构造函数","子类构造函数"。原因就是子类构造函数调用super()时,会执行一次父类构造函数(并在调用super()后才能使用子类的this,否则会报错)

// 如果子类没有定义constructor()方法,这个方法会默认添加,并且里面会调用super()。
// 也就是说,不管有没有显式定义,任何一个子类都有constructor()方法。

class ColorPoint extends Point {

}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

2、super关键字

super这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。

第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super()函数。

class Foo {}

class Boo extends Foo {
  constructor() {
    super();
  }
}

//子类B的构造函数之中的super(),代表调用父类的构造函数。这是必须的,否则报错

注意,这里的super虽然代表了父类的构造函数,但是因为返回的是子类的this(即子类的实例对象),所以super内部的this代表子类的实例,而不是父类的实例,这里的super()相当于A.prototype.constructor.call(this)(在子类的this上运行父类的构造函数)。

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

上面示例中,new.target指向当前正在执行的函数。可以看到,在super()执行时(new B()),它指向的是子类B的构造函数,而不是父类A的构造函数。也就是说,super()内部的this指向的是B

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis 等类似的 XML 映射文件中,当传入的参数为空字符串时,<if> 标签可能会导致 SQL 语句中的条件判断出现意外结果。

问题 传入的参数为空字符串,但还是根据参数查询了。 原因 在 XML 中使用 标签进行条件判断时,需要明确理解其行为。在 MyBatis 等类似的 XML 映射文件中, 标签通常用于动态拼接 SQL 语句的条件部分。当传入的参数 riskLevel 为空字符串时…

rebase和merge的区别

合并分支用rebase还是merge? 实际开发工作的时候,我们都是在自己的分支开发,然后将自己的分合并到主分支,那合并分支用2种操作,这2种操作有什么区别呢? git上新建一个项目,默认是有master分支…

如何在 YouTube、Medium、Twitter 和 Linkedin 上使用 ChatGPT 赚钱

人工智能SEO:未来内容优化的革命 介绍 在当今的数字时代,利用 ChatGPT 等人工智能工具已经成为在线内容创建和货币化领域的游戏规则改变者。 本指南探讨了如何在 YouTube、Medium、Twitter 和 Linkedin 等各种平台上有效使用 ChatGPT,不仅可以…

猫咪可以每天吃冻干吗?2024最全攻略这几款低调有实力

冻干猫粮近年来逐渐受到养猫人的青睐,其高品质的特性赢得了广大猫主人的认可。对于像我这样的养猫达人来说,早已尝试并认可了冻干喂养。但对于新手来说,他们可能会感到困惑:冻干到底是什么?猫咪可以每天吃冻干吗&#…

Canal的使用场景!!!

1、保持redis和mysql连接的一致性:通常使用延迟双删功能(具有弊端) 解决方案:可以使用canal监听数据库的变化(删改),一旦出现此类操作,立即删除redis中的对应数据,直至下…

【java工具-灵活拉取数据库表结构和数据】

需求: 假设我们现在有一个需求,需要快速拉取数据库的某些表建表语句,和数据,平时做备份之类; 我这边自己写了个工具,不多废话,也不整虚的, 直接看代码: package com.…

Elasticsearch8.x 设置密码

文章目录 一、环境说明二、使用elasticsearch-reset-password工具修改1、elasticsearch-reset-password工具位置2、设置密码 一、环境说明 elasticsearch版本:8.13.0 系统版本:Ubuntu 18.04.6 二、使用elasticsearch-reset-password工具修改 1、elast…

【汇编语言实战】求三个已知数最大值

C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int a10,b20,c15;//scanf("%d %d",&a,&b);if(a>b){if(a>c){printf("%d",c);}else{printf("%d",a);}}else{if(b>c){printf("%d",b);}else{pr…

Pinctrl子系统、GPIO子系统概念

Pinctrl概念&#xff1a; 无论是哪种芯片&#xff0c;都有类似图 16.1 的结构&#xff1a; 要想让 pinA 、 B 用于 GPIO &#xff0c;需要设置 IOMUX 让它们连接到 GPIO 模块&#xff1b; 要想让 pinA 、 B 用于 I2C &#xff0c;需要设置 IOMUX 让它们连接到 …

Go第三方框架--ants协程池框架

1. 背景介绍 1.1 goroutine ants是站在巨人的肩膀上开发出来的&#xff0c;这个巨人是goroutine&#xff0c;这是连小学生都知道的事儿&#xff0c;那么为什么不继续使用goroutine(以下简称go协程)呢。这是个思考题&#xff0c;希望讲完本文大家可以有个答案。 go协程只涉及用…

python中使用print方法打印时显示颜色

使用说明 在编程中&#xff0c;使用颜色来区分不同类型的输出或突出显示关键信息是一种常见的做法&#xff0c;特别是在调试和日志记录过程中。以下是一些使用颜色输出的常见场景和用途&#xff1a; 调试信息&#xff1a;在调试代码时&#xff0c;可以使用不同颜色来区分不同级…

CSDN 通过博客关注了你

CSDN 通过博客关注了你 前言通过“博文XXX”和“博客”的区别 前言 最近新增粉丝里发现&#xff0c;粉丝来源有不同的方式&#xff1a; 通过博文XXX关注了你 通过你的主页关注了你 通过用户推荐关注了你 通过博客关注了你 通过“博文XXX”和“博客”的区别 通过博文XXX和…

序列化、反序列化:将对象以字节流的方式,进行写入或读取

序列化&#xff1a;将指定对象&#xff0c;以"字节流"的方式写入一个文件或网络中。 反序列化&#xff1a;从一个文件或网络中&#xff0c;以"字节流"的方式读取到对象。 package com.ztt.Demo01;import java.io.FileNotFoundException; import java.io.Fi…

LeetCode-2009. 使数组连续的最少操作数【数组 哈希表 二分查找 滑动窗口】

LeetCode-2009. 使数组连续的最少操作数【数组 哈希表 二分查找 滑动窗口】 题目描述&#xff1a;解题思路一&#xff1a;正难则反滑动窗口解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个整数数组 nums 。每一次操作中&#xff0c;你可以将 n…

rabbitmq延迟队列的使用

rabbitmq延迟队列的使用 1、场景&#xff1a; 1.定时发布文章 2.秒杀之后&#xff0c;给30分钟时间进行支付&#xff0c;如果30分钟后&#xff0c;没有支付&#xff0c;订单取消。 3.预约餐厅&#xff0c;提前半个小时发短信通知用户。 A -> 13:00 17:00 16:30 延迟时间&a…

麒麟V10安装Redis6.2.6

1、下载redis安装包 Redis各版本下载&#xff1a;https://download.redis.io/releases/ 2、将下载后的.tar.gz压缩包上传到到服务器自定义文件夹下 3、 解压文件 tar -zxvf redis-6.2.6.tar.gzmv redis-6.2.6 redis4、安装redis 在redis文件夹下输入make指令 cd /opt/redi…

性能测试 —— Jmeter 命令行详细

我们在启动Jmeter时 会看见&#xff1a;Don’t use GUI mode for load testing !, only for Test creation and Test debugging.For load testing, use CLI Mode (was NON GUI) 这句话的意思就是说&#xff0c;不要使用gui模式进行负载测试&#xff0c;gui模式仅仅是创建脚本…

【LeetCode: 628. 三个数的最大乘积 + 排序 + 贪心】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

C++ linked_hash_map按顺序保存的容器

HashMap中不存在保存顺序的机制。而在LinkedHashMap中可以保持两种顺序&#xff0c;分别是插入顺序和访问顺序&#xff0c;这个是可以在LinkedHashMap的初始化方法中进行指定的。相对于访问顺序&#xff0c;按照插入顺序进行编排被使用到的场景更多一些&#xff0c;所以默认是按…

实现鼠标在页面点击出现焦点及大十字星

近段时间&#xff0c;在完成项目进度情况显示时候&#xff0c;用户在操作鼠标时候&#xff0c;显示当鼠标所在位置对应时间如下图所示 代码实现步骤如下&#xff1a; 1.首先引用 jquery.1.7.js 2.再次引用raphael.js 3.然后引用graphics.js 4.最后引用mfocus.js 其中mfocu…