class类

1.类的简介

/*
* js中使用class关键字定义一个类
* 主要包含两个部分(属性及方法)
* 定义属性
* 前面加 readonly 表示只读属性,无法修改
* 直接定义的属性是实例属性,需要通过对象的实例去访问,如 console.log(per.name);
* 在属性前使用static关键字可以定义类属性(静态属性),可以直接访问,如 console.log(Person.age);
* 定义方法
* 同理 直接定义的方法是实例方法,需要通过对象的实例去访问,如 per.say();
* 在方法前使用static关键字可以定义类方法(静态方法),可以直接访问,如 Person.say();
 */
class Person {
    //定义属性
    //直接定义的属性是实例属性,需要通过对象的实例去访问
    //定义实例属性,必须new之后才可访问 如 console.log(per.name);
    a: string = "我是实例属性";
    //在属性前使用static关键字可以定义类属性(静态属性),只能直接访问,如 
    console.log(Person.age);
    static b: string = "我是静态属性";
    //前面加 readonly 表示只读属性,无法修改
    readonly c: string = "我是只读属性";
    static readonly d: string = "我是只读静态属性";

    //定义方法
    // 实例方法,只能通过对象的实例去访问,如 per.say();
    fun1(): void {
        console.log("我是实例方法!");
    }

    // 在方法前使用static关键字可以定义类方法(静态方法),只能直接访问,如 Person.say()
    static fun2(): void {
        console.log("我是静态方法!");
    }
}

const per = new Person();
per.fun1();// 我是实例方法!
Person.fun2();// 我是静态方法!
console.log(per.a);//我是实例属性
per.a = "我是实例属性--小明";
console.log(per.a);//我是实例属性--小明
console.log(Person.b);//我是静态属性
Person.b = "我是静态属性--小明";
console.log(Person.b);//我是静态属性--小明

2.构造函数

/*
* 构造函数
 */
class Animal {
    name: string;
    voice: string;
    age: number;

    //constructor 构造函数,对象创建时调用
    constructor(props: { name: string, [propName: string]: any }) {
        //在实例方法中,this表示当前的实例
        this.name = props.name;
        this.age = props.age;
        this.voice = props.voice;
    }

    say(): string {
        return this.name + `(${this.age + '岁'}):` + this.voice;
    }
}

const dog = new Animal({name: '狗', age: 2, voice: '汪汪汪'});
const cat = new Animal({name: '猫', age: 1, voice: '喵喵喵'});
console.log(dog.say());
console.log(cat.say());

3.继承

/*
* 继承
* 使用继承后,子类将拥有父类所有的方法和属性
* 子类覆盖掉父类方法的形式,称为方法重写
 */
(function () {
    //父类
    class Animal {
        name: string;
        age: number;
        title: string;

        //constructor 构造函数,对象创建时调用
        constructor(props: { name: string, age: number, title: string }) {
            this.name = props.name;
            this.age = props.age;
            this.title = props.title;
        }

        say(): void {
            console.log(this.name + this.title);
        }
    }

    //子类
    class Dog extends Animal {
        color: string = "是白色的";
        
        run(): void {
            console.log(this.name + this.color);
        }
    }

    //子类
    class Cat extends Animal {
        color: string;

        //如果在子类中写了构造函数,在子类的构造函数中必须对父类的构造函数进行调用super();
        constructor(props: { name: string, age: number, title: string }) {
            super(props);
            this.color="是金色的";
        }

        test(): void {
            //在类的方法中 super实际表示当前类的父类
            super.say();
        }
    }

    const dog = new Dog({name: '小狗', age: 3, title: '汪汪汪~'});
    const cat = new Cat({name: '小猫', age: 2, title: '喵喵喵~'});
    cat.test();
    // dog.run();
})();

4.抽象类

/*
* 抽象类
* 以 abstract 开头的是抽象类
* 抽象类不能用来创建对象
* 专门用来继承的类
* 抽象类中可以添加抽象方法
 */
(function () {
    //父类
    abstract class Animal {
        name: string;
        age: number;
        title: string;

        //constructor 构造函数,对象创建时调用
        constructor(props: { name: string, age: number, title: string }) {
            this.name = props.name;
            this.age = props.age;
            this.title = props.title;
        }

        say(): void {
            console.log(this.name + this.title);
        }

        //定义一个抽象方法
        //抽象方法以abstract开头,并且没有方法体
        // 抽象方法只能定义在抽象类中,并且子类必须得对抽象方法进行重写
        abstract make(): void;
    }

    //子类
    class Cat extends Animal {
        color: string;

        //如果在子类中写了构造函数,在子类的构造函数中必须对父类的构造函数进行调用super();
        constructor(props: { name: string, age: number, title: string }) {
            super(props);
            this.color = "是金色的";
        }

        test(): void {
            //在类的方法中 super实际表示当前类的父类
            super.say();
        }

        //对父类抽象方法进行重写
        make(): void {
            console.log("干饭");
        }
    }

    const cat = new Cat({name: '小猫', age: 2, title: '喵喵喵~'});
    cat.test();
})();