TypeScript(五):类 Class
2021-05-07 本文已影响0人
林ze宏
-
类(Class):定义了一切事物的抽象特点,如:汽车、动物等等
-
对象:类的实例(奥迪、狗等)
-
面向对象(OOP)三大特性:封装、继承、多态
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
- constructor 简写
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
- public
属性和方法默认就是 public
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)
- private
只有在类内部使用
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
-
protect,只有在类本身和子类可以使用
-
只读属性,只能读,不可以写
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); // 小明 小明