【TypeScript】第四部分面向对象

文章目录

【TypeScript】第四部分面向对象
4. 面向对象
- 4.1 什么是对象
- 4.2 类（class）
- 4.3 构造函数和this
- 4.4 继承和重写
- 4.5 super关键字
- 4.6 抽象类
- 4.7 接口
- 4.8 属性的封装
- 4.9 泛型
总结

4. 面向对象

4.1 什么是对象

举例来说：
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

4.2 类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象

/* 用class关键字定义了一个Person类对象主要包括两个部分:属性方法
*/
class Person{/*直接定义属性是实例属性,需要通过对象的实例去访问*/name = 'jack'age = 18/* 在属性的前使用static关键字可以去定义属性为静态属性(类属性)该属性只能由类去访问*/static hello = '你好'// 方法也是如此,直接写是由实例对象去访问,加了static关键字由类去访问sayhello(){console.log('大家好!!')}static sayhello1(){console.log('我是静态方法')}
}// 实例化对象
const p = new Person();
console.log(p.name)
console.log(Person.hello)
p.sayhello()
Person.sayhello1()

4.3 构造函数和this

class Dog{name:stringage:number// constructor 被称为构造函数// 构造函数会在对象创建时进行调用// this指向当前创建的实例化对象constructor(name:string,age:number){this.name = namethis.age = age}bark(){console.log('汪汪汪',this)}
}new Dog('旺财',2)
new Dog('小黑',2)
console.log(new Dog('旺财',2))
console.log(new Dog('小黑',2))const d = new Dog('jack',4)
d.bark() // this指向jack

4.4 继承和重写

class Animal{name:stringage:numberconstructor(name:string,age:number){this.name = namethis.age = age}sayhello(){console.log('动物在叫~~~')}
}/*extends 关键字用来继承父类- 继承后子类将会拥有父类所有的方法和属性- 继承用于:将多个类中共同的代码写在一个父类当中,这样可以- 减少代码的重复性- 在子类中可以添加自己独有的属性和方法- 如果子类在添加了和父类相同的方法,则子类可以覆盖父类的方法这种形式我们称为重写
*/
class Cat extends Animal{run(){console.log('咻咻咻')}sayhello(): void {console.log('我是小猫')}
}class Mounse extends Animal{eat(){console.log('叽叽叽')}sayhello(): void {console.log('我是老鼠')}}const cat = new Cat('小七',2)
cat.sayhello()
cat.run()const mouse = new Mounse('汤姆',5)
mouse.sayhello()
mouse.eat()

4.5 super关键字

class Animal1{name:stringconstructor(name:string){this.name = name}sayhello(){console.log('我是动物')}
}class Rabbit extends Animal1{say(){//在类方法中,super就相当于当前类的父类super.sayhello()}
}const r = new Rabbit('小白')
r.say()/* 当我们想要在子类上添加新的属性时候会发现问题之前我们说过在子类上写相同的函数会被重写这时候就需要使用super()去调用父类
*/class Fish extends Animal1{age:number// 在子类写构造函数,就必须要调用父类的构造函数constructor(name:string,age:number){super(name) // 这个代码的意思是:调用父类的构造函数this.age = age}sayhello(): void {console.log('我是鱼')}
}const f = new Fish('喜喜',2)
f.sayhello()

4.6 抽象类

//抽象类和其他类的区别就是抽象类不能用来创建对象
//抽象类就是为了给其他类继承用的
abstract class Person1{name:stringage:numberconstructor(name:string,age:number){this.name = namethis.age = age  }// 定义抽象方法,没有具体的方法体// 抽象方法只能被定义在抽象类中,子类继承后必须要重写该方法abstract sayGoodBye():void
}class Jack extends Person1{gender:stringconstructor(name:string,age:number,gender:string){super(name,age)this.gender = gender}sayGoodBye(): void {console.log('bye bye')}
}
const j = new  Jack('丽华',12,'女')
j.sayGoodBye()

4.7 接口

接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法(抽象类可以有其他方法和抽象方法)。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

// 定义一个接口
interface botany{name:stringflowerPhase:stringmessage():void
}
/* 定义类的时候可以使得类去实现一个接口实现接口就是使类能够去满足接口的要求
*/
// 实现接口
class Rose implements botany{name: stringflowerPhase: stringconstructor(name:string,flowerPhase:string){this.name = namethis.flowerPhase = flowerPhase}message(): void {console.log(`我是${this.name},花期为${this.flowerPhase}`)}
}const rose = new Rose('玫瑰花','五个月')
rose.message()

4.8 属性的封装

TS可以在属性前添加修饰符

public
- 修饰的属性可以在任意位置访问/修改 默认值
private
- 私有属性 私有属性只能在该类内部进行访问/修改
  因为设置了私有属性,所以只能由该类进行访问/修改
  这时候我们可以通过定义方法将属性抛出,这样我们就可以
  对属性做一些操作,比如:在修改年龄的时候加限制条件
protected
- 可以在该类和子类中进行访问/修改,实例对象无法进行访问/修改

class Person2{private _name:stringprivate _age:numberprotected _gender:stringconstructor(name:string,age:number,gender:string){this._name = namethis._age = agethis._gender = gender}/* 将getname和setname这种设置属性的方法称作为属性的存取器*/getage(){return this._age}setage(value:number){if(value >0){this._age = value}     }/* 在TS中我们可以使用TS所提供的语法糖语法:get 方法名(){retun }set 方法名(value:type){} 使用的时候就和平常访问修改一样*/get name(){return this._name}    set name(value:string){this._name = value}}class A extends Person2{test(){// 子类可以访问console.log(this._gender)}
}
const a = new A('mark',18,'female')
a.test()  //const p2 = new Person2('jack',12,'male')
console.log(p2.getage())  //12
p2.setage(33)  //33// 使用的时候就和平常一样
console.log(p2.name)
p2.name = 'mark'console.log(p2)

4.9 泛型

定义一个函数或者是类的时候,有些情况是无法确定要使用的类型(返回值、参数、属性的类型),这个时候就可以使用泛型.

/**/
function f1<T>(a:T):T{return a
}
//当我们在调用时，如果不指定泛型TS会帮我们自动去推断类型
f1('hello') //此时泛型的值string//当我们的代码很复杂时，TS不一定能够准确推断出类型
f1<number>(2222) //手动去指定泛型，能够更好的避免出错// 可以指定多个泛型
class C<A,K>{name:Aage:Kconstructor(name:A,age:K){this.name = namethis.age = age}
}const c = new C<string,number>('jack',18)interface inter {length:number
}
// 表示F必须是inter的实现类
function fn2 <F extends inter>(a:F):number{return a.length
}
// 传进来的参数必须要有length这个属性
console.log(fn2('你好')) // 2

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！