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

【Typescript】面向对象(上篇),包含类,构造函数,继承,super,抽象类

假期第七篇,对于基础的知识点,我感觉自己还是很薄弱的。
趁着假期,再去复习一遍

面向对象:程序中所有的操作都需要通过对象来完成

计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体。比如照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象等。

在程序中所有的对象被分成两个部分,数据和功能。以人为例,人的姓名,性别,年龄,身高,体重等属于数据,人可以走路,说话,吃饭,睡觉这些属于人的功能,数据在对象中被称为属性,而功能称之为方法

1、类(class)

面对对象,操作对象,就要先拥有对象,如何创建对象?创建对象,必须要先定义类,类可以理解为对象的模型,根据类创建指定类型的对象

类是面向对象编程的基础,它是一种抽象的模板,用于创建对象的蓝图,
类封装了属性和方法(其实类就可以理解为是两大块,属性和方法)
可以通过实例化类来创建具体的对象,用于创建具有相同属性和方法的对象。
可以使用 class 关键字来定义一个类,并在类中声明属性和方法


class Person {//类名:personname: string;//属性名:类型age: number;//属性名:类型constructor(name: string, age: number) {//参数:类型this.name = name;this.age = age;}sayHello() {//方法名console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}
}const per = new Person()//实例对象per

属性分为两种,直接定义的属性是实例属性,需要通过对象的实例去访问

class Person {//类名:personname: string='花花';//属性名:类型age: number='38';//属性名:类型
}const per = new Person()//实例对象per
console.log(per.name)//通过实例访问

使用static开头的属性是静态属性(类属性),直接通过类去访问

class Person {//类名:personname: string='花花';//属性名:类型static  age: number='38';//属性名:类型
}
console.log(Person.age)//通过实例访问

2、构造函数和this

通过类创建实例对象,一个类会创建多个实例对象

示例:

class Dog { name= '拉布拉多';age='3';bark() { alert('w w w')}}
const dog = new Dog()
const dog1 = new Dog()
const dog2 = new Dog()
const dog3 = new Dog()console.log(dog)
console.log(dog1)
console.log(dog2)
console.log(dog3)

创建了四个实例对象,对象里的属性一模一样。这样就变成创建拉布拉多的类,而不是创建Dog的类了
在这里插入图片描述
假如想创建不同Dog的类,在类里不要直接设置好属性的值(不能写成固定的),只指定类型就行

class Dog { 
//类型暂时注掉了,下面会解释这个地方// name:string;//age:number;bark() { alert('w w w')}}
const dog = new Dog()
const dog1 = new Dog()
const dog2 = new Dog()
const dog3 = new Dog()console.log(dog)
console.log(dog1)
console.log(dog2)
console.log(dog3)

不指定类型也不赋值得到的就是空对象
在这里插入图片描述

那什么时候赋值呢?就要用到constructor 构造函数

构造函数会在对象创建时调用,const dog = new Dog()执行时会调用constructor (){}

class Dog { // name:string;// age:number;bark() { alert('w w w')}constructor(){ console.log('构造函数执行了~~~');};};const dog = new Dog()
const dog1 = new Dog()
const dog2 = new Dog()
const dog3 = new Dog()console.log(dog)
console.log(dog1)
console.log(dog2)
console.log(dog3)

在这里插入图片描述

每次调用都会执行,所以可以理解为只要new的动作发生了,就会调用构造函数
在这里插入图片描述
在实例方法中,this表示当前的实例对象。
在这里插入图片描述
在构造函数中,当前对象就是新建的那个对象,所以可以通过this向新建的对象中添加属性

class Dog { //name:string;// age:number;bark() { alert('w w w')}constructor(){ // console.log(this);this.name = '狗狗1'this.age = '3岁'};};const dog = new Dog()
console.log(dog)

在这里插入图片描述
constructor中不能写固定的值,不然就和一开始的时候一样,得到的都是狗狗1的实例对象,上面只是对this的打印示例

给constructor传参数

class Dog { // name:string;// age:number;bark() { alert('w w w')}constructor(name:string,age:number){     this.name = namethis.age = age};};const dog = new Dog(name:'小黑',age:4)
const dog2 = new Dog(name:'小白',age:2)console.log(dog)
console.log(dog2)

在这里插入图片描述
其实代码里constructor中的this底下有红色波浪线,这是因为这两个属性在类中没有定义
在这里插入图片描述
在这里插入图片描述
将注掉的部分恢复,也就是在类中先定义后使用
在这里插入图片描述

3、继承

假设定义很多个不同的类,但是里面的属性都一样,只有方法中打印的内容不同
示例:
定义一个表示狗的类
在这里插入图片描述
定义一个表示猫的类
在这里插入图片描述
可能还会有其他不同动物的类,每一个类都要重复写类似一样多的代码,页面会很冗余
那就要用到继承了,把重复的代码提取出来,放到一个公共的区域,一起共享。

定义一个公共的类,Dog类,Cat类都可以继承父类所有的方法和属性

通过继承可以将多个类中共有的代码写在一个父类中

这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法

如果希望在子类中添加一些父类没有的属性或方法,直接加就行

如果在子类中添加了和父类相同的方法,则子类会覆盖掉父类的方法,(子类覆盖掉父类方法的形式称为重写)

//定义一个公共的动物的类
class Animal { name:string;age:number;bark() { alert('w w w')}constructor(name:string,age:number){ this.name = namethis.age = age};};
// 定义一个表示狗的类
//extends:使Dog类继承Animal类
//Dog extends Animal:Animal被称为父类,Dog被称为子类
//使用继承后,子类将拥有父类所有的方法和属性
class Dog extends Animal { run() {console.log(`${this.name}在跑`);}};
// 定义一个表示猫的类
//extends:使Cat类继承Animal类
//Cat extends Animal:Animal被称为父类,Cat被称为子类class Cat extends Animal { };const dog = new Dog('小黑',4)
const cat = new Cat('小白',2)

在这里插入图片描述

4、super关键字

//定义一个公共的动物的类
class Animal { name:string;constructor(name:string){ this.name = name};sayHello() { console.log('hello')}};class Dog extends Animal { sayHello() {// 在类的方法中,super就表示当前类的父类super.sayHello()}};const dog = new Dog('小黑',4)

如果想在类中添加新的属性,然后调用构造函数初始化属性
在这里插入图片描述
构造函数中的代码都出现了红色波浪线,这是因为子类重写了构造函数,把父类的构造函数覆盖掉了,子类中没有name,重写之后父类的构造函数不执行,name的赋值操作也就不执行了。
在这里插入图片描述
所以在子类中写了构造函数,就必须要对父类的构造函数进行调用,调用方法就是super()
在这里插入图片描述

这里还是有红色波浪线提示

在这里插入图片描述
因为父类中有name属性,而super()中没有传入。
在子类中必须把父类的构造函数再调一遍,才可以确保继承的正常
在这里插入图片描述

5、抽象类

当我们定义公共的类(即父类),不仅子类可以实例化对象,父类也可以实例化对象

class Animal { name:string;constructor(name:string){ this.name = name};sayHello() { console.log('hello')}};class Dog extends Animal { sayHello() {super.sayHello()}};const dog = new Dog('小黑', 4)let animal = new Animal('小马',8)

但是Animal作为公共的类,范围太大了,如果用Animal创建对象,对应的动物是啥,并不好判断
Animal是一个父类,基类,作用就是被别的类继承,禁止Animal创建实例对象,就要用到abstract
在这里插入图片描述

相关文章:

【Typescript】面向对象(上篇),包含类,构造函数,继承,super,抽象类

假期第七篇,对于基础的知识点,我感觉自己还是很薄弱的。 趁着假期,再去复习一遍 面向对象:程序中所有的操作都需要通过对象来完成 计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体。比如照片是对一个具体的…...

【python】python中字典的用法记录

文章目录 序言1. 字典的创建和访问2. 字典如何添加元素3. 字典作为函数参数4. 字典排序 序言 总结字典的一些常见用法 1. 字典的创建和访问 字典是一种可变容器类型,可以存储任意类型对象 key : value,其中value可以是任何数据类型,key必须…...

基于Java的大学生心理咨询系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

Redis-双写一致性

双写一致性 双写一致性解决方案延迟双删(有脏数据的风险)分布式锁(强一致性,性能比较低)异步通知(保证数据的最终一致性,高并发情况下会出现短暂的不一致情况) 双写一致性 当修改了数…...

CustomTkinter:创建现代、可定制的Python UI

文章目录 介绍安装设置外观与主题外观模式主题设置自定义主题颜色窗口缩放CTkFont字体设置CTkImage图片Widgets窗口部件CTk Windows窗口CTk窗口CTkInputDialog对话框CTkToplevel顶级窗口布局pack布局palce布局Grid 网格布局Frames 框架Frames滚动框架...

华为OD机试真题【不含 101 的数】

1、题目描述 【不含 101 的数】 【题目描述】 小明在学习二进制时,发现了一类不含 101的数,也就是: 将数字用二进制表示,不能出现 101 。 现在给定一个整数区间 [l,r] ,请问这个区间包含了多少个不含 101 的数&#…...

Spring IoC和DI详解

IOC思想 IoC( Inversion of Control,控制反转) 不是一门具体技术,而是一种设计思想, 是一种软件设计原则,它将应用程序的控制权(Bean的创建和依赖关系)从应用程序代码中解耦出来&am…...

mysql-binlog

1. 常用的binlog日志操作命令 1. 查看bin-log是否开启 show variables like log_%;2. 查看所有binlog日志列表 show master logs;3.查看master状态 show master status;4. 重置(清空)所有binlog日志 reset master;2. 查看binlog日志内容 1、使用mysqlb…...

通过BeanFactotyPostProcessor动态修改@FeignClient的path

最近项目有个需求,要在启动后,动态修改FeignClient的请求路径,网上找到的基本都是在FeignClient里使用${…},通过配置文件来定义Feign的接口路径,这并不能满足我们的需求 由于某些特殊原因,我们的每个接口…...

数据结构与算法系列-二分查找

二分查找 什么是二分查找&#xff1f; 二分查找是一种针对有序集合&#xff0c;每次将要查找的区间缩小一半&#xff0c;直到找到查找元素&#xff0c;或区间被缩小为0。 如何实现二分查找&#xff1f; 实现有3个注意点&#xff1a; 终止条件是 low < high 2.求中点的算…...

CSS 毛玻璃特效运用目录

主要是记录毛玻璃相关的特效实践案例和实现思路。 章节名称完成度难度文章地址完整代码下载地址Glassmorphism 登录表单完成一般文章链接代码下载Glassmorphism 按钮悬停效果完成一般文章链接代码下载Glassmorphism 计算器完成一般文章链接代码下载Glassmorphism 卡片悬停效果…...

如何在Qt6中引入Network模块

2023年10月1日&#xff0c;周日凌晨 2023年10月2日&#xff0c;周一下午 第一次更新 目录 如果用的是CMakeQt Console ApplicationQt Widgets Application如果用的是qmake 如果用的是CMake find_package(Qt6 COMPONENTS Network REQUIRED) target_link_libraries(mytarget…...

2023/10/4 QT实现TCP服务器客户端搭建

服务器端&#xff1a; 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QTcpSocket> #include <QList> #include <QMessageBox> #include <QDebug>QT_BEGIN_NAMESPACE namespace Ui { cla…...

云原生边缘计算KubeEdge安装配置

1. K8S集群部署&#xff0c;可以参考如下博客 请安装k8s集群&#xff0c;centos安装k8s集群 请安装k8s集群&#xff0c;ubuntu安装k8s集群 2.安装kubEedge 2.1 编辑kube-proxy使用ipvs代理 kubectl edit configmaps kube-proxy -n kube-system #修改kube-proxy#大约在40多行…...

【LeetCode热题100】--35.搜索插入位置

35.搜索插入位置 使用二分查找&#xff1a; class Solution {public int searchInsert(int[] nums, int target) {int low 0,high nums.length -1;while(low < high){//注意每次循环完都要计算midint mid (low high)/2;if(nums[mid] target){return mid;}if(nums[mid]…...

mysql面试题13:MySQL中什么是异步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是异步复制?底层实现? MySQL中的异步复制(Asynchronous Replication)是一种复制模式,主服务器将数据写入二进制日志后,无…...

SpringBoot-Shiro安全权限框架

Apache Shiro是一个强大而灵活的开源安全框架&#xff0c;它干净利落地处理身份认证&#xff0c;授权&#xff0c;企业会话管理和加密。 官网&#xff1a; http://shiro.apache.org/ 源码&#xff1a; https://github.com/apache/shiro Subject&#xff1a;代表当前用户或…...

PostgreSQL基础语法

当谈到关系型数据库管理系统&#xff08;RDBMS&#xff09;时&#xff0c;PostgreSQL是一个备受推崇的选择。它是一个开源的、强大的RDBMS&#xff0c;具有广泛的功能和支持。本文将介绍一些PostgreSQL的基础语法&#xff0c;以帮助您入门。 1. 安装和配置 在开始使用PostgreS…...

编程前置:处理Excel表格,定位单元格位置,输入文字前,让AI机器人知道我说什么

原提问&#xff1a; input输入表头 &#xff08;input内除了/&#xff0c;空格 回车 标点符号等 全部作为单元格分隔符&#xff09; 由我设置input输入的是行or列 给选项 1. 行 2. 列 默认回车或没输入值是列由我设置起始位置行列 例如 3,2 表示3行2列 当我输入3,2 就表示在第…...

Linux基本指令介绍系列第四篇

文章目录 前言一、Linux基本指令介绍1、more指令2、less指令3、head指令4、tail指令5、bc指令6、管道文件介绍7、与时间相关的指令 总结 前言 本文介绍Linux使用时的部分指令&#xff0c;读者如果想了解更多基本指令的使用&#xff0c;可以关注博主的后续的文章。 博主使用的实…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...