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)之后才能使用子类thissuper(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的构造函数。

ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例,也就是说,super()内部的this指向的是B。

3、类的prototype属性和__proto__属性

在之前ES5实现中,每个对象都有__proo__属性,指向对应的构造函数的prototype属性。

ES6中类Class 作为构造函数的语法糖,同时有prototype属性和__proto__属性,因此同时存在两条继承链。

(1)子类的__proto__属性,表示构造函数的继承,总是指向父类。

(2)子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

class A {}class B extends A {
}B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

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

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

相关文章

《由浅入深学习SAP财务》:第2章 总账模块 - 2.7 总账模块报表 -2.7.1 对外报表:资产负债表及利润表

总账模块报表既包括对外报告的资产负债表、损益表、现金流量表,也包括企业自身用于查询和分析的各类报表,如科目余额表等。 2.7.1 对外报表:资产负债表及利润表 在SAP中,出具资产负债表和利润表的标准方法是先在后台建立一套“会…

971: 统计利用先序遍历创建的二叉树的深度

解法&#xff1a; 1.先序遍历创建二叉树链表形式 2.求二叉树的深度 用后序遍历实现&#xff1a; 1.后序遍历求节点A左右子树高度 2.对节点A&#xff1a; 1.取左右子树较大高度 2.返回高度1&#xff08;即以节点A为根节点的子树的最大深度&#xff09; 例如 #include <ios…

LINUX命令行后台运行matlab程序

UBUNTU安装了matlab&#xff0c;需要后台运行matlab程序。 一、MobaXterm程序&#xff08;非后台&#xff09; 使用mobaxterm程序&#xff0c;ssh连接ubuntu&#xff0c;在对应账号中输入matlab&#xff0c;即可基于mobaxterm自带的Xserver可视化界面&#xff0c;打开matlab界…

RobotFramework功能自动化测试框架基础篇

概念 RobotFramework是什么&#xff1f; Robot Framework是一款python编写的功能自动化测试框架。具备良好的可扩展性&#xff0c;支持关键字驱动&#xff0c;可以同时测试多种类型的客户端或者接口&#xff0c;可以进行分布式测试执行。主要用于轮次很多的验收测试和验收测试…

网页的基本结构

VScode中HTML的自动补全&#xff1a; 自动补全&#xff1a;例如标签 <h1></h1> 1.输入<h1>后其会自动给其补全 2. 进输入h1 tab键 网页的基本结构&#xff1a; 网页的基本结构只需要在VScode当中输入&#xff1a;&#xff01; tab键即可 <!DOCTYPE html…

ARM v8 Cortex R52内核 08 内存保护单元 Memory Protection Unit

ARM v8 Cortex R52内核 08 内存保护单元 Memory Protection Unit 8.1 About the MPU Cortex R52 处理器具有两个可编程的MPU&#xff0c;由EL1和EL2控制。每个MPU允许将4GB内存地址划分为多个区域。 每个内存区域由基地址、限制地址、访问权限和内存属性定义。 对于数据访问…

阿里对象储存OSS的SDK使用

对象存储OSS 该功能的实现使用了阿里的&#xff1a;对象存储OSS技术。 在阿里对象存储空间的文件可以 以链接 的形式进行访问: 文件访问路径规则 &#xff1a;https://BucketName.Endpoint/ObjectName 该技术的使用方式有很多&#xff0c;针对于SDK的简单实现官网上也有教程…

【网络编程】高性能并发服务器源码剖析

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的网络编程系列之洪水网络攻击&#xff0c;在这篇文章中&#xff0c;你将会学习到在网络编程中如何搭建一个高性能的并发服务器&#xff0c;并且我会给出源码进行剖析&#xff0c;以及手绘UML图来帮助大家来理解&#xf…

教你将配置好的conda环境迁移到其它设备

文章目录 问题分析存在的方法环境要求方法步骤1. 下载conda pack2. 打包原环境3. 新设备还原环境4. 查看环境 问题分析 好不容易配置好的conda环境&#xff0c;要在另一个设备上运行&#xff0c;还要重新配置&#xff0c;好麻烦。 存在的方法 pip install -r requirement.txt …

Node.js留言板(超详细注释)

目录结构如下 app.js // 一.引入模块 var http require(http);// 用于创建 HTTP 服务器和处理 HTTP 请求 var fs require(fs);// 用于读取和写入文件 var url require(url);// 用于解析URL// 创建留言数据对象 var msgs [{ name: 牛二, content: "我是妞儿", cr…

场景:数据库死锁

来自hollis八股文 流程图 前置知识 数据库上锁锁住的不是行&#xff0c;而是索引的主键 比如我对id 1的主键进行上锁&#xff0c;实际上是对查询使用的主键的key 1 进行上锁 对非聚簇索引操作时&#xff0c;首先会对非聚簇索引上锁&#xff0c;然后在请求主键的锁 比如我…

为什么开关电源变压器的耦合不可能为100%?什么是漏感?

一、为什么开关电源变压器的耦合不可能为100%&#xff1f; 变压器耦合度是指变压器初级绕组和次级绕组之间能量传递的效率&#xff0c;它反映了变压器在电磁感应过程中&#xff0c;初级侧磁通量能够有多少比例被次级侧有效利用。理论上&#xff0c;理想的变压器耦合度应该是10…

08 Php学习:if语句、Switch语句

PHP 条件语句 当您编写代码时&#xff0c;您常常需要为不同的判断执行不同的动作。您可以在代码中使用条件语句来完成此任务。 在 PHP 中&#xff0c;提供了下列条件语句&#xff1a; if 语句 - 在条件成立时执行代码 if…else 语句 - 在条件成立时执行一块代码&#xff0c;…

Java实现短信发送并校验,华为云短信配合Redis实现发送与校验

Java实现短信发送并校验&#xff0c;华为云短信配合Redis实现发送与校验 安装sms4j和redis <dependency><groupId>org.dromara.sms4j</groupId><artifactId>sms4j-spring-boot-starter</artifactId><version>3.2.1</version> <…

WPS基础使用

个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔…

单路高清HDMI编码器JR-3211HD

产品简介&#xff1a; JR-3211HD单路高清HDMI编码器是专业的高清音视频编码产品&#xff0c;该产品具有支持1路高清HDMI音视频采集功能&#xff0c; 1路3.5MM独立外接音频输入&#xff0c;编码输出双码流H.264格式&#xff0c;音频MP3/AAC格式。编码码率可调&#xff0c;画面质…

SHARE 203S PRO:倾斜摄影相机在地灾救援中的应用

在地质灾害的紧急关头&#xff0c;救援队伍面临的首要任务是迅速而准确地掌握灾区的地理信息。这时&#xff0c;倾斜摄影相机成为了救援测绘的利器。SHARE 203S PRO&#xff0c;这款由深圳赛尔智控科技有限公司研发的五镜头倾斜摄影相机&#xff0c;以其卓越的性能和功能&#…

QtCreater 使用

QtCreater 创建项目 1.刚进入 QtCreater 的界面是这样的一个界面 ① 创建一个新的文件&#xff0c;那么我们就选择左上角的 “文件” ② 点击新建文件&#xff0c;或者也可以直接使用快捷键 CtrlN 此时就会弹出对话框&#xff0c;让我们选择想要创建的文件&#xff1a; Appli…

python爬虫-----爬虫解析—xpath(第十八天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

Nginx日志格式化和追踪

背景 Nginx是一款功能强大的Web服务器&#xff0c;对于网络环境中的日志记录和配置至关重要。定制化Nginx日志格式可以帮助管理员更好地监控服务器性能、分析用户行为并做出相应优化。在本文中&#xff0c;我们将深入探讨Nginx日志格式的高级定制化策略&#xff0c;包括理解基…