面向对象编程：类、继承、接口与泛型详解,-优快云博客

简而言之就是程序之中所有的操作都需要通过对象来完成。

- 举例来说：

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

- 操作网页要使用document对象

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

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

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

1、类（class）

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

对象：主要作用就是存储属性和方法

定义类：

语法

class 类名 {

属性名: 类型;

//constructor:构造函数，会在对象创建的时候调用

constructor(参数: 类型){

this.属性名 = 参数;

}

方法名(){

....

}

示例：

class Person{

name: string ; //这种定义的属性被称为实例属性必须要创建对象实例才能用下面代码创建实例访问p.name

age: number;

constructor(name: string, age: number){

this.name = name; //this：表示当前的对象实例

static this.age = age; //前面加static被称为静态属性不需要创建实例就能访问 Person.age

readonly this.sex= sex; //前面加readonly 意思是只读属性

}

sayHello(){ //方法前面加static ，意思跟属性一样的

console.log(`大家好，我是${this.name}`);

}

}

使用类：

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

p.sayHello();

2、继承和重写extends，

通过继承可以将其他类中的属性和方法引入到当前类中

示例：extends

class Animal{

name: string;

age: number;

constructor(name: string, age: number){

this.name = name;

this.age = age;

}

bark(){

console.log(‘动物在叫！’);

}

}

class Dog extends Animal{ //Dog 这个类就继承了上面Animal的类，动物的属性和方法Dog 类都可以使用，Animal类称为父类，Dog类称为子类

//通过继承可以在不修改类的情况下完成对类的扩展比如back这个方法是Dog类独有的。

bark(){

console.log(`${this.name}在汪汪叫！`);

}

}

const dog = new Dog('旺财', 4);

dog.bark();

重写：发生继承时，如果子类中的方法和父类的方法名一样时，会替换掉父类中的方法，这就称为方法的重写

3、super

在类的方法中，super就表示当前的父类

class Cat extends Animal {

bark(){

console.log(`999`);

super back()

}

}

上面说了，当子类的方法与父类同名时，会用子类的方法，但是写了super，表示还是用父类的方法

4、抽象类（abstract class）

以abstract开头的是抽象类，与其他类一样，只是不能用来创建对象，就是来专门被继承的类,

抽象类可以添加抽象方法

abstract class Animal{ // 这是抽象类

abstract run(): void; //这是抽象方法，没有具体的方法体，抽象方法只能定义在抽象类中，子类必须对抽象方法重写。：void表示函数返回没空值

bark(){

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

}

}

class Dog extends Animals{

run(){ //这里必须要重写run方法，因为Dog类继承了Animal类，Animal类里面有抽象方法，子类必须对抽象方法重写

console.log('狗在跑~');

}

}

5、接口（Interface）

接口的作用类似于抽象类，接口是对象的属性和方法的抽象，都是没有实际值的。接口主要负责定义一个类的结构，对象只有包含接口中定义的所有属性和方法时才能匹配接口。

多了或者少了属性是不允许的
可选属性: ?
只读属性: readonly

interface Person{

name: string;

         age?: number; //可选属性

        [propName: string]: any; //任意属性

sayHello():void; //sayHello方法就没有具体的实际值，方法都是抽象的方法

}

//用的时候要具体给出属性和方法

class Student implements Person{

      name: string;

constructor(name: string) {

this.name=name

}

sayHello() {

console.log('大家好，我是'+this.name);

}

}

vue3中用接口定义数据类型

5、属性的封装

避免类里面的属性随意的更改，比如年龄，金钱等，前面说了可以在属性前面加readonly,只读属性，除了这个还有其他的

TS中属性具有三种修饰符：

- public（默认值），修饰的属性可以再任意的位置访问或修改

- private ，私有属性，只能在类内部访问修改，外部想使用，可以通过在类中添加方法将私有属性被外部访问

- protected ，受保护的属性，只能在当前类或子类中使用。可以在类中修改

class Person{

private name: string;

public age: number;

constructor(name, age:){

this.name = name;

this.age = age;

}

                //定义方法获取name，

                getName(){

                        return this.name

                 }

                 //定义方法修改name，

                setName(value:number){

//可以在这里面写自己其他的判断，

this.name=value

                 }

sayHello(){

console.log(`大家好，我是${this.name}`);

}

}

class Employee extends Person{

constructor(name: string, age: number){

super(name, age);

this.name = name; //子类中可以修改

}

}

5、泛型

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

例子：

function test(arg: any): any{

return arg;

}

上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型

使用泛型：

function test<T>(arg: T): T{

return arg;

}

这里的```<T>```就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。

方式一（直接使用）：

test(10)

使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

方式二（指定类型）：

test<number>(10)

也可以在函数后手动指定泛型test(10)：number

可以同时指定多个泛型，泛型间使用逗号隔开：

function test<T, K>(a: T, b: K): K{

return b;

}

test<number, string>(10, "hello");

使用泛型时，完全可以将泛型当成是一个普通的类去使用

类中同样可以使用泛型：

class MyClass<T>{

prop: T;

constructor(prop: T){

this.prop = prop;

}

}

class MyClass<T>{

name: T;

constructor(name: T){

this.name= name;

}

}

const mc=Myclass<string>(“小猪”)