【前端】【Ts】类的详解

类 (Class)

在 TypeScript 中，类是面向对象编程的核心概念之一，它提供了一种封装数据和行为的方式。下面详细介绍类的基本概念、访问修饰符以及静态成员与抽象类。

(1) 基本概念

构造函数

构造函数是类中的一个特殊方法，用于创建和初始化类的实例。在 TypeScript 中，构造函数使用 constructor 关键字定义。当创建类的实例时，构造函数会自动被调用。

class Person {
    // 实例属性
    name: string;
    age: number;

    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // 实例方法
    introduce() {
        console.log(`My name is ${this.name} and I am ${this.age} years old.`);
    }
}

// 创建 Person 类的实例
const person = new Person('John', 30);
person.introduce(); // 输出: My name is John and I am 30 years old.

在上述代码中，Person 类有一个构造函数 constructor，它接受两个参数 name 和 age，并将它们赋值给类的实例属性 this.name 和 this.age。

实例属性与方法

实例属性是类的每个实例都拥有的属性，而实例方法是可以在类的实例上调用的方法。在上面的例子中，name 和 age 是实例属性，introduce 是实例方法。

(2) 访问修饰符

访问修饰符用于控制类成员（属性和方法）的可见性，TypeScript 提供了三种访问修饰符：public、private 和 protected。

public（公有）

public 修饰的成员可以在类的内部、类的实例以及子类中被访问。在 TypeScript 中，如果没有显式指定访问修饰符，成员默认是 public 的。

class Animal {
    public name: string;

    constructor(name: string) {
        this.name = name;
    }

    public speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

const animal = new Animal('Dog');
console.log(animal.name); // 可以在类的实例中访问 public 属性
animal.speak(); // 可以在类的实例中调用 public 方法

private（私有）

private 修饰的成员只能在类的内部访问，不能在类的实例或子类中访问。

class Car {
    private engine: string;

    constructor(engine: string) {
        this.engine = engine;
    }

    private startEngine() {
        console.log(`Starting the ${this.engine} engine.`);
    }

    public drive() {
        this.startEngine();
        console.log('Driving the car.');
    }
}

const car = new Car('V8');
// console.log(car.engine); // 报错，不能在类的实例中访问 private 属性
// car.startEngine(); // 报错，不能在类的实例中调用 private 方法
car.drive(); // 可以调用 public 方法，该方法内部可以访问 private 方法

protected（受保护）

protected 修饰的成员可以在类的内部和子类中访问，但不能在类的实例中访问。

class Vehicle {
    protected wheels: number;

    constructor(wheels: number) {
        this.wheels = wheels;
    }

    protected showWheels() {
        console.log(`This vehicle has ${this.wheels} wheels.`);
    }
}

class Bicycle extends Vehicle {
    constructor() {
        super(2);
    }

    public displayWheels() {
        this.showWheels(); // 可以在子类中访问 protected 方法
    }
}

const bicycle = new Bicycle();
// console.log(bicycle.wheels); // 报错，不能在类的实例中访问 protected 属性
// bicycle.showWheels(); // 报错，不能在类的实例中调用 protected 方法
bicycle.displayWheels(); // 可以调用子类的 public 方法，该方法内部访问了 protected 方法

(3) 静态成员与抽象类

静态成员

静态属性和方法属于类本身，而不是类的实例。可以通过类名直接访问静态成员，不需要创建类的实例。

class MathUtils {
    static PI: number = 3.14159;

    static calculateCircleArea(radius: number) {
        return this.PI * radius * radius;
    }
}

console.log(MathUtils.PI); // 可以通过类名直接访问静态属性
const area = MathUtils.calculateCircleArea(5);
console.log(area); // 可以通过类名直接调用静态方法

抽象类

抽象类是一种不能被实例化的类，它主要用于定义抽象方法，这些抽象方法必须在子类中实现。抽象类可以包含普通的属性和方法，也可以包含抽象方法。

abstract class Shape {
    abstract area(): number;

    displayArea() {
        console.log(`The area of this shape is ${this.area()}.`);
    }
}

class Circle extends Shape {
    radius: number;

    constructor(radius: number) {
        super();
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius * this.radius;
    }
}

// const shape = new Shape(); // 报错，不能实例化抽象类
const circle = new Circle(5);
circle.displayArea(); // 调用父类的方法，该方法内部调用了子类实现的抽象方法

在上述代码中，Shape 是一个抽象类，它包含一个抽象方法 area() 和一个普通方法 displayArea()。Circle 类继承自 Shape 类，并实现了 area() 方法。由于 Shape 是抽象类，不能直接实例化，只能实例化其子类。