ts 面向对象

1.什么是面向对象

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

举例来说：

• 操作浏览器要使用window对象

• 操作网页要使用document对象

• 操作控制台要使用console对象

 一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢?这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性,而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

2.类的简介

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

实例：

class Person{
    //定义实例属性
    name: string = '翠花';
    age: number = 18;


    //定义方法
    sayHello(){
        console.log("你好啊！")
    }
}
//new 一个实例
const per = new Person();

console.log(per.name);

per.name = 'tom';
console.log(per.name) 

per.sayHello();

• 使用 readonly 开头的属性表示一个只读的属性无法修改
  • readonly name: string = '翠花';
• 使用 static 的开头的属性是静态属性（类型），可以直接通过类（Person）去访问
• 如果方法以static开头则方法就是类方法，可以直接通过类去调用

 3.构造函数

class  Dog {
    name: string;
    age: number;

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

    bark(){
        alert('汪汪汪！！');
        console.log(this.name);
    }
}
const dog = new Dog('小黑', 2);
const dog2 = new Dog('小白', 3);

console.log(dog);
console.log(dog2);

dog.bark();

4.继承

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

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

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

//定义一个表示狗的类，并使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);
console.log(dog);
dog.sayHello();
dog.run();

const cat = new Cat('咪咪', 3);
console.log(cat);
cat.sayHello();

注：

• 此时，Animal被称为父类，Dog与Cat被称为子类
• 使用继承后，子类将会拥有父类所有的方法和属性
• 通过继承可以将多个类中共有的代码写在一个父类
  • 这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法

  • 如果希望在子类中添加一些父类中没有的属性和方法直接加就行

• 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
  • 这种子类覆盖掉父类方法的形式，我们称为重写        

5.super

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

备注：如果在子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用

6.抽象类

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

    abstract sayHello():void;
}

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

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

const an = new Animal();//无法创建抽象类的实例

备注：

• 以abstract 开头的类是抽象类
  • 抽象类和其他类区别不大，只是不能用来创建对象
  • 抽象类就是专门用来被继承的类
  • 抽象类中可以添加抽象方法

7.接口

接口用来定义一个类结构, 用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用。

1.类型声明

interface myInterface{
    name: string;
    age: number;
}

interface myInterface{
    gender: string;
}

const obj: myInterface = {
    name: '如花',
    age: 18,
    gender: '女'
};

 2.类结构

• 接口可以在定义类的时候去限制类的结构
• 接口中所有的属性都不能有实际的值
• 接口只定义对象的结构，而不考虑实际值
  • 在接口中所有的方法都是抽象

interface myInter{
    name: string;
    sayHello(): void;
}

//  定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求。
class Test implements myInter{
    name: string;
    constructor(name: string){
        this.name = name;
    }

    sayHello(){
        console.log("大家好！");
    }
}

8.属性的封装

现在属性是在对象中设置的，属性可以任意的被修改，属性可任意被修改将会导致对象中的数据变得非常不安全，TS可以在属性前添加属性的修饰符：

• public 修饰的属性可以在任意位置访问（修改） 默认值
• private 私有属性, 私有属性只能在类内部进行访问（修改）
  • 通过再类中添加方法使得私有属性可以被外部访问
• protected 受保护的属性,只能在当前类和当前类的子类中访问(修改)

// 定义一个表示人的类
class Person{
    public _name: string;
    private _age: number;

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

    get name(){ // 读取属性
        return this._name;
    }
    set name(value:string){ // 设置属性
        this._name = value;
    }

    set age(value:number){
        if(value >= 0){
            this._age = value
        }
    }
}
const per = new Person('翠花', 18);

// per._name = '如花';
// per._age = -28;
// console.log(per);

per.name = '芦花';
per.age = -38
console.log(per);

 9.泛指

在定义函数或是类时,如果遇到类型不明确就可以使用泛型

1.函数

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
}

fn3('128');
// fn3(648);
fn3({length: 10});

 2.类

class MyClass<T>{
    name: T;
    constructor(name:T){
        this.name = name;
    }
}

const mc = new MyClass<string>('秋香');