一、es5 对象
1、定义 类（对象）
原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。
// 自定义构造函数
function Person(name, age) {
this.name = name
this.age = age
this.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 = name
this.age = age
this.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 = name
this.age = age
this.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 = Children
const 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: string
constructor(name: string) {
this.name = name
}
getInfo(): string {
return this.name
}
}
class People extends Person {
public age: number
constructor(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 = name
this.age = age
this.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 的实例方法 css
this.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、静态属性age
console.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: string
constructor(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() // 小花花吃肉