TypeScript 面向对象程序设计(OOP) - 图1

在 JavaScript 中 ES6 之前我们使用函数(构造器函数)和基于原型来创建一个自定义的类,但这种方式总会让人产生困惑,特别是习惯了 Java、PHP 等面向对象编程的同学来说更加难以理解。

抽象一个类

面向对象编程的基本单位是对象,但对象又是由类实例化的,所以我们第一步需要先知道怎么去声明一个类。

类的声明

类的声明使用 class 关键词,类名与变量、函数等命名规则类似,这里要首写字母大写,类名后跟上一对花括号可以理解为的类的主体,类的主体三部分组成:成员属性、构造函数、成员方法。

  1. class 类名 {
  2. 成员属性:
  3. 构造函数:
  4. 成员方法:
  5. }

成员属性

在类中可以直接声明变量,也称为成员属性,另外在类中声明成员属性我们还可以使用关键词 private、public、protected 来修饰:

  • public: 声明的属性具有公有权限,在类的外部是可以被访问的,public 这个关键词默认是可以不用写的。
  • private: 声明的属性具有私有权限,仅在当前类的内部可以被访问。
  • protected: 声明的属性具有保护权限,在类的派生类内部可以被访问。
  1. class Person {
  2. age: number; // age 等价于 public age
  3. private sex: string;
  4. protected phone: number;
  5. }

构造函数

构造函数用于类的初始化,可以声明哪些字段是必传的,哪些字段是非必传的。

构造函数参数中 public name: string 相当于如下形式:

  1. class Person {
  2. public name: string
  3. constructor(public name: string) {
  4. this.name = name;
  5. }
  6. }

在构造函数内部,可以为之前声明的成员属性做赋值。

  1. class Person {
  2. ...
  3. constructor(public name: string, age: number, sex: string, phone?: number) {
  4. this.age = age;
  5. this.sex = sex;
  6. this.phone = phone;
  7. }
  8. }

成员方法

类中直接声明函数称为成员方法,注意这里的函数是不需要加 function 关键词的,成员方法要和对象有关联,例如 eat 方法(每个都需要吃饭的),另外方法也可以使用 public、private、protected 等关键词声明。

  1. class Person {
  2. ...
  3. public eat() {
  4. const info = this.info();
  5. console.log(`${info} eat...`);
  6. }
  7. private info() {
  8. return `${this.name} ${this.age} ${this.sex} ${this.phone}`;
  9. }
  10. }

什么是对象?只要能用属性、方法描述的事物我们都可以声明为一个类,然后对这个类实例化出对象使用。

类的实例化对象

上面我们抽象了一个类 Person,但是在程序中我们不是直接使用的类,而是通过抽象出来的类来实例化一个或多个对象为我们所使用。

实例化一个对象主要使用 new 关键词,后面跟上需要实例的类。

  1. const zhangsan = new Person('张三', 18, '男');
  2. const lisi = new Person('李四', 20, '男', 18800000000);
  3. zhangsan.eat(); // 张三 18 男 undefined eat...
  4. lisi.eat(); // 李四 20 男 18800000000 eat...

static 静态属性

static 可以用来将类成员属性、成员方法标识为静态的。

static 关键词修饰的类成员属性、成员方法是属于类的与类实例对象无关,且在多个对象之间是共享的。

下例定义了静态属性 language 为 chinese,最后实例化了两个对象,其中 language 可以使用类名来调用,且在两个对象间是共享的。

  1. class Person {
  2. static language: string = 'chinese';
  3. constructor(public name: string) {}
  4. info() {
  5. console.log(`我叫: ${this.name}, 我说: ${Person.language}`);
  6. }
  7. }
  8. const zhangsan = new Person('张三');
  9. zhangsan.info(); // 我叫: 张三, 我说: chinese
  10. const lisi = new Person('李四');
  11. lisi.info(); // 我叫: 李四, 我说: chinese

面向对象编程 — 封装性

对象的成员属性或方法如果没有被封装,实例化后在外部就可通过引用获取,对于用户 phone 这种数据,是不能随意被别人获取的。

封装性做为面向对象编程重要特性之一,它是把类内部成员属性、成员方法统一保护起来,只保留有限的接口与外部进行联系,尽可能屏蔽对象的内部细节,防止外部随意修改内部数据,保证数据的安全性。

Private 关键词修饰

用 private 关键词修饰类的成员属性和成员方法来实现对成员的封装,封装后的成员对象仅能在类的内部被访问。

下面我们使用 private 关键词对 Person 类部分成员进行封装,能够被外部访问的只有 info 方法。

  1. class Person {
  2. private name: string;
  3. private phone: string;
  4. constructor(name: string, phone: string) {
  5. this.name = name;
  6. this.phone = phone;
  7. }
  8. public info() {
  9. console.log(`我是 ${this.name} 手机号 ${this.formatPhone()}`)
  10. }
  11. private formatPhone() {
  12. return this.phone.replace(/(\d{3})\d{4}(\d{3})/, '$1****$2');
  13. }
  14. }
  15. const zhangsan = new Person('张三', '18800000000');
  16. zhangsan.info();

私有成员访问

使用 private 修饰过后的成员属性或方法在外部将会无法访问,如果需要访问,我们可以设置公有方法返回私有属性,这里你也可以做一些条件限制。

  1. class Person {
  2. private name: string;
  3. private phone: string;
  4. constructor(name: string, phone: string) {
  5. this.name = name;
  6. this.phone = phone;
  7. }
  8. public getName() {
  9. return this.name;
  10. }
  11. ...
  12. }
  13. const zhangsan = new Person('张三', '18800000000');
  14. console.log(zhangsan.getName()); // 张三

面向对象编程 — 继承性

已存在的用来派生新类的类成为基类,又可称为超类。新派生的类称为派生类或子类。

在 C++ 中一个派生类可以继承多个基类,有单继承、多继承。在 TypeScript、Java、PHP 中都是只可继承自一个基类,只有单继承。

下图展示一个关于 Person 基类被继承的示意图:

TypeScript 面向对象程序设计(OOP) - 图2

子类继承应用

创建基类 Person 一个成员属性 name,一个成员方法 eat。

  1. class Person {
  2. protected name: string;
  3. constructor(name: string) {
  4. this.name = name;
  5. }
  6. eat() {
  7. console.log('eat...');
  8. }
  9. }

创建派生类 Student,通过关键词 extends 继承于基类 Person,实现一个自定义的 study 方法。

  1. class Student extends Person {
  2. study() {
  3. this.eat();
  4. console.log(`${this.name} 开始学习...`);
  5. }
  6. }

创建派生类 Work,通过关键词 extends 继承于基类 Person,实现一个自定义的 work 方法。

  1. class Work extends Person {
  2. work() {
  3. super.eat();
  4. console.log(`${this.name} 开始工作...`);
  5. }
  6. }

上面创建的两个子类 Student、Work 都有自己单独的方法,学生要学习,工人要工作,但是在开始之前都要先吃饱饭吧。

下面我们测试下这个实例。

  1. const s1 = new Student('张三');
  2. s1.study();
  3. // eat...
  4. // 张三 开始学习...
  5. const w1 = new Work('李四');
  6. w1.work();
  7. // eat...
  8. // 李四 开始工作...

子类重载父类的方法

我们不能定义重名的函数,也无法在同一个类中定义重名的方法,但是在派生类中我们可以重写在基类中同名的方法。

  1. class Student extends Person {
  2. constructor(name: string) { super(name); }
  3. eat() {
  4. console.log('今天作业有点多,再加一块肉!');
  5. super.eat();
  6. }
  7. study() {
  8. this.eat();
  9. console.log(`${this.name} 开始学习...`);
  10. }
  11. }
  12. const s1 = new Student('张三');
  13. s1.study();
  14. // 今天作业有点多,再加一块肉!
  15. // eat...
  16. // 张三 开始学习...

注意:如果派生类中写了 constructor() 方法,必须在 this 之前调用 super 方法,它会调用基类的构造函数。

接口继承

接口多继承实现

上面讲了在 TS 中类之间只能实现单继承,但是在接口里是可以实现单继承和多继承的。

  1. interface Person1 {
  2. nickname: string;
  3. }
  4. interface Person2 {
  5. age: number;
  6. }
  7. interface Person3 extends Person1, Person2 {
  8. sex: string;
  9. }
  10. function study(obj: Person3) {
  11. console.log(obj.nickname, obj.age, obj.sex);
  12. }
  13. study({ nickname: 'may', age: 20, sex: 'man' });

接口继承类

接口可以通过 extends 关键词继承一个类,如果类成员包含实现,则不会被继承其实现。

  1. class Person1 {
  2. nickname: string;
  3. test(): string {
  4. return 'Hello';
  5. }
  6. }
  7. interface Person2 extends Person1 {
  8. age: number;
  9. }
  10. class Study implements Person2 {
  11. nickname: string;
  12. age: number;
  13. constructor(nickname: string, age: number) {
  14. this.nickname = nickname;
  15. this.age=age;
  16. }
  17. test(): string {
  18. console.log(this.nickname, this.age)
  19. return 'Hi';
  20. }
  21. }
  22. const lisi = new Study('李四', 20);
  23. console.log(lisi.test());

面向对象编程 — 多态性

多态性是面向对象编程的三大特性之一,可以让具有继承关系的不同类对象,使用相同的函数名完成不同的功能,通俗的讲:一个子类可以修改、重写父类中定义的相同名称的方法,父类可以使用抽象类或接口来定义相应的规范。

抽象类

抽象类是一种特殊的类,使用 abstract 关键词修饰,一般不会直接被实例化

抽象类中的成员属性或方法如果没有用 abstract 关键词修饰,可以包含实现细节。如果使用 abstract 关键词修饰,则只能定义,实现必须要在派生类中去做。

  1. abstract class Person {
  2. abstract name: string;
  3. eat(): void {
  4. console.log('eat...')
  5. }
  6. abstract walk(): void;
  7. }
  8. class Student extends Person {
  9. name: string;
  10. walk(): void {
  11. console.log('walk...');
  12. }
  13. }
  14. const zhangsan = new Student();
  15. zhangsan.eat(); // eat...
  16. zhangsan.walk(); // walk...

接口

接口是一种特殊的抽象类,与之抽象类不同的是,接口没有具体的实现,只有定义,通过 interface 关键词声明。

在继承的时候说过,TypeScript 中只能单继承,但是在接口这里,是可以实现多个接口的。

  1. class 类名 implements Interface1, Interface2 {
  2. ...
  3. }

以下是一个接口的示例:

  • 定义一个 Person 接口
  • 定义一个 Study 接口,里面定一个 diploma(文凭)方法
  1. interface Person {
  2. name: string;
  3. phone?: string;
  4. }
  5. interface Student {
  6. diploma(): void;
  7. }
  8. class HighSchool implements Student, Person {
  9. name: string;
  10. diploma(): void {
  11. console.log('高中生 ...');
  12. }
  13. }
  14. class University implements Student, Person {
  15. name: string;
  16. diploma(): void {
  17. console.log('大学生 ...')
  18. }
  19. }

多态性的应用

一个经典的例子,电脑的 USB 接口,我们可以插上鼠标、键盘、U 盘等设备,来为其扩展不同的功能,每个设备的功能是不同的,但是 USB 接口的规范遵守的是统一的,这也就是我们所讲的多态性,通过声明抽象类或接口定义规范,子类重写和父类名称相同的方法,实现自己的功能

  1. // 定义USB 接口规范
  2. interface USB {
  3. run(): void;
  4. }
  5. // 实现一个 USB 规范的键盘设备
  6. class UKey implements USB {
  7. run(): void {
  8. console.log('USB 规范的键盘设备');
  9. }
  10. }
  11. // 实现一个 USB U 盘设备
  12. class UDisk implements USB {
  13. run(): void {
  14. console.log('USB 规范的 U 盘设备');
  15. }
  16. }
  17. // 计算机类
  18. class Computer {
  19. useUSB(usb: USB) {
  20. usb.run();
  21. }
  22. }
  23. const computer = new Computer();
  24. computer.useUSB(new UKey()); // USB 规范的键盘设备
  25. computer.useUSB(new UDisk()); // USB 规范的 U 盘设备

总结

大学期间自学了 PHP 开发,当时印象比较深刻的一本书是 “细说 PHP”,作者:“高洛峰” 之前暑假去北京实习还见过作者,很 Nice,书中的面向对象这节印象还是比较深刻的,讲的很好,在学习 TypeScript 面向对象的封装、继承、多态特性时很多概念都是相通的,对于理解给予了很大帮助。

Reference