【ES6】js 中class的extends、super关键字用法和避坑点
在JavaScript中,使用class关键字可以实现面向对象编程。其中,extends和super是两个非常重要的关键字,它们分别用于实现类的继承和调用父类的方法。
一、extends关键字
extends关键字用于实现类的继承,它可以让一个子类继承父类的属性和方法。使用extends关键字时,需要指定要继承的父类,语法如下:
class 子类 extends 父类 {// 子类的属性和方法
}
例如,定义一个Person类和一个Student类,Student类继承自Person类:
class Person {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}class Student extends Person {constructor(name, age, grade) {super(name, age); // 调用父类的构造函数,这一行必须在this之前,否则报错。因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。this.grade = grade;}study() {console.log(`I'm studying...`);}
}
在上面的例子中,Student类继承了Person类的构造函数和方法,并且定义了自己的属性和方法。在构造函数中,使用super关键字来调用父类的构造函数,以便初始化父类的属性和方法。
注意:
上面的super(name, age)必须在this之前。因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。
二、super关键字
super关键字用于调用父类的方法。在子类的方法中,可以使用super关键字来调用父类的方法。使用super关键字时,需要指定要调用的父类方法,语法如下:
super(); // 调用父类的构造函数
super.父类方法(); // 调用父类的方法
super.属性; // 访问父类的属性
例如,在上面的例子中,在Student类的构造函数中使用了super关键字来调用父类的构造函数:
constructor(name, age, grade) {super(name, age); // 调用父类的构造函数this.grade = grade;
}
另外,在子类的方法中,也可以使用super关键字来调用父类的方法。例如:
class Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, my name is ${this.name}`);}
}class Student extends Person {constructor(name, grade) {super(name); // 调用父类的构造函数this.grade = grade;}sayHello() {super.sayHello(); // 调用父类的方法console.log(`I'm a student in grade ${this.grade}`);}
}
在上面的例子中,Student类继承了Person类,并重写了sayHello方法。在重写的sayHello方法中,使用super关键字来调用父类的sayHello方法。
相关文章:
【ES6】js 中class的extends、super关键字用法和避坑点
在JavaScript中,使用class关键字可以实现面向对象编程。其中,extends和super是两个非常重要的关键字,它们分别用于实现类的继承和调用父类的方法。 一、extends关键字 extends关键字用于实现类的继承,它可以让一个子类继承父类的…...
mysql排名函数row_number()over(order by)和with * as 的用法
601. 体育馆的人流量(力扣mysql题,难度:困难) 表:Stadium ------------------------ | Column Name | Type | ------------------------ | id | int | | visit_date | date | | people | int | ------------------------vis…...
linux局域网IP地址冲突检测
使用keepalived设置vip的时候,发现vip无法连接,经查是出现了ip地址冲突,使用了一个在用的ip作为了vip,但是这个ip其实ping不通,因为目标机禁用了ping,也即是丢弃了ICMP包。 一、那么怎么检测IP地址是否已经…...
远距离WiFi模组方案,实现移动设备之间高效通信,无人机远程图传应用
随着科技的不断进步,无线通信技术也在日新月异地发展。其中,WiFi技术已经成为现代生活中不可或缺的一部分。 从室内到室外,WiFi的应用场景正在不断扩大,为我们的日常生活和工业生产带来了极大的便利。 WiFi技术,即无…...
Docker构建Springboot项目,并发布测试
把SpringBoot项目打包成Docker镜像有两种方案: 全自动化:先打好docker镜像仓库,然后在项目的maven配置中配置好仓库的地址,在项目里配置好Dockerfile文件,这样可以直接在idea中打包好后自动上传到镜像仓库,…...
flutter架构全面解析
Flutter 是一个跨平台的 UI 工具集,它的设计初衷,就是允许在各种操作系统上复用同样的代码,例如 iOS 和 Android,同时让应用程序可以直接与底层平台服务进行交互。如此设计是为了让开发者能够在不同的平台上,都能交付拥…...
QHttpServer
QLineEdit-----输入提示 改动CmakeLists.txt 在帮助–索引查找QHttpServer 改动CmakeLists.txt,有三处改动 在谷歌浏览器测试,输入127.0.0.1/api/login 测试代码 #include<QCoreApplication> #include <QHttpServer> //http服务器 int m…...
21.3 CSS 背景属性
1. 背景颜色 background-color属性: 设置元素的背景颜色. 它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.快捷键: bctab background-color:#fff;<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...
Ansible 常用命令50条
以下是 Ansible 常用的 50 条命令: ansible --version: 查看 Ansible 版本信息。ansible all -m ping: 检查所有主机的连通性。ansible-playbook playbook.yml: 运行指定的 Ansible Playbook 文件。ansible-doc module_name: 查看指定模块的帮助文档。ansible-conf…...
ceph源码阅读 erasure-code
1、ceph纠删码 纠删码(Erasure Code)是比较流行的数据冗余的存储方法,将原始数据分成k个数据块(data chunk),通过k个数据块计算出m个校验块(coding chunk)。把nkm个数据块保存在不同的节点,通过n中的任意k个块还原出原始数据。EC包含编码和解…...
C++ 之 命名空间
namespace_百度百科,有示例...
MyBatis关系映射
文章目录 前言一、一对一映射1.1 创建实体1.2 xml配置 二、一对多映射2.1 创建实体2.2 resultMap配置2.3 测试 三、 多对多映射3.1 创建实体3.2 resultMap配置3.3 测试 前言 MyBatis是一个Java持久化框架,它提供了一种将数据库表和Java对象之间进行关系映射的方式。…...
DVWA失效的访问控制
失效的访问控制,可以认为是系统对一些功能进行了访问或权限限制,但因为种种原因,限制并没有生效,造成失效的访问控制漏洞,比如越权等 这里以DVWA为例,先访问低难度的命令执行并抓包 删除cookie,并在请求头…...
docker 笔记2 Docker镜像和数据卷
参考: 1.镜像是什么?(面试题) 是一种轻量级、可执行的独立软件包,它包含运行某个软件所需的所有内容,我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文…...
java springboot 时间格式序列化 UTC8
背景 我们在项目中使用序列化和反序列化组件中,默认一般采用Jackson,如果遇到特殊配置,我们该怎么配置呢,大致有如下两种方式:采用配置文件【application.yml】和代码配置 配置文件 比如添加jackson节点 spring:jac…...
攻防世界-Get-the-key.txt
原题 解题思路 notepad看到,这应该是一个压缩包,解压。 但是解压的时候提示格式不对,不是zip,rar可以。解压出来有一个key.txt,打开就行。...
MyBatisPlus之DQL编程控制
🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 MyBatisPlus之DQL编程控制 一、 条件查询方式&…...
本地使用GFPGAN进行图像人脸修复
人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验 首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境 根据README文件部署好环境,额外还需要: cd GFPGAN-1.3.8 pyt…...
Linux--进程概念
1.什么是程序?什么是进程?有什么区别? 程序:是静态的概念,gcc xxx.c -o pro 磁盘中生成的pro文件,叫做程序。 进程:是程序的一种与运行活动,通俗的意思是程序跑起来了,系…...
dex2oat编译模式、触发场景、命令强制执行
dex2oat简单理解就是把delvik虚拟机的可执行文件dex转化成AndroidRuntime虚拟机的可执行文件oat。 Android T版本由PKMS下发命令、native层进程installd负责具体执行dex2oat操作。installd回去调用dex2oat64完成编译工作,可以将dex2oat64理解成一个程序。源码路径&…...
编程小白的第一课:用快马AI零代码基础创建个人技能展示网站
作为一个刚接触编程的新手,我最近尝试用InsCode(快马)平台做了一个个人技能展示网站。整个过程比我预想的简单很多,特别适合零基础的同学上手。下面分享我的具体实现过程和心得: 项目规划与结构设计 刚开始完全不懂代码结构,但平台…...
设备管理系统是什么?如何建立设备管理体系?
在现代企业的运转中,生产设备无疑是核心资产。无论是制造业的数控机床,还是建筑工地的重型机械,甚至是医疗机构的精密仪器,设备的稳定运行直接决定了企业的生产效率、产品质量和成本控制。然而,许多企业在设备管理上仍…...
大模型RL算法梳理:从全量词元到部分词元的路径演化
一、 引言:大模型强化学习算法的演化格局 近年来,以 OpenAI 的 o1 系列、DeepSeek 的 R1,以及 Qwen 系列模型为代表,大语言模型在数学证明、代码生成等长链路推理任务中展现出更强的稳定性与推理深度。 在这一背景下,面…...
从“看见光点”到“看懂世界”:视觉重建让这个世界变得更近一些
三十多年前,“让盲人重新看见”更像一句带有未来感的科学想象。而今天,这件事已经进入临床试验和真实的人体研究。视觉重建之所以被视为脑机接口里最具挑战性的方向之一,不只是因为它要解决“能不能刺激大脑”的问题,更因为它要回…...
Python高效开发技巧汇总
这是一篇关于Python开发的技术文章示例内容,可以替换为真实文章内容。...
微服务架构的陷阱:我们是如何从拆分成“微”麻烦的
对于软件测试从业者而言,微服务架构的兴起既带来了前所未有的挑战,也揭示了隐藏在水面之下的诸多陷阱。从单体应用向微服务转型,初衷是为了提升系统的灵活性、可维护性和团队的交付效率。然而,在实践中,许多团队却发现…...
4月底就要交论文,现在开始降AI率来得及吗?完整应急方案
4月底就要交论文,现在开始降AI率来得及吗?完整应急方案 今天是4月1日。 如果你的论文要在4月底提交,现在翻出来一查,AI率50%,或者知网标红一片——你可能已经开始冒冷汗了。 先别慌。来得及,但要马上开始&a…...
算法对齐还是实战突围?解构GEO优化中方法论与实践的权重博弈
在生成式人工智能(AIGC)重塑全球信息检索范式的当下,生成式引擎优化(Generative Engine Optimization, GEO)已从一种前沿概念演变为品牌流量增长的底层操作系统。随着大语言模型(LLM)与检索增强…...
终极Übersicht小部件调试指南:10个实用工具和高效方法
终极bersicht小部件调试指南:10个实用工具和高效方法 【免费下载链接】uebersicht ˈyːbɐˌzɪt 项目地址: https://gitcode.com/gh_mirrors/ue/uebersicht bersicht是一款强大的macOS桌面小部件工具,让开发者能够在桌面上创建和运行自定义小部…...
如何用QtScrcpy实现低延迟Android投屏?5个技巧带你解锁高效多设备控制体验
如何用QtScrcpy实现低延迟Android投屏?5个技巧带你解锁高效多设备控制体验 【免费下载链接】QtScrcpy Android实时投屏软件,此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/…...
