typescript的学习(二) 面向对象

面向对象

面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

• 举例来说：
  • 操作浏览器要使用window对象
  • 操作网页要使用document对象
  • 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

类

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

创建类

   class Person{
       name: string;
       age: number;
   
       constructor(name: string, age: number){
           this.name = name;
           this.age = age;
       }
   
       sayHello(){
           console.log(`大家好，我是${this.name}`);
       }
   }

使用类

   const p = new Person('孙悟空', 18);
   p.sayHello();

构造函数

class Dog{
   name: string;
   age: number;

   // constructor 被称为构造函数
   //  构造函数会在对象创建时调用
   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);
// console.log(dog2);

dog2.bark();

继承

(function (){

    // 定义一个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();
})();

super

(function () {
    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();
})();

抽象类

(function () {

    /*
    *   以abstract开头的类是抽象类，
    *       抽象类和其他类区别不大，只是不能用来创建对象
    *       抽象类就是专门用来被继承的类
    *       抽象类中可以添加抽象方法
    * */
    abstract class Animal {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        // 定义一个抽象方法
        // 抽象方法使用 abstract开头，没有方法体
        // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        abstract sayHello():void;
    }

    class Dog extends Animal{

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

    }

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

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

属性的封装

• public 修饰的属性可以在任意位置访问（修改） 默认值
• private 私有属性，私有属性只能在类内部进行访问（修改）
• 通过在类中添加方法使得私有属性可以被外部访问
• protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
• getter方法用来读取属性
• setter方法用来设置属性 它们被称为属性的存取器

  // 定义方法，用来获取name属性
        // getName(){
        //     return this._name;
        // }
        //
        // // 定义方法，用来设置name属性
        // setName(value: string){
        //     this._name = value;
        // }
// TS中设置getter方法的方式
//简写方式
        get name(){
            // console.log('get name()执行了！！');
            return this._name;
        }

        set name(value){
            this._name = value;
        }
 /* class C{
        name: string;
        age: number
        // 可以直接将属性定义在构造函数中
        constructor(name: string, age: number) {
            this.name = name;
             this.age = age;
        }

    }*/
    class C{
        // 可以直接将属性定义在构造函数中
        constructor(public name: string, public age: number) {
        }
    }

泛型

/*
*   在定义函数或是类时，如果遇到类型不明确就可以使用泛型
*
* */
function fn<T>(a: T): T{
    return a;
}
// 可以直接调用具有泛型的函数
let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>('hello'); // 指定泛型

// 泛型可以同时指定多个
function fn2<T, K>(a: T, b: K):T{
    console.log(b);
    return a;
}
fn2<number, string>(123, 'hello');
interface Inter{
    length: number;
}

// T extends Inter 表示泛型T必须时Inter实现类（子类）
function fn3<T extends Inter>(a: T): number{
    return a.length;
}
class MyClass<T>{
    name: T;
    constructor(name: T) {
        this.name = name;
    }
}
const mc = new MyClass<string>('孙悟空');