重拾Typescript之类的继承以及访问器、构造器

1,951 阅读3分钟

1.类:

1.1-定义一个类:

es6中的class,这部分没啥好说的,直接上例子🌰:

class Person {
  name = '科比.布莱恩特';
  getName() {
    return this.name;
  }
}

const person = new Person();
console.log(person.getName()); 
//科比.布莱恩特

1.2-类的继承:

  • 之间的继承用extends,继承后子类便可以拥有父类方法属性
// 类的继承
class NBASTAR extends Person {
  getTeamName() {
    return 'Lakers';
  }
}
const kobe = new NBASTAR();
console.log(kobe.getName()); // 科比布莱恩特
console.log(kobe.getTeamName()); // Lakers

1.3-子类重写父类方法:

  • 子类父类同名方法或者属性的时候,子类的方法覆盖父类的同名方法或者属性
// 类的重写(子类重写父类)

class NBAPlayer extends Person {
  getName() {
    return '我是一名nba球员';
  }
}
console.log('子类重写父类', new NBAPlayer().getName()); //我是一名nba球员

上面例子中,Person类中也有getName方法,但是由于子类NBAPlayer中具有同名方法,就将其覆盖掉了

1.4.Super

这里主要是简单的介绍下通过super获取父类中的属性,后续会在访问类型中再继续的深入详细介绍

  • getName方法中super指的就是父类SuperTest,测试结果如此
//super关键字
class SuperTest {
  getName() {
    return '我是超级球星-阿伦艾弗森';
  }
}

class NormalTest extends SuperTest {
  getName() {
    // 这里调用super其实代表的是父类-SuperTest
    return super.getName();
  }
}
console.log('super关键字测试', new NormalTest().getName()); //我是超级球星-阿伦艾弗森

2.类的访问器:

访问器有publicprivate以及protected

  • public:允许在类的内部外部使用(不写默认就是public
// public 允许我在类的内外被调用
class Person{
  public name:string;
  public palyBasketball(){
    console.log('打篮球')
  }
}
const person  = new Person();
person.name = 'kobe';

console.log(person.name); //kobe
person.palyBasketball(); //打篮球
  • private:只允许在类的内部使用
class Person1{
  private playBasketball(){
    console.log('打篮球')
  }
}
const person1  = new Person1();
person1.playBasketball(); //报错飘红,因为palybasketball为private方法
  • protected:允许在类内及继承的子类中使用,子类的实例也是无法使用的protected访问类型的
class Person2{
  protected playBasketball(){
    console.log('打篮球')
  }
}
class Player extends Person2{
  testPlayBasketBall(){
    // 这里使用playBasketball没问题
    this.playBasketball()
  }
}
const person2  = new Player();
person2.playBasketball(); // 实例去使用playBasketBall就会飘红

3.构造器:

构造器也就是constructor,在类实例化的时候(也就是new一个实例对象),会自动的执行

  • constructor中添加public访问器后,可以省略name的定义(name:string)以及赋值(this.name = name)
//常规写法:
class Person3{
  name:string;
  constructor(name:string){
    this.name = name;
  }
}
const person3 = new Person3('kobe');
console.log(person3.name); //kobe

//简洁写法:
class Person4{
  constructor(public name:string){
  }
}
const person4 = new Person4('德怀恩.韦德');
console.log(person4.name); //德怀恩.韦德

子类承父类时,如果父类和子类同时有constructor构造器,那么需要在子类中手动调用父类构造器,也就是super,并且按照父类构造函数的要求去传参

class Person5 {
  constructor(public name:string){

  }
}

class Player5 extends Person5{
  // 这里会飘红,如果父类有构造器,子类也有构造器,那么需要在子类中手动调用父类构造器,也就是super,并且按照父类构造函数的要求去传参
  constructor(public age:number){
    super('张大仙')
  }
  playgames(){
    console.log('打王者荣耀')
  }
}
const playerGame = new Player5(18);
console.log(playerGame.name); //张大仙
console.log(playerGame.age); //18
console.log(playerGame.playgames()) //打王者荣耀

下篇将讲解静态属性以及抽象类的相关的知识。