在早期的javascript(es5)开发中,需要使用函数和原型链实现类和继承,从es6开始,引入class关键字,我们可以更加方便地定义和使用类
作为javascript的超集,typescript同样支持使用class关键字,并且可以对类的属性和方法等进行静态类型检测,然而,在javascript开发中,更倾向于函数式编程
- 在react开发中,目前更常用函数组件及与之配合的hook开发模式
- 在vue3开发中,更推荐使用compostion api
但是,在封装某些业务时,类具有更强的封装性,因此我们也需要掌握类的知识
类的定义
在面向对象编程中,类是描述一切事物的基础,包括特有的属性和方法.具体类的定义方式如下:
- 通常使用class关键字来定义类
- 类内部可以声明各种属性,包括类型声明和初始值设定
- 如果没有类型声明,则默认为any类型
- 属性可以有初始值
- 在默认的strictPropertyInitalization模式下,属性必须初始化,否则编译时会报错
- 类可以有自己的构造函数,当使用new关键字创建实例时,构造函数会被调用,另外构造函数不要返回任何值,它默认返回当前创建的实例
- 类可以有自己的函数,这些函数称为方法
可以看到,首先我们定义了一个Account对象然后使用class关键字定义AccountStore类,为该类定义了dataList属性,dataList是一个Account
对象的数组,用于存储账户的集合,然后我们添加了一个构造函数constructor,构造函数里执行了makeAutoObservable(this):这行代码使类的所有属性和方法变为可观察的,接下来我们定义一个reset方法,这个reset方法用来重置dataList数组
类的继承
面向对象编程中的一个重要特性就是继承,继承不仅可以减少代码量,而且是多态的使用前提,在javascript中使用extends关键字实现继承,然后在子类中使用super访问父类
可以看到,在定义Router类时,使用extends关键字继承React.Component,在Router构造器中我们调用父类的构造函数,传递`props参数`
类的多态
面向对象编程的三大特性:继承,封装,多态,多态的定义:不同数据类型在进行同一个操作时表现出不同的行为,这就是多态的体现
成员修饰符
在typescript中可以使用三种修饰符来控制类的属性和方法的可见性,分别是public,private,protected
- public: 默认的修饰符,它表示属性或方法是公有的,可以在类的内部和外部被访问
- private: 表示属性或方法是私有的,只有类的内部或及其子类中被访问,外部无法访问
- protected: 表示属性或方法可以增强类的封装性,只能在类的内部及其子类中被访问,外部无法访问
使用private和protected修饰符可以增强类的封装性,避免属性和方法被外部访问和修改
只读属性
如果我们不希望外部随意修改某一属性,而是希望在确定值后直接使用,那么可以使用readonly,在代码中readonly一般配合private一起使用,以下是对axios请求封装一个简单的示例
getter/setter
对于一些私有属性,我们不能直接访问,或者对于某些属性,我们想要监听其获取和设置的过程,这时,可以使用getter和setter访问器.
静态成员
在类中定义的属性和方法都属于对象级别的,但在开发中,有时也需要定义类级别的属性和方法,也就是类的静态成员,在ts中,可以使用static来定义类的静态成员.
抽象类
在面向对象编程中,继承和多态是密切相关的,为了定义通用的调用接口,我们通常会让调用者传入父类,通过多态实现更加灵活的调用方式,通过多态实现更加灵活的调用方式.父类本身可能不需要对某些方法进行具体实现,这时可以将这些方法定义为抽象方法
可以看到,抽象类Shape具有以下特点
- Shape抽象类不能被实例化,也就是说,无法通过new关键字创建对象
- Shape中的getArea抽象方法必须由子类Rectangle和Circle实现,否则该类必须也是一个抽象类
类作为数据类型使用
类不仅可以用于创建对象,还可以用作一种数据类型.