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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了TypeScript中的面向对象(系列二)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3884字，纯文字阅读大概需要6分钟。

内容图文

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();

 

?

 

内容总结

以上是互联网集市为您收集整理的TypeScript中的面向对象(系列二)全部内容，希望文章能够帮你解决TypeScript中的面向对象(系列二)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

---