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(); // 打印:咪咪在叫

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

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

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

三、子类中方法的重写

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

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

相关推荐
sen_shan5 分钟前
《Vue项目开发实战》第八章:组件封装--vxeGrid
前端·javascript·vue.js
五点六六六6 分钟前
双非同学校招笔记——离开字节入职小📕
前端·面试·程序员
IT_陈寒7 分钟前
Redis实战:5个高频应用场景下的性能优化技巧,让你的QPS提升50%
前端·人工智能·后端
2***57428 分钟前
Vue项目国际化实践
前端·javascript·vue.js
我也爱吃馄饨9 分钟前
写的webpack插件如何适配CommonJs项目和EsModule项目
java·前端·webpack
全马必破三9 分钟前
HTML常考知识点
前端·html
3秒一个大20 分钟前
JavaScript 作用域:从执行机制到块级作用域的演进
javascript
OLong23 分钟前
忘掉"发请求",声明你要的数据:TanStack Query 带来的思维革命
前端
琦遇24 分钟前
Vue3使用vuedraggable实现拖拽排序
前端
银月流苏25 分钟前
Vue 深度选择器 `:deep` 使用说明
前端