类的使用
在早期的JavaScript开发中我们需要通过函数和原型链来实现类和继承,但是从ES6开始,引入了class、extends关键字,可以更加方便的使用类以及实现继承。而TypeScript作为JavaScript的超集,也是支持使用class关键字的并且还可以对类的属性和方法等进行类型检测。但是实际上在JavaScript的开发过程中,我们更加习惯于函数式编程:
(1)在React开发中,目前更多使用的是函数式组件以及结合Hook的开发模式。
(2)在Vue3开发中,目前也更加推崇使用 Composition API,其实也是参考react的。
但是在封装某些业务的时候,类具有更强大的封装性,所以我们也还是需要一下掌握它们。
类的基本使用
当我们定义好一个类后,我们便可以使用下面两种方式去给类添加属性了,但是初始化时是有以下两种方式的:
(1)定义属性时声明类型的同时初始化。
class Person {
name: string = "kobe"
age: number = "24"
eating() {
console.log(this.name + " eating")
}
}
const p = new Person()
console.log(p.name)
console.log(p.age)
p.eating()
(2)通过constructor构造函数来初始化
class Person {
//可以给属性添加类型,默认情况下为any类型
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
eating() {
console.log(this.name + " eating")
}
}
const p = new Person("why", 18)
console.log(p.name)
console.log(p.age)
p.eating()
类的继承
面向对象的其中一大特性就是继承,继承不仅仅可以减少我们的代码量,也是多态的使用前提,我们使用extends关键字来实现继承,子类中使用super来访问父类,当我们使用上面第2种方式去初始化数据时,那么父类便可以通过在子类中使用super()去调用父类的constructor从而初始化父类中的属性,当然了我们也可以利用super再次调用或者重写父类中的方法。
//父类
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
eating()