vue3第三十七节（TS 之 class 类实现及使用）

引言 ：面相对象编程在我们工作中必须同时也是不可或缺的一部分，想要对JavaScript | TypeScript 有更加深刻的理解应用，我们需要充分学习应用

1、类的基本用途

在TS中 类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性，比如 类、接口等。 具体包含以下方面 ： 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。 构造函数 − 类实例化时调用，可以为类的对象分配内存。 方法 − 方法为对象要执行的操作

class Person {
    // 变量
    name: string;
    age: number;
    // 静态变量
    static other: string = '静态变量';
    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    // 方法
    // 静态变量只能在静态方法中使用
    static say(word: string): void {
        console.log(this.other + '说话' + word)
    }
    play(things: string): void {
        console.log(this.name + ' ' + things)
    }
} 

2、类的继承

类的继承是通过 extend 来实现的 子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承 。 其中：父类称为：超类|基类 子类成为：派生类

注意：TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承泪如（B 继承 A，C 继承 B）。

class Person1 extends Person {
    like: string;
    constructor(name: string, age: number, like: string) {
        // 调用父类的构造函数
        super(name, age); 
        this.like = like;
    }
    // 子类中有父类同名的方法时，则会重写父类中的方法
    play(things: string):void {
        console.log('play', things);
    }
}

3、多重继承

Person1 继承了 Person, 而 Student 又继承了 Person1 // 子类 继承 父类2

class Student extends Person1 {
    public grade: string;
  
    constructor(name: string, age: number, grade: string) {
      super(name, age, grade); // super 引用父类的构造函数
      this.grade = grade;
    }
  
    // 方法重写：子类方法名和父类相同，将重写父类方法
    play(ball: string): void {
      console.log(this.name + "在玩" + ball);
    }
  }

4、static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

如父类 Person 中定义的 other属性，say方法 都是静态成员

其他关键字还有 ： public(默认)：公有，可以在任何地方被访问 protected: 受保护，可以被其自身以及其子类访问 private: 私有，只能被其定义所在的类访问。 readonly: 可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化

class StudentA {
    public name: string;
    protected age: number;
    private love: string;
  
    constructor(name: string, age: number, love: string) {
      this.name = name;
      this.age = age;
      this.love = love;
    }
    say(): void {
      console.log("hello world");
    }
  }
  

5、类实现 通过 implements 实现接口

可以使用一个 implements 子句来检查一个类，是否满足了一个特定的接口

注意： 实现一个带有可选属性的接口并不能创建该属性，只要一个接口继承了某个类, 那么就会继承这个类中所有的属性和方法,但是只会继承属性和方法的声明, 不会继承属 性和方法实现

**与`extends`的区别​**    

extends: 继承某个类，继承之后可以使用父类的方法，也可以重写父类的方法
implements:实现某个接口，必须重写才可以使用


// 定义接口规范

interface PersonE {
    name: string;
    age?: number; // 在接口的成员变量后加 ? 代表此成员变量可不用被类实现
    eat(food: string): void; // 在接口中可不写方法体
  }

// 定义类实现接口（）

 class StudentE implements PersonE {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
    // 在类中必写方法体
    eat(food: string): void {
      console.log(this.name + "吃" + food);
    }
  }

应用

  let alias = new StudentE("alias");
  console.log(alias);
  alias.eat("玉米糁");

7、抽象类 关键字：abstract

A/抽象类不可以被实例化，只能被继承
B/抽象类中定义的抽象方法必须被继承它的子类重写
C/抽象类中的方法和变量可以是抽象的（被 `abstract` 修饰）也可以是不抽象的，但接口的方法和变量都是抽象的（都要被重写）
D/在抽象类中的抽象方法不写方法体
E/一个类只能继承一个抽象类

//  定义抽象类

abstract class PersonF {
  name: string;
  age?: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  // 非抽象方法
eat(food: string): void {
    console.log(this.name + "吃" + food);
  }
  // 抽象方法，无方法体
  abstract play(ball: string): void;
}

// 定义子类继承抽象类

class StudentF extends PersonF {
  sex: string;
  constructor(name: string, age: number, sex: string) {
    super(name, age);
    this.name = name;
    this.sex = sex;
  }
  // 在子类中必须重写抽象类的抽象方法
  play(ball: string): void {
    console.log(this.name + "玩" + ball);
  }
}

let alias = new Student("alias", 18, "汉子");
console.log(alias);
alias.eat("香蕉");
alias.play("象棋");