TS中Class类的继承

我们有下面一个代码,其中创建了一个Dog类和Cat类,这两个类中都有姓名和年龄属性和bark方法

TypeScript 复制代码
class Dog {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name + "汪汪汪");
  }
}

class Cat{
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name + "喵喵喵");
  }
}

let dog = new Dog("旺财", 5);
let cat = new Cat("咪咪", 3);
dog.bark();  // 打印:旺财汪汪汪
cat.bark();  // 打印:咪咪喵喵喵

但是我们把一个代码写了两次,冗余度增加。

一、使用extends关键字继承父类

我们可以将上面两个类的公共特征提取出来组成一个新的Animal类。

然后在创建Dog类和Cat类的时候继承Animal类即可。

子类继承父类的语法格式如下:

class 子类 extends 父类 { }

TypeScript 复制代码
class Animal {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name + "在叫");
  }
}

class Dog extends Animal {}

class Cat extends Animal {}

let dog = new Dog("旺财", 5);
let cat = new Cat("咪咪", 3);
dog.bark(); // 打印:旺财在叫
cat.bark(); // 打印:咪咪在叫

通过继承类可以将多个类中共有的代码写在一个父类中,这样只需要写一次即可让所有的子类拥有父类的属性和方法。

二、子类中属性和方法的添加

如果希望在子类中添加一些父类没有的属性和方法,直接在子类中添加即可。

三、子类中方法的重写

如果子类中添加了和父类相同的方法,子类的方法会覆盖掉父类的方法。

这种子类覆盖掉父类的方法的形式,我们称之为重写。

相关推荐
橙序员小站4 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名7 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫7 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊7 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter7 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折8 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_8 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial8 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu8 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端
jiayu8 小时前
Angular6学习笔记13:HTTP(3)
前端