ES6 中的类：掌握 JavaScript 面向对象编程的基石

前端

2024-01-28 03:02:42

在过去，JavaScript 语言缺乏原生类支持，开发者只能使用函数作为一种变通方法来实现面向对象编程。然而，ES6 的出现彻底改变了这一局面，引入了 class ，为 JavaScript 开发人员提供了真正面向对象编程的强大功能。

在这篇文章中，我们将深入探究 ES6 中的类，涵盖从基本语法到高级特性的方方面面。

JavaScript 中面向对象编程的演变

在 ES6 之前，JavaScript 中的面向对象编程主要依赖于构造函数和原型。虽然这种方法在一定程度上起到了作用，但它存在一些局限性，例如代码冗余、继承机制复杂以及缺乏真正的类语法。

ES6 的 class 关键字解决了这些问题，它提供了一种简洁、清晰的方式来定义和使用类。它还引入了新的特性，例如继承、静态方法和属性，极大地增强了 JavaScript 中的面向对象编程能力。

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'm ${this.age} years old.`);
  }
}

在上面的示例中，Person 类包含一个构造函数，用于初始化类实例，以及一个 greet 方法，用于打印问候信息。

实例化类和使用其方法

要实例化一个类并创建其对象，我们可以使用 new

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

通过这个对象，我们可以访问类的实例属性和方法，就像使用任何其他 JavaScript 对象一样。

继承和多态性

ES6 中的类支持继承，允许创建派生类，继承父类的属性和方法。派生类可以通过 extends 关键字指定其父类：

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }

  work() {
    console.log(`${this.name} is working as a ${this.jobTitle}.`);
  }
}

Employee 类从 Person 类继承，并添加了自己的属性和方法。我们可以实例化 Employee 类并访问其方法：

const employee1 = new Employee('Jane', 35, 'Software Engineer');
employee1.greet(); // 输出：Hello, my name is Jane and I'm 35 years old.
employee1.work(); // 输出：Jane is working as a Software Engineer.

多态性是面向对象编程中一个重要的概念，它允许具有相同父类的不同对象表现出不同的行为。在上面的示例中，Person 和 Employee 类的 greet 方法虽然名称相同，但由于对象类型不同，它们的行为不同。

静态方法和属性

静态方法和属性是属于类的，而不是类的实例。它们可以通过类名直接访问，不需要实例化类：

class MyClass {
  static staticMethod() {
    console.log('This is a static method.');
  }

  static staticProperty = 'This is a static property.';
}

MyClass.staticMethod(); // 输出：This is a static method.
console.log(MyClass.staticProperty); // 输出：This is a static property.

静态方法和属性通常用于定义与类本身相关的实用程序或配置，而不是其实例。

访问控制

ES6 中的类支持访问控制，它允许限制对类成员（属性和方法）的访问。有三种访问控制修饰符：

public ：成员在类的内部和外部都可以访问。
private ：成员仅在类的内部可以访问。
protected ：成员在类的内部以及派生类中可以访问。

class MyClass {
  #privateProperty = 'This is a private property.';

  protectedMethod() {
    console.log(`This is a protected method, accessible in ${this.constructor.name}.`);
  }
}