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

【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中打包好后自动上传到镜像仓库&#xff0c…...

flutter架构全面解析

Flutter 是一个跨平台的 UI 工具集,它的设计初衷,就是允许在各种操作系统上复用同样的代码,例如 iOS 和 Android,同时让应用程序可以直接与底层平台服务进行交互。如此设计是为了让开发者能够在不同的平台上,都能交付拥…...

QHttpServer

QLineEdit-----输入提示 改动CmakeLists.txt 在帮助–索引查找QHttpServer 改动CmakeLists.txt&#xff0c;有三处改动 在谷歌浏览器测试&#xff0c;输入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 条命令&#xff1a; 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)是比较流行的数据冗余的存储方法&#xff0c;将原始数据分成k个数据块(data chunk)&#xff0c;通过k个数据块计算出m个校验块(coding chunk)。把nkm个数据块保存在不同的节点&#xff0c;通过n中的任意k个块还原出原始数据。EC包含编码和解…...

C++ 之 命名空间

namespace_百度百科&#xff0c;有示例...

MyBatis关系映射

文章目录 前言一、一对一映射1.1 创建实体1.2 xml配置 二、一对多映射2.1 创建实体2.2 resultMap配置2.3 测试 三、 多对多映射3.1 创建实体3.2 resultMap配置3.3 测试 前言 MyBatis是一个Java持久化框架&#xff0c;它提供了一种将数据库表和Java对象之间进行关系映射的方式。…...

DVWA失效的访问控制

失效的访问控制&#xff0c;可以认为是系统对一些功能进行了访问或权限限制&#xff0c;但因为种种原因&#xff0c;限制并没有生效&#xff0c;造成失效的访问控制漏洞,比如越权等 这里以DVWA为例&#xff0c;先访问低难度的命令执行并抓包 删除cookie&#xff0c;并在请求头…...

docker 笔记2 Docker镜像和数据卷

参考&#xff1a; 1.镜像是什么&#xff1f;&#xff08;面试题&#xff09; 是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文…...

java springboot 时间格式序列化 UTC8

背景 我们在项目中使用序列化和反序列化组件中&#xff0c;默认一般采用Jackson&#xff0c;如果遇到特殊配置&#xff0c;我们该怎么配置呢&#xff0c;大致有如下两种方式&#xff1a;采用配置文件【application.yml】和代码配置 配置文件 比如添加jackson节点 spring:jac…...

攻防世界-Get-the-key.txt

原题 解题思路 notepad看到&#xff0c;这应该是一个压缩包&#xff0c;解压。 但是解压的时候提示格式不对&#xff0c;不是zip&#xff0c;rar可以。解压出来有一个key.txt&#xff0c;打开就行。...

MyBatisPlus之DQL编程控制

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 MyBatisPlus之DQL编程控制 一、 条件查询方式&…...

本地使用GFPGAN进行图像人脸修复

人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验 首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境 根据README文件部署好环境&#xff0c;额外还需要&#xff1a; cd GFPGAN-1.3.8 pyt…...

Linux--进程概念

1.什么是程序&#xff1f;什么是进程&#xff1f;有什么区别&#xff1f; 程序&#xff1a;是静态的概念&#xff0c;gcc xxx.c -o pro 磁盘中生成的pro文件&#xff0c;叫做程序。 进程&#xff1a;是程序的一种与运行活动&#xff0c;通俗的意思是程序跑起来了&#xff0c;系…...

dex2oat编译模式、触发场景、命令强制执行

dex2oat简单理解就是把delvik虚拟机的可执行文件dex转化成AndroidRuntime虚拟机的可执行文件oat。 Android T版本由PKMS下发命令、native层进程installd负责具体执行dex2oat操作。installd回去调用dex2oat64完成编译工作&#xff0c;可以将dex2oat64理解成一个程序。源码路径&…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...