TS面向对象

概念

面向对象一个非常重要的思想，面向对象很简单，就是程序之中所有的操作都需要通过对象来完成。

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

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

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

类

创建对象前必须先有类
类决定一个对象的结构（例如DNA决定一个人的结构）

//使用class关键字来定义一个类
/**
 * 对象中主要包含了两个部分：
 *  属性
 *  方法
 */
class Person{
    /**
     * 直接定义的属性是实例属性，需要通过对象的实例去访问：
     *      const per = new Person()
     *      per.name
     * 使用static开头的属性是静态属性（类属性），可以直接通过类去访问的方法
     *      Person.age
     * readonly：只读的属性，无法修改
     */
    //定义实例属性
    readonly name:string ='肥肥柴';
    //在属性前使用static关键词可以定义类属性（静态属性）：不需要创建对象就可以直接使用的
    static age:number=19;
    //定义方法
    sayHello(){
        console.log("hello");
        
    }
}
const per =new Person();
console.log(Person.age);

构造函数

例如

class Dog{
    name="柴柴";
    age=3;
    bark(){
        console.log("汪汪汪");    
    }
}
const dog =new Dog()
const dog1 =new Dog()
console.log(dog);
console.log(dog1);

输出：（这样子输出的狗都是同一条，而我们想要的是有很多条不同的狗）

所以此时在类里面不应该把属性的值设置好，而是由外部调用时传进去的
当前创建了谁，constructor里的this就是谁

class Dog{
    //constructor构造函数，在对象创建时调用
    //调用new Dog()的时候就是调用了constructor
    constructor(){
        console.log(this);
    }
    bark(){
        console.log("汪汪汪");
        
    }
}
const dog =new Dog()

输出：

完整版：

class Dog{
    name:string;
    age:number;
    //constructor构造函数，在对象创建时调用
    //调用new Dog()的时候就是调用了constructor
    constructor(name:string,age:number){
        //在实例方法中，this就表示当前的实例，表示dog1、dog2...不同的dog对象
        //在构造函数中当前对象就是当前新建的那个对象
        //可以通过this向新建的对象中添加属性
        console.log(this);
        this.name=name;
        this.age=age;
    }
    bark(){
        console.log("汪汪汪");
    }
}
const dog1 =new Dog("柴柴1",6)
const dog2 =new Dog("柴柴2",6)

继承–>

ts会检查不同文件当中变量名的重复，为了解决这个问题，可以使用立即执行函数，等于所有的变量创建在单独的作用域当中，避免名字发生冲突

(function(){

    /**
     * Dog extends Animal
     *  -此时，Animal被称为父类，Dog被称为子类
     *  -使用继承后，子类将会拥有父类所有的方法和属性
     *  -通过继承可以将多个类中共有的代码写在一个父类中
     *      这样写一次即可让所有的子类都同时拥有父类中的属性和方法
     *  -如果子类中方法与父类的相同，则子类的方法会覆盖父类的
     */
    class Animal{
        name:string;
        age:number;
        constructor(name:string,age:number){
            this.name=name;
            this.age=age
        }
        sayHello(){
            console.log("xxx");
            
        }
    }
    //定义一个表示狗的类
    //使DOG类继承Animal类
    class Dog extends Animal{
        run(){
            console.log("runrunurnu");
            
        }
    }
    //定义一个表示猫的类
    //使Cat类继承Animal类
    class Cat extends Animal{
    }
    const dog=new Dog("柴柴",1)
    const cat=new Cat("毛毛",2)
    console.log(dog);
})()

1.super：在子类中引用父类实例，直接用super引入

    class Dog extends Animal{

        age: number;

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

        sayHello() {
            // 在类的方法中 super就表示当前类的父类
            //super.sayHello();

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

    }

2.抽象类

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

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

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

父类方法加上了abstract之后，子类中必须重写该方法，否则会报错

接口

接口就是对类的限制，类似于抽象类，唯一的不同点是抽象类中可以定义实际方法，而接口中只能定义抽象方法

(function () {

    // 描述一个对象的类型
    type myType = {
        name: string,
        age: number
    };

    /*
    *   接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
    *       同时接口也可以当成类型声明去使用
    * */
    interface myInterface {
        name: string;
        age: number;
    }

    interface myInterface {
        gender: string;
    }

    // const obj: myInterface = {
    //     name: 'sss',
    //     age: 111,
    //     gender: '男'
    // };

    /*
    * 接口可以在定义类的时候去限制类的结构，
    *   接口中的所有的属性都不能有实际的值
    *   接口只定义对象的结构，而不考虑实际值
    *       在接口中所有的方法都是抽象方法
    *
    * */
    interface myInter{
        name: string;

        sayHello():void;
    }
    /*
    * 定义类时，可以使类去实现一个接口,
    *   实现接口就是使类满足接口的要求
    * */
    class MyClass implements myInter{
        name: string;

        constructor(name: string) {
            this.name = name;
        }
        sayHello(){
            console.log('大家好~~');
        }
    }

})();

属性的封装

当我们将类的属性设置为私密private之后，它不能被外面访问或者修改，想外部访问或者修改需要提供方法
对属性设置了get、set之后，在外部调用这个属性，实际上是调用该属性的方法

(function (){
    // 定义一个表示人的类
    class Person{
        // TS可以在属性前添加属性的修饰符
        /*
        *   public 修饰的属性可以在任意位置访问（修改） 默认值
        *   private 私有属性，私有属性只能在类内部进行访问（修改）
        *       - 通过在类中添加方法使得私有属性可以被外部访问
        *   protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
        *
        * */
        private _name: string;
        private _age: number;

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

        /*
        *   getter方法用来读取属性
        *   setter方法用来设置属性
        *       - 它们被称为属性的存取器
        * */

        // 定义方法，用来获取name属性
        // getName(){
        //     return this._name;
        // }
        //
        // // 定义方法，用来设置name属性
        // setName(value: string){
        //     this._name = value;
        // }
        //
        // getAge(){
        //     return this._age;
        // }
        //
        // setAge(value: number){
        //     // 判断年龄是否合法
        //     if(value >= 0){
        //         this._age = value;
        //     }
        // }

        // TS中设置getter方法的方式
        get name(){
            // console.log('get name()执行了！！');
            return this._name;
        }

        set name(value){
            this._name = value;
        }

        get age(){
            return this._age;
        }

        set age(value){
            if(value >= 0){
                this._age = value
            }
        }
    }

    const per = new Person('孙悟空', 18);

    /*
    * 现在属性是在对象中设置的，属性可以任意的被修改,
    *   属性可以任意被修改将会导致对象中的数据变得非常不安全
    * */

    // per.setName('猪八戒');
    // per.setAge(-33);

    per.name = '猪八戒';
    per.age = -33;

    // console.log(per);


    class A{
        protected num: number;

        constructor(num: number) {
            this.num = num;
        }
    }

    class B extends A{

        test(){
            console.log(this.num);
        }

    }

    const b = new B(123);
    // b.num = 33;


   /* 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) {
        }

    }

    const c = new C('xxx', 111);

    console.log(c);

})();

泛型

/*
function fn(a: any): any{
    return a;
}*/

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

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>('孙悟空');