03、TypeScript 中的类

1.首先了解 es5 中的类的实现与继承

// es5 中的类
function Persion(name, age) {
  this.name = name;// 属性
  this.age = age;
  this.run = function () {// 实例方法，必须 new 这个实例之后才能调用
    console.log(this.name + '运动');
  }
}

// 原型链上的属性会被多个实例共享，构造函数不会
Persion.prototype.sex = '男';// 原型链扩展属性
Persion.prototype.work = function () {
  console.log('工作');
}
Persion.getInfo = function () {
  console.log('我是静态方法');
}


var p = new Persion('zhangning', 24);
console.log(p.name);// zhangning
p.run();// 执行方法
p.work();// 调用原型链上的方法
Persion.getInfo();// 调用静态方法

// 1.对象冒充实现继承
// es5 继承，定义一个 Web 类 继承 Persion 类
function Web() {
  Persion.call(this);
}

var w = new Web();
w.run();// run 方法继承自Persion，对象冒充可以继承构造函数里面的属性和方法
w.work();// 报错，对象冒充不能继承原型链上面的属性和方法

// 2.原型链实现继承
function Web1() {
}

// 原型链继承既可以继承构造函数中的属性和方法，又可以继承原型链上的属性和方法
Web.prototype = new Persion();
var w1 = new Web1('zhangning', 24);
// 有个问题，就是实例化子类的时候没办法给父类传参,w1.run() 方法会报错
w1.run();
w1.work();

// 3.原型链 + 构造函数的组合继承模式
function Web1(name, age) {
  Persion.call(this, name, age);
}

// 原型链继承既可以继承构造函数中的属性和方法，又可以继承原型链上的属性和方法
Web.prototype = new Persion();
// Web.prototype = Persion.prototype; // 这种也可以
// 这里就解决了实例化子类不能给父类传参的问题
var w1 = new Web1('zhangning', 24);
w1.run();
w1.work();

2. TypeScript 中定义类

// 1.ts 中 class 定义类
class Persion {
  name: string;// 属性，省略了 public
  constructor(name: string) {// 构造函数，实例化类的时候，触发的方法
    this.name = name
  }

  run(): void {
    console.log(this.name);
  }

  getName(): string {
    return this.name;
  }

  setName(name: string): void {
    this.name = name
  }
}

// 实例化
var p = new Persion('zhangning');
p.run();
console.log(p.getName());// zhangning
p.setName('zhangning187')
console.log(p.getName());// zhangning187

3.TypeScript 中实现继承

// 2.ts 中实现继承 extends super
class Persion {
  name: string;

  constructor(name: string) {
    this.name = name
  }

  run(): void {
    console.log(this.name);
  }

  getName(): string {
    return this.name;
  }
}

// 实例化
var p = new Persion('zhangning');
p.run();

class Web extends Persion {
  constructor(name: string) {
    super(name);
  }

  work(): void {
    console.log('工作');
  }

  // 方法的重写
  run(): void {
    console.log(111);
  }
}

var w = new Web('zhangning187');
w.run();// zhangning187

4.TypeScript 类里面的修饰符

// 3.类里面的修饰符
// public：公有（默认值），在类里面，子类，类外面都可以访问
// protected：保护类型 在类里面，子类里面可以访问，类外部没法访问
// private：私有 在类里面可以访问，子类，类外部没法访问
class Persion {
  public name: string;// 默认就是 public
  protected age: number;
  private sex: string;

  constructor(name: string, age: number, sex: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }

  run(): void {
    console.log(this.name);
  }

  getName(): string {
    return this.name;
  }
}

// 实例化
var p = new Persion('zhangning', 24, '男');
p.run();
console.log(p.name);// name 可以访问
// console.log(p.age);// 报错，age 不可以访问，类外部访问不了保护类型的属性
// console.log(p.sex);// 报错，sex 不可以访问，类外部访问不了私有类型的属性

class Web extends Persion {
  constructor(name: string, age: number = 23, sex: string = '男') {
    super(name, age, sex);
  }

  work(): void {
    console.log('工作');
    // console.log(this.sex);// sex 是私有属性，在子类中访问不了
  }

  // 方法的重写
  run(): void {
    console.log(111);
  }
}

var w = new Web('zhangning187');
w.run();// zhangning187

5.类中的静态属性、静态方法

// 类中的 静态属性 静态方法
class Persion {
  public name: string;// 默认就是 public
  protected age: number;

  static sex = '男'

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  // 实例方法
  run(): void {
    console.log(this.name);
  }

  // 静态方法，静态方法里面没法直接调用类里面的属性，只能调用静态属性
  static run1(): void {
    console.log(this.sex);
  }
}

console.log(Persion.sex);// 调用静态属性
Persion.run1();// 调用静态方法

6.多态

// 多态：父类中定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现
// 多态属于继承
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name
  }

  // 实例方法
  eat(): void {
    console.log('吃的方法');// 具体吃什么，让它的子类去实现，这就是多态
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  eat(): void {
    console.log('小狗吃骨头');
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }

  eat(): void {
    console.log('吃老鼠');
  }
}

7.抽象类

// TypeScript 这种的抽象类：是提供其他类继承的基类，不能直接被实例化
// 用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
// 抽象类抽象方法用来定义标准，标准： Animal 这个类要求它的子类必须包含 eat 方法
abstract class Animal {// 定义抽象类，必须包含一个抽象方法，不然就没有任何意义了
  name: string;

  constructor(name: string) {
    this.name = name
  }

  // 定义抽象方法，抽象方法只能出现在抽象类里面，必须在子类中实现
  abstract eat(): void;

  run(): void {
    console.log('跑得快');
  }
}

// var a = new Animal();// 错误的写法，抽象类不能直接实例化

// 抽象类的子类必须实现抽象类里面的抽象方法
class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  eat(): void {
    console.log('小狗吃骨头');
  }
}

var dog = new Dog('小黑');
dog.eat();

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }

  eat(): void {
    console.log('吃老鼠');
  }
}