微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

TypeScript中的面向对象(系列二)

1.类的简介

1.类的简介.ts

// 使用class关键字来定义一个类
/*
*   对象中主要包含了两个部分:
*       属性
*       方法
*/

class Person {
    /*
*   直接定义的属性是实例属性,需要通过对象的实例去访问:
*       const per = new Person();
*       per.name
*
*   使用static开头的属性是静态属性(类属性),可以直接通过类去访问
*       Person.age
*
*   readonly开头的属性表示一个只读的属性无法修改
*/

    /*
        定义实例属性(new出实例之后才能访问的属性)
    */
    // name: string = '孙悟空';
    // age:number = 18;

    /*
        定义静态属性:在属性前使用static关键字可以定义类属性(静态属性)
    */
    // static age: number = 18;

    /*
        readonly开头的属性表示一个只读的属性无法修改
    */
    // readonly name: string = '孙悟空';

    name: string = '孙悟空';
    age:number = 18;

    /*
    * 定义方法:如果方法以static开头则方法就是类方法,可以直接通过类去调用
    */
    // 实例方法
    sayHello(){
        console.log('Hello 大家好!');
    }

    // 类方法
    static sayHello(){
        console.log('Hello 大家好!');
    }
}

/* 创建实例 */
const per = new Person();

/* 属性 */

// 访问实例属性
console.log(per);
console.log(per.name, per.age);

// 访问静态(类)属性
// console.log(Person.age);

// 如果是readonly类型,则无法修改
// 下面的代码报错
// per.name = 'tom';

/* 方法 */

// 访问实例方法
per.sayHello();

// 访问静态方法
Person.sayHello();

 

2.构造函数constructor

2_构造函数.ts

class Dog {
    name: string;
    age: number;

    // constructor 被称为构造函数
    // 构造函数会在实例对象创建调用
    // TS中仅能创建一个构造函数!
    constructor(name: string, age: number) {
        // 在实例方法中,this就表示当前当前的实例
        // 在构造函数中的当前对象就是新建的那个对象
        // 可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }

    bark() {
        // alert('汪汪汪!');
        // 在方法中可以通过this来表示当前调用方法的对象
        console.log(this.name);  //小白
    }
}

const dog = new Dog('小黑', 4);
const dog2 = new Dog('小白', 2);

console.log(dog);  //{name:'小黑',age:4}
console.log(dog2);

dog2.bark();

 

3.继承

3_继承.ts

// 定义一个Animal类
    class Animal {
        name: string;
        age: number;

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

        sayHello() {
            console.log('动物在叫~');
        }
    }

    /*
    * Dog extends Animal
    *   - 此时,Animal被称为父类,Dog被称为子类
    *   - 使用继承后,子类将会拥有父类所有的方法属性
    *   - 通过继承可以将多个类中共有的代码写在一个父类中,
    *       这样只需要写一次即可让所有的子类都同时拥有父类中的属性方法
    *       如果希望在子类中添加一些父类中没有的属性方法直接加就行
    *   - 如果在子类中添加了和父类相同的方法,则子类方法会覆盖掉父类方法
    *       这种子类覆盖掉父类方法的形式,我们称为方法重写
    *
    */
    // 定义一个表示狗的类
    // 使Dog类继承Animal类
    class Dog extends Animal {
        run() {
            console.log(`${this.name}在跑~~~`);
        }

        sayHello() {
            console.log('汪汪汪汪!');
        }
    }

    // 定义一个表示猫的类
    // 使Cat类继承Animal类
    class Cat extends Animal {
        sayHello() {
            console.log('喵喵喵喵!');
        }
    }

    const dog = new Dog('旺财', 5);
    const cat = new Cat('咪咪', 3);
    console.log(dog);
    dog.sayHello();
    dog.run();
    console.log(cat);
    cat.sayHello();

 

4.super

super.ts

class Animal {
        name: string;

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

        sayHello() {
            console.log('动物在叫~');
        }
    }

    class Dog extends Animal {
        age: number;

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

        sayHello() {
            // 在类的方法中 super就表示当前类的父类
            //super.sayHello();
            console.log('汪汪汪汪!');
        }
    }

    const dog = new Dog('旺财', 3);
    dog.sayHello();

 

5.抽象类

5抽象类.ts

/*
    *   以abstract开头的类是抽象类,
    *       抽象类和其他类区别不大,只是不能用来创建对象
    *       抽象类就是专门用来被继承的类
    *
    *       抽象类中可以添加抽象方法
    */
    abstract class Animal {
        name: string;

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

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

    // 下面的代码会报错
    // const an = new Animal();

    class Dog extends Animal {
        sayHello() {
            console.log('汪汪汪汪!');
        }
    }

    class Cat extends Animal {
        sayHello() {
            console.log('喵喵喵喵!');
        }
    }

    const dog = new Dog('旺财');
    dog.sayHello();

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐