ES6中的类：告别原型函数，拥抱简洁清晰！

前端

2023-12-07 13:14:00

JavaScript 的进化之旅中，ES6 的出现可谓是划时代性的。其中，类（Class）的概念无疑是一项重大的革新。过去我们在 ES5 中苦苦支撑的原型函数，终于在 ES6 中得到了升级，迎来了简洁清晰的“类”语法。

类与原型函数的恩怨情仇

在 ES5 的时代，对象被创建于原型链之上，通过原型函数来实现类的继承和代码重用。然而，这种语法冗长且难以维护，尤其是当项目变得复杂时，维护成本会呈指数级增长。

ES6 的类语法解决了这一痛点，它提供了与其他面向对象编程语言（如 Java 和 C++）类似的类定义语法。类语法使得代码更加结构化、可读性更强，同时还简化了继承和代码重用的过程。

ES6 类的强大优势

相较于原型函数，ES6 类拥有以下优势：

简洁语法： 类语法更加简洁易读，减少了冗余的代码，使代码维护变得更加容易。
封装性： 类可以更好地封装数据和行为，将相关属性和方法组织在一个模块中，提高代码的可维护性和安全性。
继承性： 类支持多重继承，子类可以继承父类的属性和方法，简化了代码重用和维护。
静态方法和属性： 类可以定义静态方法和属性，这些方法和属性不属于任何实例，而是属于类本身，提升了代码的灵活性和可扩展性。

ES6 类语法详解

定义一个类非常简单，只需使用 class 后跟类名即可，例如：

class Person {
  // 构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 方法
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

构造函数用于初始化类的实例，它接收参数并设置类的属性。方法定义在类的内部，它们可以访问类的属性。

实例化和使用类

要实例化一个类，可以使用 new 关键字，例如：

const person1 = new Person('John', 30);
person1.greet(); // 输出: Hello, my name is John and I am 30 years old.

现在，我们就可以像使用原型函数创建的对象一样使用类的实例了。

ES6 类中的继承

ES6 中的继承使用 extends 关键字，允许子类继承父类的属性和方法，例如：

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // 调用父类构造函数
    this.jobTitle = jobTitle;
  }

  // 重写父类方法
  greet() {
    super.greet(); // 调用父类方法
    console.log(`My job title is ${this.jobTitle}.`);
  }
}