Typescript中抽象类与接口详细对比与应用场景介绍
现如今,TS正在逐渐成为前端OO编程的不二之选,以下是我在学习过程中对抽象类和接口做的横向对比。
1. 抽象类当做父类,被继承。且抽象类的派生类的构造函数中必须调用super();接口可以当做“子类”继承其他类
抽象类派生:
abstract class Human {
constructor (readonly name:string) {}
}
class Student extends Human {
constructor (name:string) {
super(name)
}
}
接口继承类:
class Man {
job: string;
constructor (readonly name: string) {}
earnMoney () {
console.log(`earning money`)
}
}
interface HumanRule extends Man{
nose: string;
mouth: string;
ear: string;
eye: string;
eyebrow: string
}
当类被接口继承时,通常是需要为这个类的子类添加约束。例如下面的例子中,Man类的子类就需要去实现特定的五官属性,否则将会报错。
class Player extends Man implements HumanRule{
nose: string;
mouth: string;
ear: string;
eye: string;
eyebrow: string
constructor (name) {
super(name);
}
}
2. 抽象类与接口都无法实例化, 类类型接口实际上是一种 抽象类型
按个人理解,在使用类类型的接口时,类类型的接口其实就相当于抽象类的子集。抽象类中除了可以像接口那样只定义不实现外,还可以部分实现,而且也可以使用类型修饰符。
类类型的接口更多的是当做一种抽象的数据类型使用,此处所说的类型通常是某个类的实例类型。
let James: Player = new Player('james'); // 类类型使用
class SoccerPlayer extends Player {
constructor (name) {
super(name)
}
playSoccer () {
console.log(`${this.name} is playing soccer.`)
}
}
function createPlayer (pl: SoccerPlayer, name: string) { // 类类型调用
return new SoccerPlayer(name);
}
3. 接口中不能包含具体实现,抽象类中除抽象函数之外,其他函数可以包含具体实现
此处我们将Human类增加一些内容:
abstract class Human {
constructor (readonly name:string) {}
protected thinking () {
console.log(`I am a human, so i can think, ${this.name} is thinking.`)
}
}
作为人类,可以在人类 这个类中添加具体实现,因为人类都可以思考。所以思考这个类就不必非要放到子类中去具体实现,这也正是抽象类的灵活之处。
4. 抽象类中的抽象方法在子类中必须实现, 接口中的非可选项在接口被调用时必须实现。
此处我们继续增加Human类的内容,增加move的具体实现方法为抽象方法,因为不同类型的人,移动的实现不同。(此处实际上也是OO的特性中,多态的一种具体实现)
abstract class Human {
constructor (readonly name:string) {}
protected thinking () {
console.log(`I am a human, so i can think, ${this.name} is thinking.`)
}
abstract move (): void
}
class Student extends Human {
constructor (name:string) {
super(name)
}
move () {
console.log(`I am a student, so i move by bus`)
}
}
而接口一旦调用,就必须要严格实现。此处以函数类型的接口为例:
interface createPlayer {
(pl: SoccerPlayer, name:string): SoccerPlayer
}
let createPlayer:createPlayer = function (pl: SoccerPlayer, name: string) { // 修改createPlayer 使用匿名函数方法创建
return new SoccerPlayer(name);
}
5. 抽象方法可当做类的实例方法,添加访问修饰符;但是接口不可以
抽象方法的添加访问修饰符和接口的严格实现其实都是各自的特点,我们也往往是根据这些特点去选择究竟是使用抽象类还是使用接口。
还拿Human类来说:
abstract class Human {
constructor (readonly name:string) {}
protected thinking () {
console.log(`I am a human, so i can think, ${this.name} is thinking.`)
}
protected abstract move (): void
}
我们为move方法添加abstract标识符,是想让开发者非常明白,Human的派生类中必须要实现此方法;而使用protected标识符,是想限制move方法调用或重载的权限。
综合来说抽象类更多的是实现业务上的严谨性;接口更多的是制定各种规范,而此规范又分为很多类规范,就像官方文档在介绍接口这一节的时候所说的,例如函数型规范、类类型规范、混合规范、索引规范等。
Typescript中抽象类与接口详细对比与应用场景介绍的更多相关文章
- “全栈2019”Java第六十六章:抽象类与接口详细对比
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 转:二十一、详细解析Java中抽象类和接口的区别
转:二十一.详细解析Java中抽象类和接口的区别 http://blog.csdn.net/liujun13579/article/details/7737670 在Java语言中, abstract ...
- C#中抽象类和接口的区别
原文:C#中抽象类和接口的区别 大家在编程时都容易把抽象类和接口搞混,下面为大家从概念上讲解抽象类和接口的区别: 一.抽象类: 含有abstract修饰符的class即为抽象类,抽象类是特殊的类,只是 ...
- 关于JAVA中抽象类和接口的区别辨析
今天主要整理一下新学习的有关于Java中抽象类和接口的相关知识和个人理解. 1 抽象类 用来描述事物的一般状态和行为,然后在其子类中去实现这些状态和行为.也就是说,抽象类中的方法,需要在子类中进行重写 ...
- java 8中抽象类与接口的异同
1.java 8中抽象类与接口的异同 相同点: 1)都是抽象类型: 2)都可以有实现方法(以前接口不行): 3)都可以不需要实现类或者继承者去实现所有方法,(以前不行,现在接口中默认方法不需要实现者实 ...
- 谈谈php中抽象类和接口的区别
php中抽象类和接口的区别 1) 概念 面向对象的三大概念:封装,继承,多态 把属性和方法封装起来就是类. 一个类的属性和方法被另外的类复制就是继承,PHP里面的任何类都可以被继承,被继 ...
- PHP中抽象类与接口的区别
PHP中抽象类与接口的区别 抽象类abstract 概念 定义为抽象的类不能被实例化.任何一个类,如果有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的类. 继承一个抽象类的时候,子类必须定义 ...
- 转载:详细解析Java中抽象类和接口的区别
在Java语言中, abstract class 和interface 是支持抽象类定义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和int ...
- 详细解析Java中抽象类和接口的区别
在Java语言中, abstract class 和interface 是支持抽象类定 义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和in ...
随机推荐
- flutter No material widget found textfield widgets require a material widget ancestor
Error states that TextField widgets require a Material widget ancestor. Simply wrapping your whole l ...
- if __name__ == __'main'__: 判断讲解
"""王思聪作为消费者 要吃热狗生产者 负责做热狗问题:王思聪不清楚对方会生产多少热狗 """from multiprocessing im ...
- 常用的Eclipse 快捷键
显示所有快捷方式 SHIFT + CTRL + L 代码类 ALT + / 代码补全 ALT + 1 批量修改变量名 SHIFT + CTRL + F 自动格式代码4 SHIFT + ALT + R ...
- application program Can't Start
一.电脑插U盘中毒之后感染,出现无法启动,但是风扇工作,先拔掉电源,卸掉电池之后重新安装,重启电脑,之后发现电脑桌面上的程序无法启动,360webShield也无法启动,可能是电脑中毒后的假死机现象. ...
- C语言将字符串转json
示例代码: #include <stdio.h> #include <string.h> #include <stdlib.h> char *strrpc(char ...
- python 读取指定div的内容
# -*- coding:utf-8 -*- from bs4 import BeautifulSoup import urllib.request import re # 如果是网址,可以用这个办法 ...
- 微信小程序 如何获取用户code
1.首先需要获取code 使用 wx.login({ success: function(res) { console.log(res);//这里的返回值里面便包含code }, fail: func ...
- centos/redhat破解账号密码
说明:1.个人觉得centos系统和redhat系统差不多,界面都差不多一样. 2.下面方法用于开机root密码忘了,其他人篡改root密码等等 下面是破解账号密码(图解) 之后要等久点 效果: 方法 ...
- Java+selenium之WebDriver常见特殊情况如iframe/弹窗处理(四)
1. iframe 的处理 查找元素必须在对应的 ifarme 中查找,否则是找不到的 // 传入参数为 frame 的序号,从0开始 driver.switchTo().frame(Int inde ...
- vue自定义指令directives使用及生命周期
生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...