es6-class: 告别 JavaScript 的狗年

2023-11-15 07:09:47

关键词：

正文

引言

JavaScript 中的 ES6 规范引入了 class，这是一种强大的语法糖，旨在简化和增强面向对象编程。它消除了使用构造函数和原型的传统方法中固有的复杂性和冗余。本文将深入探讨 ES6 class，重点介绍它的优势、使用方法以及与传统面向对象编程技术的比较。

类 vs. 构造函数

在 ES6 之前，JavaScript 中的面向对象编程主要依赖构造函数来创建对象。构造函数是一种特殊函数，用于创建新对象并初始化其属性和方法。然而，这种方法存在几个缺点，包括：

冗长的语法：构造函数需要显式地将属性和方法分配给新对象。
缺少封装：构造函数中的属性和方法很容易在代码的其他部分中被访问和修改，从而破坏了封装性。
难以实现继承：要创建子类，需要重复父类的构造函数代码，这可能会导致重复和维护问题。

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.`);
  }
}

在上面的示例中，Person 类定义了一个构造函数和一个 greet() 方法。构造函数用于初始化对象属性（name 和 age），而 greet() 方法则用于显示有关该人的信息。

类实例化：

const person1 = new Person('John Doe', 30);

new 用于实例化一个类并创建一个新的对象。person1 对象现在具有 name 和 age 属性，并且可以访问 greet() 方法。

原型继承：

ES6 class 还支持原型继承，允许从父类创建子类。extends 关键字用于指定子类的父类：

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

在上面的示例中，Employee 类继承了 Person 类的属性和方法。此外，它还定义了一个新的 jobTitle 属性。

多态性：

多态性允许对象以不同的方式响应相同的操作。在 ES6 中，多态性可以通过方法覆盖来实现：

class Manager extends Employee {
  greet() {
    super.greet(); // 调用父类的方法
    console.log('I am the manager.');
  }
}

const manager1 = new Manager('Jane Doe', 35, 'Manager');
manager1.greet(); // 输出：Hello, my name is Jane Doe and I am 35 years old. I am the manager.

在上面的示例中，Manager 类覆盖了 greet() 方法以提供更具体的实现。当调用 greet() 方法时，它会先调用父类的方法，然后添加额外的信息。

封装：

ES6 class 提供了更好的封装，允许将属性和方法隐藏在类内部。通过使用访问修饰符（public、private 和 protected），可以控制属性和方法的可见性和可访问性。

class SecretAgent {
  #codename; // 私有属性

  constructor(name) {
    this.name = name;
  }

  getCodename() {
    return this.#codename;
  }

  setCodename(newCodename) {
    this.#codename = newCodename;
  }
}