JavaScript 面向对象编程，你应该尝试 TypeScript

前言

面向对象编程已经成为了前端开发中必须掌握的技能之一，而 JavaScript 则作为前端领域中最重要的编程语言之一，其本身也是面向对象的语言。JavaScript 中的面向对象编程并不像 Java 或者 C++ 那样是纯粹的面向对象，它是基于 prototype 原型链的构造函数模式的面向对象编程。

在这样的基础上，谈到 TypeScript 就必不可少了，TypeScript 作为 JavaScript 的一个超集，提供了更加强大且严格的类型检查，而且它完全支持 ES6+ 的新语法，也支持面向对象编程。

那么，本文将以 JavaScript 面向对象编程为基础，为读者介绍 TypeScript 的面向对象编程，旨在让读者更加深入地理解 TypeScript 中的面向对象编程。

JavaScript 中的面向对象编程

在 JavaScript 中，常常使用构造函数（Constructor）来创建对象，而构造函数中使用 this 关键字来表示新创建的对象。

function User(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}

const user1 = new User("Alex", 20, "Front-end engineer");
console.log(user1); // User { name: 'Alex', age: 20, job: 'Front-end engineer' }

上述代码中，我们创建了一个 User 的构造函数，然后通过 new 关键字创建了 user1 对象，这个对象拥有 name、age 和 job 三个属性。

同时，我们也可以通过原型链的方式对构造函数进行扩展，添加新的属性或者方法，让所有通过这个构造函数创建的对象都可以使用。

User.prototype.introduction = function () {
  console.log(`Hi, my name is ${this.name}, I am ${this.age} years old, and I work as a ${this.job}.`);
}

user1.introduction(); // Hi, my name is Alex, I am 20 years old, and I work as a Front-end engineer.

上述代码中，我们在 User 的原型链上添加了一个 introduction 方法，然后在 user1 对象上调用这个方法来输出对象的介绍信息。

TypeScript 中的面向对象编程

在 TypeScript 中，我们同样可以使用构造函数来创建对象，而且使用类（Class）与 ES6+ 的语言规范是一样的，而在类中使用 constructor 来创建构造函数。

class User {
  name: string;
  age: number;
  job: string;

  constructor(name: string, age: number, job: string) {
    this.name = name;
    this.age = age;
    this.job = job;
  }

  introduction(): void {
    console.log(`Hi, my name is ${this.name}, I am ${this.age} years old, and I work as a ${this.job}.`);
  }
}

const user1 = new User("Alex", 20, "Front-end engineer");
console.log(user1); // User { name: 'Alex', age: 20, job: 'Front-end engineer', introduction: [Function] }

上述代码中，我们同样创建了一个 User 的类，使用 constructor 来创建构造函数，而且在类中使用 this 关键字来表示新创建的对象。同时，在类中，我们添加了一个 introduction 方法，让所有这个类创建的对象都可以使用。需要注意的是，我们在这里使用了 TypeScript 的类型声明，让这个程序逻辑更为严谨。

同时，我们也同样可以使用 TypeScript 的继承（Inheritance）来扩展这个 User 类。

class Admin extends User {
  constructor(name: string, age: number) {
    super(name, age, "Admin");
  }
}

const admin1 = new Admin("Jane", 30);
admin1.introduction(); // Hi, my name is Jane, I am 30 years old, and I work as a Admin.

上述代码中，我们创建了一个 Admin 类，继承了 User 类，在 Admin 中传递 name 和 age 参数给 User 的构造函数，同时 job 暴露为 Admin 以表明身份。然后我们使用 new 操作符来创建 admin1 对象，最后输出对象的介绍信息。

总结

本文以 JavaScript 面向对象编程为基础开展，介绍了 TypeScript 中的面向对象编程。希望通过本文，读者可以更加深入地理解 TypeScript 中的面向对象编程，同时也可以在实践中逐渐掌握 TypeScript 的使用技巧。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590d271eb4cecbf2d61752e