TypeScript(五):类 Class

2021-05-07  本文已影响0人  林ze宏

1 类的实例

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('lily')
console.log(snake.run()) // lily is running

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

// 继承 Animal,拥有 Animal 的属性和方法
class Dog extends Animal {
  bark() {
    return `${this.name} is barking`
  }
}

const xiaobao = new Dog('xiaobao')
xiaobao.run()
xiaobao.bark()

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

class Cat extends Animal {
  constructor(name) { // 如果使用 constructor,必须使用 super,重写父类的构造方法,不管父类有无定义 constructor,子类都必须使用 super,且按照父类的参数传递
    super(name)
    console.log(this.name)
  }
  run() { // 重写
    return 'Meow, ' + super.run() 
  }
}

const maomao = new Cat('maomao')
maomao.run() // Meow, maomao is running
class Animal {
  // 传统 constructor 写法
  // name: string;
  // constructor(name: string) {
  //   this.name = name
  // }

  // constructor 简写
  constructor(public name: string){};

  run() {
    return `${this.name} is running`
  }
}

2 类的修饰符

类的修饰符有 public、protect、private

class Animal {
  public name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('lily')
console.log(snake.name)
class Animal {
  private name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('lily')
console.log(snake.name) // error
class Animal {
 readonly name: string;
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

const snake = new Animal('lily')
console.log(snake.name) // OK

snake.name = '11112' // error,只读属性
class Animal {
  name: string;
  static categoies: string[] = ['mammal', 'bird']
  static isAnimal(a) {
    return a instanceof Animal
  }
  constructor(name: string) {
    this.name = name
  }
  run() {
    return `${this.name} is running`
  }
}

console.log(Animal.categoies)

const snake = new Animal('lily')
console.log(Animal.isAnimal(snake))

3 getter setter

getter setter,可以保护类里面的私有属性,通过二次处理,再暴露给外部相关的属性;外部使用的时候,直接通过如:cat.getName 获取,而不是 cat.getName() 方法,如下:

class Animal {
  // 传统 constructor 写法
  // name: string;
  // constructor(name: string) {
  //   this.name = name
  // }

  // constructor 简写
  constructor(private _name: string){};

  get getName() {
    return this._name + '...'; // 可以进行二次处理,再暴露给外部的 name,而不会影响内部的 _name
  }

  set setName(name: string) {
    const realName = name.split(' ')[0]; // 可以进行二次处理,而不会影响内部的 _name
    this._name = realName;
  }

}

const cat = new Animal('xiaoming');
console.log(cat.getName); // xiaoming...; 这里没有调用方法 cat.getName(),而是直接通过 get 获取得到值
cat.setName = 'zhang san'; // set 方法,直接赋值
console.log(cat.getName); // zhang...

4 单例模式

// 单例模式
class Animal {

  private static instance: Animal;

  // 传统 constructor 写法
  // name: string;
  // constructor(name: string) {
  //   this.name = name
  // }

  // constructor 简写
  // 通过 private 修饰 constructor,避免外部通过 new 实例,
  // 如 const cat = new Animal('xiaoming'); 报错
  private constructor(public name: string){};

  // 使用 static 修饰,可以让外部直接通过 类命的方式调用
  static getInstance() {
    if (!this.instance) { // 第一次没有实例,就创建实例
      this.instance = new Animal('小明');
    }
    return this.instance;
  }

}

// 单例,下面两个实例相等
const cat1 = Animal.getInstance();
const cat2 = Animal.getInstance();
console.log(cat1.name, cat2.name); // 小明 小明


上一篇下一篇

猜你喜欢

热点阅读