【H2O2|全栈】JS进阶知识(九)ES6(5)

目录

前言

开篇语

准备工作

class类

概念

形式

直接继承

概念

优点

案例

重写

概念

案例

关于重载

结束语


前言

开篇语

本系列博客主要分享JavaScript的进阶语法知识,本期为第九期,依然围绕ES6的语法进行展开。

本期内容为:类,直接继承和重写。

与基础部分的语法相比,ES6的语法进行了一些更加严谨的约束和优化,因此,在之后使用原生JS时,我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示:在不熟练的阶段建议关闭AI助手

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

class类

概念

之前我们知道,想要创建一个实例化的对象,可以通过调用它的构造函数去创建。

而且,如果我们想要为这个构造函数声明一些方法,则可以利用原型,并在原型中声明一个构造器(constructor)用来指向原来的构造函数。

现在,ES6提供了一种新的方式——class类,来统筹实现上面的操作。

形式

类使用class关键字声明,比如我们需要创建一个“人类”,就可以这么做——

class Per {}

现在我们为它添加构造函数,或者说构造器,让它能够使用构造函数进行创建——

class Per {constructor(name, age, sex) {this.name = namethis.age = agethis.sex = sex}
}

如果我们需要为类添加方法,则直接在类中添加即可——

class Per {constructor(name, age, sex) {this.name = namethis.age = agethis.sex = sex}height(h) {console.log(this.name + '身高为' + h + 'cm');}
}

对于这些使用了this的方法,都是类的实例成员,可以由类的实例化对象创建。

直接继承

概念

继承(inheritance)是面向对象编程(OOP)技术当中的一个概念,在ES6中,使用extends关键字来让一个类继承另一个类。

如果类B“继承自”另一个类A,那么我们就可以把B称为A的子类,而A则为B的父类或超类

优点

使用继承可以使得子类具有父类的各种属性和方法,而不需要再次编写相同的代码。

在子类继承父类时,可以覆盖父类原来具有的属性和方法,即可以重新定义子类独有的属性,或重写父类的方法,以此实现与父类不同的功能

这一点和JAVA实际上是非常相像的,因此如果我们学习过JAVA,理解本节的内容将会非常简单。

案例

假设我们现在有一个类GrandPa,这个类的实例化对象gp拥有自己的资产,就像下面这样——

class GrandPa {constructor(gpMoney) {this.gpMoney = gpMoney;}getGPMoney() {console.log("GP的" + this.gpMoney + "W");}
}let gp = new GrandPa(100);

gp作为家族的最年长的长辈,拥有100W的资产,我们可以使用getGPMoney()来查看这些资产:

gp.getGPMoney();

gp培养他的孩子——由Pa实例化的对象pa,作为家族的继承人,而这位继承人也不负众望,拥有了200W个人资产。

在未来的某一天,弥留之际的gp将pa叫到床前,准备为其宣读遗嘱,我们假设这份遗嘱里声明了gp所有的资产都由pa继承。

那么,类Pa和pa的代码就可以这么写——

class Pa extends GrandPa {constructor(paMoney, gpMoney) {super(gpMoney);this.paMoney = paMoney;}getPaMoney() {console.log("Pa的" + (this.paMoney + this.gpMoney) + "W");}
}let pa = new Pa(200, 100);

其中,super()代表超类构造器,相当于在这里执行了GrandPa的this.gpMoney = gpMoney语句。由此,Pa也拥有了GrandPa的资产,实现了遗产的继承。

pa.getPaMoney();

注意super()的参数列表应当与超类构造器保持一致。

pa在悲痛之余,接受了父亲的遗产,也接手了父亲为其留下来的一切。

因此,gp的方法也可以由子代pa调用——

pa.getGPMoney();

重写

概念

重写(Override)是指,子类可以重新定义父类中已有的方法,以改变其行为或实现方式。

当子代想要使用父代的方法名,但是又不想要和父代中的该方法相同,就可以使用方法重写。

注意,重写的方法在调用时遵循就近原则

案例

pa想要在A市购买一处地产,但是他手上的资产有些不足。因此,每当pa想起这件事情,只能无奈地叹息。

我们将pa的愿望写成下面的方法(Pa的成员方法)——

getHouse() {console.log("pa在A市没有拿下地产");
}

好在,pa有一个孩子——由Child类创建的cd。这个孩子天赋异禀,具有很强的商业头脑,经过他的不断努力,积累了300W的个人资产。

cd想起了父亲pa的愿望,决定为父亲买下这处地产,在父亲的帮助下,cd最终成功拍下了这处地产。

我们在Child中重写父亲pa的getHouse()方法——

class Child extends Pa {constructor(cdMoney, paMoney, gpMoney) {super(paMoney, gpMoney);this.cdMoney = cdMoney;}getHouse() {console.log("cd在A市成功拿下地产,实现了父亲的愿望");}
}let cd = new Child(300, 200, 100);

现在,我们分别让pa和cd调用这两个同名的方法——

pa.getHouse();
cd.getHouse();

关于重载

注意,ES6暂时还没有提供重载(Overload)的方法。

当我们在同一个类中使用同一个方法名重新声明方法后,新声明的方法会覆盖原来的方法。

所以,像JAVA那种直接可以同一个方法设置不同数量的参数,不能直接仿照JAVA的重载方式去做,但其实是可以有类似的方法实现的,这里就不扩展了。

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的JS进阶专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】

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

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

相关文章

Prompting LLMs to Solve Complex Tasks: A Review

文章目录 题目简介任务分解未来方向结论 题目 促使 LLM 解决复杂任务: 综述 论文地址:https://www.intjit.org/cms/journal/volume/29/1/291_3.pdf 简介 大型语言模型 (LLM) 的最新趋势显而易见,这体现在大型科技公司的投资以及媒体和在线社…

学会Lambda,让程序Pythonic一点

Lambda是Python里的高阶用法,要把代码写得Pythonic,就需要了解这些高阶用法,想说自己是一名真正的Python程序员,先要把代码写得Pythonic。 今天聊下Lambda的用法,写篇简短的用法说明。 Lambda是匿名函数的意思&#…

加速科技精彩亮相中国国际半导体博览会IC China 2024

11月18日—20日,第二十一届中国国际半导体博览会(IC China 2024)在北京国家会议中心顺利举办,加速科技携重磅产品及全系测试解决方案精彩亮相,加速科技创始人兼董事长邬刚受邀在先进封装创新发展论坛与半导体产业前沿与…

window11编译pycdc.exe

一、代码库和参考链接 在对python打包的exe文件进行反编译时,会使用到uncompyle6工具,但是这个工具只支持python3.8及以下,针对更高的版本的python则不能反编译。 关于反编译参考几个文章: Python3.9及以上Pyinstaller 反编译教…

【深度学习之回归预测篇】 深度极限学习机DELM多特征回归拟合预测(Matlab源代码)

深度极限学习机 (DELM) 作为一种新型的深度学习算法,凭借其独特的结构和训练方式,在诸多领域展现出优异的性能。本文将重点探讨DELM在多输入单输出 (MISO) 场景下的应用,深入分析其算法原理、性能特点以及未来发展前景。 1、 DELM算法原理及其…

前端-react(class组件和Hooks)

文章主要以Hooks为主,部分涉及class组件方法进行对比 一.了解react 1.管理组件的方式 在React中,有两种主要的方式来管理组件的状态和生命周期:Class 组件和 Hooks。 Class 组件: Class 组件是 React 最早引入的方式,它是基于…

Ollama vs VLLM:大模型推理性能全面测评!

最近在用本地大模型跑实验,一开始选择了ollama,分别部署了Qwen2.5-14B和Qwen2.5-32B,发现最后跑出来的实验效果很差,一开始一直以为prompt的问题,尝试了不同的prompt,最后效果还是一直不好。随后尝试了vllm部署Qwen2.5…

基于深度学习CNN算法的花卉分类识别系统01--带数据集-pyqt5UI界面-全套源码

文章目录 基于深度学习算法的花卉分类识别系统一、项目摘要二、项目运行效果三、项目文件介绍四、项目环境配置1、项目环境库2、环境配置视频教程 五、项目系统架构六、项目构建流程1、数据集2、算法网络Mobilenet3、网络模型训练4、训练好的模型预测5、UI界面设计-pyqt56、项目…

【PCIE常见面试问题-1】

PCIE常见面试问题-1 1 PCIE概述1.1 PCI为何发展开PCIE?1.2 什么是Root Complex(RC)1.3 什么是EP?1.4 什么是Swith1.5 PCIE协议如何组织通信的?1.6 简要介绍一下PCIE的分层结构,为什么需要分层?1.7 PCIE的事务类型有哪些…

解决 Docker Desktop 启动报错:Docker Desktop is unable to detect a Hypervisor

在使用 Docker Desktop 时,有时会遇到启动报错:“Docker Desktop is unable to detect a Hypervisor.” 这是由于系统的虚拟化功能未正确启用或配置导致的。本文将分步骤指导如何解决该问题。 一、检查虚拟化是否已启用 打开任务管理器 按下 Ctrl Shift…

订单日记为“惠采科技”提供全方位的进销存管理支持

感谢温州惠采科技有限责任公司选择使用订单日记! 温州惠采科技有限责任公司,成立于2024年,位于浙江省温州市,是一家以从事销售电气辅材为主的企业。 在业务不断壮大的过程中,想使用一种既能提升运营效率又能节省成本…

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中,会发现无法连接oracle,测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库,我们通过安装orac…

东方通重置管理员密码

百度给出的回答 注意,箭头所指的密码是举例,不是自己的默认密码 自己的默认密码存储在下图位置 原文地址

spark 写入mysql 中文数据 显示?? 或者 乱码

目录 前言 Spark报错: 解决办法: 总结一下: 报错: 解决: 前言 用spark写入mysql中,查看中文数据 显示?? 或者 乱码 Spark报错: Sat Nov 23 19:15:59 CST 2024 WARN: Establishing SSL…

电子应用设计方案-20:智能电冰箱系统方案设计

智能电冰箱系统方案设计 一、系统概述 本智能电冰箱系统旨在提供更便捷、高效、智能化的食品存储和管理解决方案,通过集成多种传感器、智能控制技术和联网功能,实现对冰箱内部环境的精确监测和控制,以及与用户的互动和远程管理。 二、系统组成…

实验四:构建园区网(OSPF 动态路由)

目录 一、实验简介 二、实验目的 三、实验需求 四、实验拓扑 五、实验步骤 1、在 eNSP 中部署网络 2、设计全网 IP 地址 3、配置二层交换机 4、配置路由交换机并测试通信 5、配置路由接口地址 6、配置 OSPF 动态路由,实现全网互通 一、实验简介 使用路由…

【大数据学习 | Spark-Core】yarn-client与yarn-cluster的区别

1. yarn的提交命令 # yarn的提交命令参数 --master yarn #执行集群 --deploy-mode # 部署模式 --class #指定运行的类 --executor-memory #指定executor的内存 --executor-cores # 指定核数 --num-executors # 直接指定executor的数量 --queue # 指定队列 2. yarn-client模式…

WEB攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

知识点: 1、文件上传-二次渲染 2、文件上传-简单免杀变异 3、文件上传-.htaccess妙用 4、文件上传-PHP语言特性 1、上传后门时,文件内容带.就不行 这时可以上传一个转换后的ip地址,ip地址对应网站包含后门代码 转换后的int会在访问的时候…

【汽车制动】汽车制动相关控制系统

目录 1.ABS (Anti-lock Brake System,防抱死制动系统) 2.EBD(Electronic Brake-force Distribution,电子制动力分配系统) 3.TCS(Traction Control System,牵引力控制系统) 4.VDC&#xff08…

Tri Mode Ethernet MAC IP核详解

本文对 Vivado 的三速 MAC IP 核(Tri Mode Ethernet MAC,TEMAC)进行介绍。 在自行实现三速以太网 MAC 控制器时,GMII/RGMII 接口可以通过 IDDR、ODDR 原语实现,然而实际使用中自己实现的模块性能不是很稳定&#xff08…