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

JS学习第9天——ES6中面向对象（类class、constructor构造函数、类的继承extends、super关键字、面向对象tab栏切换案例）

news 2025/8/25 8:54:38

一、面向对象

两大编程思想：① 面向过程 ② 面向对象

1、面向过程

面向过程POP（(Process Oriented programming）：分析好了步骤，然后按照步骤解决问题

2、面向对象

面向对象OOP（(Object Oriented Programming）：以对象功能来划分问题，而不是步骤
面向对象特性
① 封装性 ② 继承性 ③ 多态性

3、两者对比

对比	面向对象	面向过程
优点	由于面对对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、易维护、易复用、易扩展	性能比面向对象高，适合跟硬件联系很紧密的东西，比如单片机
缺点	性能比面向过程低	没有面对对象易于维护、易复用、易扩展

面向过程的方法写出来的程序像一份蛋炒饭，用面向对象写出来的程序像一份盖浇饭

二、ES6中的类和对象

1、面向对象的思维特点

① 抽取（抽象）对象共用的属性和行为封装成一个类（模板）
② 对类进行实例化，获取类的对象

2、对象

在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，比如字符串、数值、数组、函数等
对象是由属性和方法组成的，属性是事物的特征，方法是事物的行为

3、类class

在ES6中新增了类，通过class关键字声明一个类，之后以这个类来实例化对象
类抽取了对象的公共部分，通过类实例化一个具体的对象
创建类

class name {// 逻辑
}
// 实例化类
var xxx = new class();

注意：类必须使用 new 实例化对象

4、类constructor构造函数

constructor()方法是类的构造函数，用于传递参数，返回实例对象

通过new关键字生成对象实例时，会自动调用constructor()方法。如果没有显示定义，类内部会自动帮我们创建一个constructor()
《1》语法

class Person {constructor(name,age) {this.name = name;this.age = age;say() {console.log(this.name + '你好');}}
}//  创建实例
var ldh = new Person("刘德华",18);
console.log(ldh.name);
ldh.say();

注意：方法之间不能通过逗号隔开，同时方法也不需要添加function关键字

三、类的继承

子类可以继承父类的一些属性和方法

1、继承

extends关键字：表明子类继承父亲的属性和方法

class Father {
}
class Son extends Father { // 子类继承父类
}

2、super()关键字

super关键字用于访问和调用父类上的函数，可以调用父类的构造函数，也可调用普通函数

// 父类
class Father {constructor(fatherName) {this.fatherName = fatherName;}say1() {console.log("我是父亲1");}say2() {console.log("我是父亲2");}
}
// 子类
class Son extends Father {// 子类可以继承父类constructor(fatherName, sonName) {super(fatherName);super.say1(); // 子类调用父类的构造函数this.sonName = sonName; // 子类定义自己独有的属性}
}
var lala = new Son("父亲", "儿子");
lala.say2(); // 子类调用父类的普通函数

注意: 子类在构造函数中使用super关键字时，必须放到 this 前面 (必须先调用父类的构造方法，再使用子类构造方法)

3、注意点

① ES6中没有变量提升，所以必须先定义类，才能通过类实例化对象
② 类里面的共有属性和方法必须要加this使用
③ 类中this指向：constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

四、面向对象案例

tab栏切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;}ul li {list-style: none;}.tabsbox {width: 900px;margin: 0 auto;height: 400px;border: 1px solid lightsalmon;position: relative;}nav ul {overflow: hidden;}nav ul li {position: relative;float: left;width: 100px;height: 50px;line-height: 50px;text-align: center;border-right: 1px solid #ccc;position: relative;}nav ul li.liactive {background-color: pink;z-index: 9;}#tab input {width: 80%;height: 60%;}nav ul li a {position: absolute;top: 0px;right: 0;width: 10px;height: 10px;line-height: 10px;cursor: pointer;background-color: #ccc;}.tabadd {position: absolute;/* width: 100px; */top: 0;right: 0;}.tabadd span {display: block;width: 20px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #ccc;float: right;margin: 10px;user-select: none;}.tabscon {width: 100%;height: 300px;position: absolute;padding: 30px;top: 50px;left: 0px;box-sizing: border-box;border-top: 1px solid #ccc;}.tabscon section,.tabscon section.conactive {display: none;width: 100%;height: 100%;}.tabscon section.conactive {display: block;}</style></head><body><div class="tabsbox" id="tab"><!-- tab 标签 --><nav class="fisrstnav"><ul><li class="liactive"><span>测试1</span><a>×</a></li><li><span>测试2</span><a>×</a></li><li><span>测试3</span><a>×</a></li></ul><div class="tabadd"><span>+</span></div></nav><!-- tab 内容 --><div class="tabscon"><section class="conactive">测试1</section><section>测试2</section><section>测试3</section></div></div></body><script>var that;class Tab {constructor(id) {that = this;this.tab = document.querySelector(id);this.ul = this.tab.querySelector("ul");this.tabadd = this.tab.querySelector(".tabadd");this.tabscon = this.tab.querySelector(".tabscon");this.init();}// 初始化init() {// this指向实例对象this.updateTab();for (var i = 0; i < this.lis.length; i++) {this.lis[i].index = i;this.lis[i].onclick = this.toggleTab;this.as[i].index = i;this.as[i].onclick = this.removeTab;this.spans[i].ondblclick = this.editTab;this.sections[i].ondblclick = this.editTab;}this.tabadd.onclick = this.addTab;}// 更新数据updateTab() {this.lis = this.ul.querySelectorAll("li");this.sections = this.tabscon.querySelectorAll("section");this.as = this.ul.querySelectorAll("a");this.spans = this.ul.querySelectorAll("span");}//切换功能toggleTab() {// this指向lithat.removeClass();this.className = "liactive";that.sections[this.index].className = "conactive";}// 添加功能addTab() {// this指向tabaddthat.removeClass();var li = '<li class="liactive"><span>新增测试</span><a>×</a></li>';that.ul.insertAdjacentHTML("beforeend", li);var section = ' <section class="conactive">新增测试</section>';that.tabscon.insertAdjacentHTML("beforeend", section);that.init();}// 删除功能removeTab(e) {// this指向spane.stopPropagation();that.lis[this.index].remove();that.sections[this.index].remove();that.init();if (document.querySelector(".liactive")) return;that.lis[this.index - 1] && (that.lis[this.index - 1].className = "liactive");}//修改功能editTab() {// this指向span// 双击取消选中文字window.getSelection  ? window.getSelection().removeAllRanges() : document.selection.empty();var str = this.innerHTML;this.innerHTML = "<input type='text'>";var ipt = this.children[0];ipt.select();ipt.onblur = function () {ipt.value ? (this.parentNode.innerHTML = ipt.value) : (this.parentNode.innerHTML = str);};}// 移出样式removeClass() {for (var i = 0; i < this.lis.length; i++) {this.lis[i].className = "";this.sections[i].className = "";}}}new Tab("#tab");</script>
</html>

运行结果
在这里插入图片描述

JS学习第9天——ES6中面向对象（类class、constructor构造函数、类的继承extends、super关键字、面向对象tab栏切换案例）

目录一、面向对象1、面向过程2、面向对象3、两者对比二、ES6中的类和对象1、面向对象的思维特点2、对象3、类class4、类constructor构造函数三、类的继承1、继承2、super()关键字3、注意点四、面向对象案例一、面向对象两大编程思想：① 面向过程 ② 面向对象 1、…...

编程日记 2023/3/12 6:52:59

K8S核心秘术学习总纲

学习 Kubernetes (简称 K8S) 可以采取以下步骤： 了解 K8S 的基本知识：K8S 是一个负责管理容器的开源平台。在学习 K8S 之前，需要先掌握 Linux 基础知识和 Docker 容器基础知识。搭建 K8S 环境：为了学习 K8S，你需要有…...

编程日记 2023/3/12 6:51:57

【PTA-训练day27】L2-038 病毒溯源 + L2-039 清点代码库 + L2-040 哲哲打游戏

目录 L2-038 病毒溯源 - dfs求树最大深度及路径 L2-039 清点代码库 - STL嵌套使用结构体自定义排序 L2-040 哲哲打游戏 - vector建图 L2-038 病毒溯源 - dfs求树最大深度及路径 PTA | 程序设计类实验辅助教学平台思路： 用链表建树找到根节点dfs根节点寻找最大…...

编程日记 2023/3/12 6:50:54

新一代跨平台云备份工具Duplicacy

什么是 Duplicacy ？ Duplicacy 是一款云备份软件，通过 Duplicacy 可以将视频，图片，文件，注册表等数据备份到云端。Duplicacy 通过客户端加密和最高级别的重复数据删除功能，将您的文件备份到许多云存储。安…...

编程日记 2023/3/12 6:49:51

考研复试——概率论

文章目录概率论1. 大数定律2. 中心极限定理3. 大数定律和中心极限定理的区别？4. 最大似然估计5. 古典概型6. 几何概型7. 全概率公式8. 贝叶斯公式9. 先验概率、后验概率10. 数学期望因为初试考的数二，没有学概率论，要从头学习时间也不够&…...

编程日记 2023/3/12 6:48:46

Web学习4_JavaScript常用库

常用库 jQuery 使用方式在元素中添加： <script src"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 按jQuery官网提示下载选择器 $(selector)，例如： $(div);$(.big-div); $(div > p)s…...

编程日记 2023/3/12 6:47:43

C++回顾（二十）—— vector容器和 deque容器

20.1 vector容器 20.1.1 vector容器简介 vector是将元素置于一个动态数组中加以管理的容器。vector可以随机存取元素（支持索引值直接存取， 用[]操作符或at()方法）。vector尾部添加或移除元素非常快速。但是在中部或头部插入元素或移除元素比…...

编程日记 2023/3/12 6:46:40

httpd使用记录

httpd使用记录 Busybox用一个httpd的程序，尝试用起来。简单测试启动服务 # 启动服务 mkdir /var/www/html httpd -p 8080 -h /var/www/html &编写html文件在/var/www/html下放一个测试网页index.html文件。 <!DOCTYPE html> <html><hea…...

编程日记 2023/3/12 6:45:34

.vue 组件打包成 .js *** 所有的内容 cli 官网都有 *** *** https://cli.vuejs.org/zh/guide/build-targets.html *** 所有的内容 cli 官网都有： https://cli.vuejs.org/zh/guide/build-targets.html 准备几个 .vue 组件文件 import Main from ./components/Ma…...

编程日记 2023/3/12 6:44:30

Java 代码分享（第11篇）编程解决数学问题：“计算3个10以内的数字，与合计值相除后，商的第3位小数大于4，共有多少个数的组合满足条件”类似问题

求与合计相除，小数位大于4的数字组合 1 3 4 9 17 1 / 17 ≈ 0.05882 3 / 17 ≈ 0.17647 4 / 17 ≈ 0.23529 9 / 17 ≈ 0.52941 可以发现，每一个商的第三位都是大于等于5的数，四舍五入后会进位。下面的程序可以生成符合这样条件的数据。…...

编程日记 2023/3/12 6:43:26

面试题 17.05. 字母与数字

题目链接面试题 17.05. 字母与数字 mid 题目描述给定一个放有字母和数字的数组，找到最长的子数组，且包含的字母和数字的个数相同。返回该子数组，若存在多个最长子数组，返回左端点下标值最小的子数组。若不存在这样的数组&…...

编程日记 2023/3/12 6:42:21

解决Win10图片/文件右键单击自动退出并刷新桌面问题

问题描述这两天开始不知道怎么回事儿，右键选择图片时候，电脑黑屏且资源管理器自动重启。然后我就开始找很多方法去解决。我试了很多种复杂的简单的方法，但是只有一种解决了我的问题。解决方案【解决我的问题】这个方法如下&#xff1…...

编程日记 2023/3/12 6:40:10

【代码随想录训练营】【Day39】第九章｜动态规划｜62.不同路径｜63. 不同路径 II

不同路径题目详细：LeetCode.62 有点简单呀，做类似这种题型时，最好就是先画图： 可以像题目一样，画一个二维表格，表格内的值代表到达这个格子的不同路径总数那么已知，如果图的大小为m 1 || n…...

编程日记 2023/3/12 6:39:07

【Linux】linux | 修改系统编码 | 增加字体处理 | 图片处理字体变成方块

一、说明1、CentOS7二、修改系统编码编辑文件vi /etc/locale.conf修改编码并保存LANGzh_CN.UTF-8配置生效source /etc/locale.conf1）修改系统编码，只是让系统支持中文编码2）不解决文字不显示的问题；往后看三、解决字体不显示问题非…...

编程日记 2023/3/12 6:38:04

R语言介绍及安装教程

R语言是一种免费的开源编程语言和环境，主要用于数据分析、统计建模和可视化。它可以运行在不同的操作系统上，如Windows、MacOS和Linux。R语言具有以下特点：丰富的数据处理和统计分析函数库；易于学习和使用；可以生成高质…...

编程日记 2023/3/12 6:37:01

Linux 练习九（IPC 消息队列）

文章目录消息队列有亲缘关系的进程使用消息队列通信无亲缘关系的进程使用消息队列通信使用环境：Ubuntu18.04 使用工具：VMWare workstations ，xshell作者在学习Linux的过程中对常用的命令进行记录，通过思维导图的方式梳理知识点&am…...

编程日记 2023/3/12 6:35:55

在Win 11下使用Visual Studio 2019和cygwin编译JBR（Java SDK 17）源码

很多文章介绍了JDK 8和JDK11源码在Linux编译，很少有人介绍了JDK 17在windows的编译过程，所以写了这篇文章，为什么选用JBR 17版本，因为JBR17 版本集成了HotSwapAgent功能，具体HotSwapAgent有什么用，请看我前…...

编程日记 2023/3/12 6:34:50

java基础学习 day51 (匿名内部类)

1. 什么是匿名内部类？ 隐藏了名字的内部类，实际名字为：外部类名$序号可以写在成员位置，为没有名字的成员内部类也可以写在局部位置，为没有名字的局部内部类 2. 匿名内部类的格式？ new 类名/接口名() { 重…...

编程日记 2023/3/12 6:33:45

Spring MVC程序开发（三大功能）

文章目录一、什么是Spring MVC?1.MVC定义2.MVC与Spring MVC的关系3.创建方式二、Spring MVC的核心功能1.连接功能浏览器获取前端接口和后端程序连接功能实现get和post的区别Spring Boot热部署2.获取参数（1）传递单个参数（2）传递对…...

编程日记 2023/3/12 6:32:40

stack,queue

stack,queuestack的介绍和使用介绍使用模拟实现queue的介绍和使用介绍使用模拟实现priority_queue的介绍和使用介绍使用模拟实现容器适配器概念标准库中stack，queue的底层结构介绍deque原理缺陷deque作为stack,queue底层默认容器stack的介绍和使用介绍 stack是适…...

编程日记 2023/3/12 6:30:24

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/8/24 13:23:03

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/8/24 13:23:27

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/8/22 3:21:27

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/8/22 3:50:53

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/8/22 3:17:54

【生成模型】视频生成论文调研

工作清单上游应用方向：控制、速度、时长、高动态、多主体驱动类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/6/19 5:33:21