TypeScript 中类的定义 & 继承 & 多态

1.修饰符

ts里面定义属性的时候给我们提供了三种修饰符:
  • public: 共有类型,在当前类里面、子类、类外部都可以访问

  • private: 私有类型,在当前类里面可以访问,子类、类外部不能访问

  • protected: 保护类型,在当前类里面、子类可以访问,类外部不能访问

    注:属性如果没有显示声明修饰符,则默认为 public

2.定义

使用 class 关键字定义类。
// 定义 Person 类
class Person {
    name: string;  // 属性,前面省略了 public 修饰符
    // public name: string;  // 等同于上一行效果

    // 构造函数,实例化类的时候触发
    constructor(name: string) {
        this.name = name;
    }

    getName(): string {
        return this.name;
    }

    setName(name:string): void {
        this.name = name;
    }
}

var p = new Person('张三');

console.log( p.getName() );  // 张三

p.setName('李四');

console.log( p.getName() );  // 李四

3.静态属性 & 静态方法

通过 static 关键字声明静态属性 & 静态方法,通过 类名.属性名 或者 类名.方法名 直接调用。
class Person {
    public name: string;
    public age: number = 20;

    // 静态属性
    static sex = '男';
    
    constructor(name: string) {
        this.name = name;
    }

    run() {
        console.log(`${this.name}在跑步。`);
    }

    // 静态方法
    static print() {
        console.log('这是静态方法 print .');
        // 静态方法里面没法直接调用类里面的属性
        console.log(this.age);  // undefined
        // 静态属性调用
        console.log(Person.sex);  // 男
    }
}
var p = new Person('张三');
p.run();  // 张三在跑步。
// 静态方法调用
Person.print();

4.继承

使用 extends 和 super 关键字实现继承。
// 定义父类 Person
class Person {
    name: string;

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

    run(): void {
        console.log(`${this.name}在跑步。`);
    }
}

// 子类 Web 继承 父类 Person
class Web extends Person {
    constructor(name: string) {
        // 初始化父类的构造函数
        super(name);
    }

    work() {
        console.log(`${this.name}在工作。`);
    }
}

var w = new Web('李四');
w.run();  // 李四在跑步。
w.work();  // 李四在工作。

5.多态

多态:父类定义一个方法不去实现,让继承它的子类去实现,每一个子类有不同的表现。多态属于继承。
// 父类 Animal
class Animal {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
	// 定义一个方法,具体不做实现,子类自己实现
    eat() {
        console.log('function: eat');
    }
}

// 子类 Dog
class Dog  extends Animal {
    constructor(name: string) {
        super(name);
    }
    // 自行实现父类定义的 eat 方法
    eat() {
        console.log(`${this.name}吃肉。`);
    }
}

// 子类 Cat
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
    // 自行实现父类定义的 eat 方法
    eat() {
        console.log(`${this.name}吃鱼。`);
    }
}

var d = new Dog('小狗');
d.eat();  // 小狗吃肉。
var c = new Cat('小猫');
c.eat();  // 小猫吃鱼。

6.抽象类 & 抽象方法

使用 abstract 关键字定义抽象类和抽象方法,抽象方法只能放在抽象类里面。
ts 中的抽象类,是提供其他类继承的基类,不能直接被实例化。抽象类中的抽象方法不包含具体实现且必须在派生类中实现。
抽象类和抽象方法用来定义标准。
// 抽象类 Animal
abstract class Animal {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
    // 抽象方法,子类必须实现这个方法
    abstract eat(): any;

    // 普通方法,不要求子类必须实现
    sleep() {
        console.log(`${this.name}在睡觉。`);
    }
}

// var a = new Animal();  // error: 无法创建抽象类的实例

// 子类 Dog 继承 抽象类 Animal
class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    // 抽象类的子类必须实现抽象类里的抽象方法
    // 如果不实现,则会报错
    eat() {
        console.log(`${this.name}吃肉。`);
    }
}

var d = new Dog('小狗');
d.eat();  // 小狗吃肉。

你可能感兴趣的:(web前端)