【04】基础知识:typescript中的类
一、es5 对象
1、定义 类(对象)
原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。
// 自定义构造函数
function Person(name, age) {this.name = namethis.age = agethis.getInfo = function() {console.log(`${this.name} - ${this.age}`)}
}// 原型对象增加属性和方法
Person.prototype.sex = '男'
Person.prototype.getOtherInfo = function() {console.log(`${this.name} - ${this.age} - ${this.sex}`)
}let person = new Person('zhangsan', 20)
person.getInfo() // zhangsan - 20
person.getOtherInfo() // zhangsan - 20 - 男
2、类中的静态方法
静态方法不需要实例化,通过【 类.方法名称() 】形式调用;实例方法必须 new 创建对象后才能调用。
function Person(name, age) {this.name = namethis.age = agethis.getInfo = function() { // 实例方法console.log(`${this.name} - ${this.age}`)}
}Person.staticFun = function() {console.log('静态方法')
}Person.staticFun() // 静态方法
3、组合继承:借用构造函数 call | apply + 原型继承 prototype
借用构造函数只能动态传参,不能继承构造函数原型对象上的属性和方法;原型继承只能继承构造函数原型对象上的属性和方法,实例化子类的时候不能给父类传参。
1> 借用构造函数继承属性:Parent.call(this, params)、Parent.apply(this, [params]);
2> 原型继承方法:Children.prototype = new Parent(); Children.prototype.constructor = Children;
function Person(name, age) {this.name = namethis.age = agethis.getInfo = function () {console.log(`${this.name} - ${this.age}`)}
}Person.prototype.sex = '男'
Person.prototype.getOtherInfo = function () {console.log(`${this.name} - ${this.age} - ${this.sex}`)
}// 借用构造函数
function Children(name, age) {Person.call(this, name, age)
}
// 原型继承
Children.prototype = new Person()
Children.prototype.constructor = Childrenconst child = new Children('lily', 15)
child.getInfo() // 借用构造函数,可以继承构造函数中的属性和方法
child.getOtherInfo() // 原型继承,可以继承构造函数原型对象上的属性和方法
二、typescript中的类
1、定义类
class Person {name: string // 属性,前面省略了public 关键字constructor(name: string) { // 构造函数,实例化类时触发的方法this.name = name}getInfo(): string {return this.name}setInfo(name: string): void {this.name = name}
}const person = new Person('zhangsan')
person.getInfo() // zhangsan
person.setInfo('lily')
person.getInfo() // lily
2、继承 extends、super
class Person {public name: stringconstructor(name: string) {this.name = name}getInfo(): string {return this.name}
}class People extends Person {public age: numberconstructor(name: string, age: number) {super(name) // 初始化父类构造函数this.age = age}getOtherInfo(): string {return `姓名${this.name} 年龄${this.age}`}
}const people = new People('lily', 20)
people.getInfo() // lily
people.getOtherInfo() // 姓名lily 年龄20
3、类的修饰符
typescript 里面定义属性的时候,提供了三种修饰符;属性如果不加类型,默认为 public。
修饰符 | 说明 |
---|---|
public | 公有类型,在类里面、子类里面、类外面都可以访问 |
protected | 保护类型,在类里面、子类里面可以访问,在类外部无法访问 |
private | 私有类型,在类里面可以访问,子类、类外部都无法访问 |
// 父类
class Person {public name: string // 公共属性protected age: number // 受保护属性private sex: string // 私有属性constructor(name: string, age: number, sex: string) {this.name = namethis.age = agethis.sex = sex}getInfo(): string {// 类里访问 公共属性、受保护属性、私有属性正常return `姓名${this.name} - 年龄${this.age} - 性别${this.sex}`}
}const person = new Person('慢慢', 20, '男')
console.log(person.name) // 类外部访问公共属性正常
console.log(person.age) // 类外部访问受保护属性,ts编译报错
console.log(person.sex) // 类外部访问私有属性,ts编译报错// 子类
class People extends Person {constructor(name: string, age: number, sex: string, ) {super(name, age, sex)}getOtherInfo(): string {// 子类中访问私有属性,ts编译报错 // console.log(this.sex)// 子类中访问公共属性、受保护属性正常return `姓名${this.name} - 年龄${this.age}`}
}
4、类的静态属性、静态方法
静态方法在实际场景中的使用,以 jquery 为例,了解即可。
// $ 符封装,返回实例化对象
function $(element) {return new Base(element)
}// jquery 的静态方法 get
$.get = function() { } // jquery 的实例化函数
function Base(element) {this.element = document.getElementById(element) // 获取dom节点// jquery 的实例方法 cssthis.css = function(attr, value) {this.element.style.attr = value}
}// 使用 jquery 实例化后的方法 css
$('#box').css('color', 'red')
// 使用 jquery 静态方法 get
$.get('url', function() {})
typescript 中使用 static 关键字声明类的静态属性,通过【 类.静态属性 】 形式进行访问。
typescript 中使用 static 关键字声明类的静态方法,通过【 类.静态方法() 】 形式进行调用;静态方法中无法直接使用类的属性。
class Person {public name: string // 公共属性static age: number = 20 // 静态属性constructor(name: string) {this.name = name}// 实例方法getInfo(): void {// 使用公共属性name、静态属性ageconsole.log(this.name, Person.age)}// 静态方法中,无法直接使用类中的属性static print(): void {console.log('调用Person类的静态方法print')console.log(`使用Person类的公共属性name失败:${this.name}`)console.log(`使用Person类的静态属性age成功:${Person.age}`) }
}// 调用 Person 类的静态方法
Person.print()
console.log(`使用 Person 类静态属性age:`, Person.age)// 实例化 Person 类
const person = new Person('莉莉')
person.getInfo() // 莉莉 20
5、多态
父类定义一个方法不去实现,让继承它的子类去实现,每一个子类有不同的表现。
多态属于继承。
class Animal {public name: string // 公共属性constructor(name: string) {this.name = name}eat(): void { // 具体吃什么,继承它的子类去实现,没一个子类的表现不一样console.log('吃的方法')}
}class Dog extends Animal {constructor(name: string) {super(name)}eat(): void {console.log(`${this.name}吃肉`)}
}class Cat extends Animal {constructor(name: string) {super(name)}eat(): void {console.log(`${this.name}吃鱼`)}
}const dog = new Dog('狗')
const cat = new Cat('猫')
dog.eat() // 狗吃肉
cat.eat() // 猫吃鱼
6、抽象类
typescript 中的抽象类,是提供其他类继承的基类,不能直接被实例化。
用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract 抽象方法只能放在抽象类中。
抽象类 和 抽象方法用来定义标准。
// 定义标准:Animal 类要求它的子类必须包含 eat 方法
abstract class Animal {public name: stringconstructor(name: string) {this.name = name} abstract eat(): any // 抽象方法speek(): void { // 其他方法:实例方法 dog.speek()console.log('其他方法子类可以不实现,抽象方法必须实现', this.name)}
}// 无法创建抽象类的实例
new Animal() // 报错: Cannot create an instance of an abstract class. class Dog extends Animal {constructor(name: string) {super(name)}// 抽象类的子类必须实现抽象类里面的抽象方法eat(): string {return `${this.name}吃肉`}
}const dog = new Dog('小花花')
dog.eat() // 小花花吃肉
相关文章:
【04】基础知识:typescript中的类
一、es5 对象 1、定义 类(对象) 原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。 // 自定义构造函数 function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.…...
CCClippingNode:在游戏中实现遮罩效果、剪切效果,以涂抹糖霜为例,如何更好的实现涂抹效果,提高用户的游戏体验
CCClippingNode:在游戏中实现遮罩效果、剪切效果,以涂抹糖霜为例,如何更好的实现涂抹效果 设备/引擎:Mac(11.6)/cocos2d-x 开发工具:Xcode(13.0) 开发需求:…...

cuda gdb调试
如果cudaDeviceEnablePeerAccess函数不支持或不起作用,您仍然可以尝试其他方法来实现GPU之间的数据交换和通信。以下是一些替代方法: 通过主机内存进行数据传输: 如果GPU之间的数据交换不是非常频繁,您可以将数据从一个GPU复制到…...

【vim 学习系列文章 5 - cscope 过滤掉某些目录】
文章目录 cscope 过滤目录介绍 cscope 过滤目录介绍 第一步创建自己的cscope脚本~/.local/bin/cscope.sh,如下: function my_cscope() {CODE_PATHpwdecho "$CODE_PATH"echo "start cscope...."if [ ! -f "$CODE_PATH/cscope.…...

实验三 HBase1.2.6安装及配置
系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前,需要安装好hadoop2.7.6。 本篇文章参考:HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…...
LightDB sequence支持MAXVALUE最大值与Oracle相同
功能介绍 Oracle数据库在创建sequence的时候可以支持设置maxvalue 为9999999999999999999999999999,这样的SQL在LightDB23.3版本之前都是执行失败的。为了方便Oracle用户迁移到LightDB上,在LightDB23.3版本上,增加了sequence支持maxvalue设置…...

二、Kafka快速入门
目录 2.1 安装部署1、【单机部署】2、【集群部署】 2.2 Kafka命令行操作1、查看topic相关命令参数2、查看当前kafka服务器中的所有Topic3、创建 first topic4、查看 first 主题的详情5、修改分区数(注意:分区数只能增加,不能减少)…...
消息中间件-kafka实战-第五章-kafka重复消费、顺序消费及死信队列
目录 一、参考二、路由规则(分片规则)三、触发重复消费的场景场景一:触发rebalance问题描述可能原因实际影响参数在kafka0.10.1 之前:在kafka0.10.1之后:解决方案 场景二:服务宕机可能原因解决方案 消息幂等性 四、kaf…...

python爬虫9:实战2
python爬虫9:实战2 前言 python实现网络爬虫非常简单,只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点,方便以后复习。 申明 本系列所涉及的代码仅用于个人研究与讨论,并不会对网站产生不好…...

从业务层的代码出发,去排查通用框架代码崩溃的问题
目录 1、问题说明 1.1、Release下崩溃,Debug下很难复现 1.2、用Windbg打开dump文件,发现崩溃在通用的框架代码中 2、进一步分析 2.1、使用IDA查看汇编代码尝试寻找崩溃的线索 2.2、在Windbg中查看相关变量的值 2.3、查看最近代码的修改记录&#…...

LLM预训练大型语言模型Pre-training large language models
在上一个视频中,您被介绍到了生成性AI项目的生命周期。 如您所见,在您开始启动您的生成性AI应用的有趣部分之前,有几个步骤需要完成。一旦您确定了您的用例范围,并确定了您需要LLM在您的应用程序中的工作方式,您的下…...
[Machine Learning] 损失函数和优化过程
文章目录 机器学习算法的目的是找到一个假设来拟合数据。这通过一个优化过程来实现,该过程从预定义的 hypothesis class(假设类)中选择一个假设来最小化目标函数。具体地说,我们想找到 arg min h ∈ H 1 n ∑ i 1 n ℓ ( X i…...
serialVersionUID 有何用途?如果没定义会有什么问题?
序列化是将对象的状态信息转换为可存储或传输的形式的过程。我们都知道,Java 对象是保持在 JVM 的堆内存中的,也就是说,如果 JVM 堆不存在了,那么对象也就跟着消失了。 而序列化提供了一种方案,可以让你在即使 JVM 停机…...

C# OpenCvSharp DNN 二维码增强 超分辨率
效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.Dnn; using OpenCvSh…...
this.$refs使用方法
深入理解和使用this.$refs——Vue.js的利器 Vue.js是一个流行的JavaScript框架,用于构建交互性强大的用户界面。在Vue.js中,this.$refs是一个强大的特性,允许你直接访问组件中的DOM元素或子组件实例。本教程将带你深入了解this.$refs的使用方…...

Ohio主题 - 创意组合和代理机构WordPress主题
Ohio主题是一个精心制作的多用途、简约、华丽、多功能的组合和创意展示主题,具有敏锐的用户体验,您需要构建一个现代且实用的网站,并开始销售您的产品和服务。它配备了最流行的WordPress页面构建器 WPBakery Page Builder(以前称为…...

mysql 、sql server trigger 触发器
sql server mySQL create trigger 触发器名称 { before | after } [ insert | update | delete ] on 表名 for each row 触发器执行的语句块## 表名: 表示触发器监控的对象 ## before | after : 表示触发的时间,before : 表示在事件之前触发&am…...
自然语言处理从入门到应用——LangChain:索引(Indexes)-[检索器(Retrievers)]
分类目录:《自然语言处理从入门到应用》总目录 检索器(Retrievers)是一个通用的接口,方便地将文档与语言模型结合在一起。该接口公开了一个get_relevant_documents方法,接受一个查询(字符串)并返…...

春秋云境:CVE-2022-0543(Redis 沙盒逃逸漏洞)
目录 一、i春秋题目 二、CVE-2022-0543:(redis沙盒逃逸) 漏洞介绍: 漏洞复现: 一、i春秋题目 靶标介绍: Redis 存在代码注入漏洞,攻击者可利用该漏洞远程执行代码。 进入题目:…...
关于uniapp组件的坑
关于uniapp组件的坑 我有一个组件写的没什么问题,但是报下面这个错误 is not found in path “components/xxx/xxxx” (using by “components/yyy/yyy”) 最后经过排除发现命名需要驼峰命名法 我原本组件命名: 文件夹名 test_tttt 文件名 test_tttt.vue 不行 最后改成文件…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...

Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...