【04】基础知识：typescript中的类

一、es5 对象

1、定义 类（对象）

原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。

// 自定义构造函数
function Person(name, age) {this.name = namethis.age = agethis.getInfo = function() {console.log(`${this.name} - ${this.age}`)}
}// 原型对象增加属性和方法
Person.prototype.sex = '男'
Person.prototype.getOtherInfo = function() {console.log(`${this.name} - ${this.age} - ${this.sex}`)
}let person = new Person('zhangsan', 20)
person.getInfo() // zhangsan - 20
person.getOtherInfo() // zhangsan - 20 - 男

2、类中的静态方法

静态方法不需要实例化，通过【 类.方法名称() 】形式调用；实例方法必须 new 创建对象后才能调用。

function Person(name, age) {this.name = namethis.age = agethis.getInfo = function() { // 实例方法console.log(`${this.name} - ${this.age}`)}
}Person.staticFun = function() {console.log('静态方法')
}Person.staticFun() // 静态方法

3、组合继承：借用构造函数 call | apply + 原型继承 prototype

借用构造函数只能动态传参，不能继承构造函数原型对象上的属性和方法；原型继承只能继承构造函数原型对象上的属性和方法，实例化子类的时候不能给父类传参。

1> 借用构造函数继承属性：Parent.call(this, params)、Parent.apply(this, [params])；
2> 原型继承方法：Children.prototype = new Parent(); Children.prototype.constructor = Children;

function Person(name, age) {this.name = namethis.age = agethis.getInfo = function () {console.log(`${this.name} - ${this.age}`)}
}Person.prototype.sex = '男'
Person.prototype.getOtherInfo = function () {console.log(`${this.name} - ${this.age} - ${this.sex}`)
}// 借用构造函数
function Children(name, age) {Person.call(this, name, age)
}
// 原型继承
Children.prototype = new Person()
Children.prototype.constructor = Childrenconst child = new Children('lily', 15)
child.getInfo() // 借用构造函数，可以继承构造函数中的属性和方法
child.getOtherInfo() // 原型继承，可以继承构造函数原型对象上的属性和方法

二、typescript中的类

1、定义类

class Person {name: string // 属性，前面省略了public 关键字constructor(name: string) { // 构造函数，实例化类时触发的方法this.name = name}getInfo(): string {return this.name}setInfo(name: string): void {this.name = name}
}const person = new Person('zhangsan')
person.getInfo() // zhangsan
person.setInfo('lily')
person.getInfo() // lily

2、继承 extends、super

class Person {public name: stringconstructor(name: string) {this.name = name}getInfo(): string {return this.name}
}class People extends Person {public age: numberconstructor(name: string, age: number) {super(name) // 初始化父类构造函数this.age = age}getOtherInfo(): string {return `姓名${this.name}  年龄${this.age}`}
}const people = new People('lily', 20)
people.getInfo() // lily
people.getOtherInfo() // 姓名lily  年龄20

3、类的修饰符

typescript 里面定义属性的时候，提供了三种修饰符；属性如果不加类型，默认为 public。

修饰符	说明
public	公有类型，在类里面、子类里面、类外面都可以访问
protected	保护类型，在类里面、子类里面可以访问，在类外部无法访问
private	私有类型，在类里面可以访问，子类、类外部都无法访问

// 父类
class Person {public name: string // 公共属性protected age: number // 受保护属性private sex: string // 私有属性constructor(name: string, age: number, sex: string) {this.name = namethis.age = agethis.sex = sex}getInfo(): string {// 类里访问 公共属性、受保护属性、私有属性正常return `姓名${this.name} - 年龄${this.age} - 性别${this.sex}`}
}const person = new Person('慢慢', 20, '男')
console.log(person.name) // 类外部访问公共属性正常
console.log(person.age) // 类外部访问受保护属性，ts编译报错
console.log(person.sex) // 类外部访问私有属性，ts编译报错// 子类
class People extends Person {constructor(name: string, age: number, sex: string, ) {super(name, age, sex)}getOtherInfo(): string {// 子类中访问私有属性，ts编译报错 // console.log(this.sex)// 子类中访问公共属性、受保护属性正常return `姓名${this.name} - 年龄${this.age}`}
}

4、类的静态属性、静态方法

静态方法在实际场景中的使用，以 jquery 为例，了解即可。

// $ 符封装，返回实例化对象
function $(element) {return new Base(element)
}// jquery 的静态方法 get
$.get = function() { } // jquery 的实例化函数
function Base(element) {this.element = document.getElementById(element) // 获取dom节点// jquery 的实例方法 cssthis.css = function(attr, value) {this.element.style.attr = value}
}// 使用 jquery 实例化后的方法 css
$('#box').css('color', 'red') 
// 使用 jquery 静态方法 get
$.get('url', function() {}) 

typescript 中使用 static 关键字声明类的静态属性，通过【 类.静态属性 】 形式进行访问。

typescript 中使用 static 关键字声明类的静态方法，通过【 类.静态方法() 】 形式进行调用；静态方法中无法直接使用类的属性。

class Person {public name: string // 公共属性static age: number = 20 // 静态属性constructor(name: string) {this.name = name}// 实例方法getInfo(): void {// 使用公共属性name、静态属性ageconsole.log(this.name, Person.age)}// 静态方法中，无法直接使用类中的属性static print(): void {console.log('调用Person类的静态方法print')console.log(`使用Person类的公共属性name失败：${this.name}`)console.log(`使用Person类的静态属性age成功：${Person.age}`)    }
}// 调用 Person 类的静态方法 
Person.print()
console.log(`使用 Person 类静态属性age：`, Person.age)// 实例化 Person 类
const person = new Person('莉莉')
person.getInfo() // 莉莉 20

5、多态

父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现。

多态属于继承。

class Animal {public 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(`${this.name}吃肉`)}
}class Cat extends Animal {constructor(name: string) {super(name)}eat(): void {console.log(`${this.name}吃鱼`)}
}const dog = new Dog('狗')
const cat = new Cat('猫')
dog.eat() // 狗吃肉
cat.eat() // 猫吃鱼

6、抽象类

typescript 中的抽象类，是提供其他类继承的基类，不能直接被实例化。

用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。

abstract 抽象方法只能放在抽象类中。

抽象类 和 抽象方法用来定义标准。

// 定义标准：Animal 类要求它的子类必须包含 eat 方法
abstract class Animal {public name: stringconstructor(name: string) {this.name = name} abstract eat(): any // 抽象方法speek(): void { // 其他方法：实例方法 dog.speek()console.log('其他方法子类可以不实现，抽象方法必须实现', this.name)}
}// 无法创建抽象类的实例
new Animal() //  报错: Cannot create an instance of an abstract class. class Dog extends Animal {constructor(name: string) {super(name)}// 抽象类的子类必须实现抽象类里面的抽象方法eat(): string {return `${this.name}吃肉`}
}const dog = new Dog('小花花')
dog.eat() // 小花花吃肉