在es6之前,要想实现JS的服用方法或组件,需要使用函数,原型和原型链等方法来实现。在es6中引入了JS类的概念,我们使用JS也能基于面向对象的方式使用和构建类。在TS中也允许使用es6的类的写法,最终编译为JS代码允许在浏览器。
一.类的定义
和其他面向对象语言的语法一样,使用class关键字定义一个类。类中this表示此当前对象本身,如下的this.name就表示当前类的name属性。
//定义一个'人'的类 Person
class Person{
name:string; //属性
constructor(name:string){ //构造函数 在实例化类的时候自动调用(初始化数据)
this.name = name;
}
eat():string{ //行为
return `${this.name}干饭了`
}
}
//实例化Person类
let p = new Person('狗蛋');
console.log(p.eat()) //狗蛋干饭了
二.类的继承
TS中使用extends关键字继承,super()表父类对象。创建子类后在constructor构造函数中首先需要调用父类构造函数super() 完成父类初始化,然后再对子类初始化。
子类继承父类后可以执行父类方法和子类方法 如果子类中重写了父类的方法,就执行子类的方法。(在原型链中向上找,没有找到子类的方法就找父类的方法)
//定义一个Student子类继承Person类
class Student extends Person{
stu_num:number; //子类的新属性
constructor(name:string,stu_num:number){
super(name); //初始化父类的构造函数
this.stu_num = stu_num //初始化子类
}
study():string{ //子类的新行为
return `${this.name}开始学习了`
}
}
//实例化Person类
let s = new Student('学霸哥');
//调用父类的方法
console.log(s.eat()) //学霸哥干饭了
//调用自己的方法
console.log(s.study()) //学霸哥开始学习了
三.类的修饰符
在TS类中提供了三种属性访问权限修饰符
public : 公有 在当前类里面、 子类 、类外面都可以访问(不加修饰符默认都是public)
private :私有 在当前类里面可以访问,子类、类外部都没法访问
protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问
在上面代码中,类中的属性默认为public修饰,在类(包括子类)里面和外面都可以访问。
这里是比较好理解的,不再赘述了。。。。。。
四.静态属性和方法
在类中使用static关键字定义是否是静态属性或静态方法。静态方法里面只可以调用类里面静态的属性。静态属性的访问和静态方法的调用要使用类名调用,不能使用实例化对象调用。
class Person{
static name:string; //静态属性
constructor(name:string){ //构造函数 在实例化类的时候自动调用(初始化数据)
this.name = name;
}
static eat():string{ //静态方法
return `${this.name}干饭了` //静态里面只能调用定义的静态属性
}
}
//调用静态方法,使用类名Person调用
let p = new Person('狗蛋');
console.log(Person.name) //狗蛋
console.log(Person.eat()) //狗蛋干饭了
五.抽象类
TS中的抽象类是提供其他类继承的基类,不能被实例化。
用abstract关键字定义抽象类和抽象方法,abstract抽象方法只能放在抽象类里面。
抽象类中的抽象方法不包含具体实现,是用来约束派生类的方法的(派生类必须要实现抽象类中定义的这个抽象方法)。
//定义一个抽象类动物 用来作为具体动物的基类
abstract class Animal{
name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any; //抽象方法不包含具体实现并且必须在派生类中实现。
sleep():void{ //普通方法可不在派生类中实现
console.log('其他方法可以不实现')
}
}
// var a = new Animal() //错误 不能实例化抽象对象
//创建一个Dog类继承抽象类Animal
class Dog extends Animal{
constructor(name:string){
super(name)
}
//抽象类的子类必须实现抽象类里面的抽象方法
eat(){
console.log(`${this.name}吃骨头`)
}
}
let d=new Dog('小狗子');
d.eat();
六.多态
多态就是同一方法在不用类中的表现形式,TS中在父类定义一个方法不去实现,让继承他的子类去实现,这样在每一个子类中的方法就会有不同的行为,这就是多态。
比如拿上面的例子来说:定义一个Animal父类并定义一个eat方法但不写具体的实现,创建子类Dog中重写eat方法,并写在Dog中的具体实现;创建子类Cat重写eat方法,并写在Cat中的的具体实现。这样eat方法就表现出来多种形态。
//定义一个Animal类
class Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){} //定义一个eat但不写具体实现
}
//创建一个Dog类继承Animal
class Dog extends Animal{
constructor(name:string){
super(name)
}
//重写eat方法,并写具体实现
eat(){
console.log(`${this.name}吃骨头`)
}
}
//创建一个Cat类继承Animal
class Cat extends Animal{
constructor(name:string){
super(name)
}
//重写eat方法,并写具体实现
eat(){
console.log(`${this.name}吃小鱼干`)
}
}
//实例化Dog和Cat类
let d=new Dog('小狗子');
let c=new Cat('小猫咪');
d.eat(); //小狗子吃骨头
c.eat(); //小猫咪吃小鱼干
到底咯。。。。。。。。。。。。。。.。。。。。。。。