学习如何在 JavaScript 中创建类

布满荆棘的人生 2023-09-28 08:02 122阅读 0赞

2015 年，发布了 JavaScript 编程语言的 ES6 版本。此版本对该语言进行了一些重大升级，并正式将其置于 Java 和 C++ 等其他语言中的面向对象编程语言的类别中。

面向对象的编程关注对象以及可以对它们执行的操作。但是，在您拥有任何对象之前，您需要拥有一个类。

JavaScript 类是该语言的 ES6 版本附带的改变游戏规则的特性之一。类可以描述为用于创建对象的蓝图。

在本教程文章中，您将学习如何使用 JavaScript 类创建和操作对象。

### **JavaScript 类结构** ###

在 JavaScript 中创建类时，您始终需要一个基本组件——class**关键字**。JavaScript 类的几乎所有其他方面都不是成功执行所必需的。

如果未提供构造函数，则 JavaScript 类将自然执行（该类将在执行期间简单地创建一个空的构造函数）。但是，如果 JavaScript 类是使用构造函数和其他函数创建的，但没有使用 class 关键字，则该类将无法执行。

**class**关键字（应该总是小写）在 JavaScript 的类结构中是必需的。以下示例是 JavaScript 类的一般语法。JavaScript 类语法如下：

class ClassName{
    //class body
    }

### **在 JavaScript 中创建一个类** ###

在编程中，类可以看作是用于创建专门对象的通用实体。例如，在学校环境中，广义实体（班级）可以是学生，学生的对象可以是 John Brown。但是在创建对象之前，您需要知道它将存储的数据，这就是 JavaScript 构造函数发挥作用的地方。

### **在 JavaScript 类中使用构造函数** ###

由于以下几个原因，构造函数对于类创建过程至关重要；它初始化对象的状态（通过其属性），并在实例化（定义和创建）新对象时自动调用它。

#### **使用构造函数示例** ####

下面，您将看到一个构造函数示例，其中解释了它的含义。

class Student{
    constructor(firstName, lastName, startDate){
    this.firstName = firstName;
    this.lastName = lastName;
    this.startDate = startDate;
    }
    }

上面的代码展示了 JavaScript 类构造函数的一个重要方面；与 Java 和 C++ 等其他语言不同，JavaScript 的构造函数不使用类名来创建构造函数。如上例所示，它使用**构造函数关键字。**

**有关的：[学习如何在 Java 中创建类][Java]**

上面示例中的**构造函数**接受三个参数，并使用**this**关键字将参数分配给类的当前实例。这可能看起来有点令人困惑，但您需要了解的是，一个类可以看作是用于创建许多房屋的蓝图。

然后可以将每个建造的房屋视为此类的对象。尽管这些房屋中的每一个都是使用相同的蓝图创建的，但它们可以通过其特定的地理位置或拥有它们的人来区分。

**this**关键字用于区分类创建的每个对象。它确保为使用同一类创建的每个对象存储和处理正确的数据。

### **在 JavaScript 中创建对象** ###

构造函数在 JavaScript 这样的语言中很重要，因为它们表示特定类的对象应具有的属性数量。某些语言会要求先声明属性（变量），然后才能在构造函数或任何其他方法中使用它。但是，JavaScript 并非如此。

**有关的：[如何在 JavaScript 中声明变量][JavaScript]**

查看上面的学生类构造函数，可以看出这个类的一个对象将具有三个属性。

#### **创建对象示例** ####

下面，您将看到一个在 JavaScript 中创建对象的示例。

//create a new object
    const john = new Student('John', 'Brown', '2018');

上面的代码使用**Student**类来创建一个对象。

创建类的对象时，您需要使用**new**关键字，后跟类名和要分配给相应属性的值。现在您有一个新学生，名字为 John，姓氏为 Brown，开始日期为 2018 年。您还有一个常量变量：**john。**这个变量很重要，因为它允许您使用创建的对象。

如果没有**john**变量，您仍然可以使用**Student**类创建一个新对象，但是将无法访问该对象并将其与该类的不同方法一起使用。

### **在 JavaScript 类中使用方法** ###

方法是类的函数，用于对从该类创建的对象执行操作。添加到学生班级的一种好方法是生成每个学生的报告。

#### **创建类方法示例** ####

下面是在 JavaScript 中创建类方法的示例。

class Student{
    constructor(firstName, lastName, startDate){
    this.firstName = firstName;
    this.lastName = lastName;
    this.startDate = startDate;
    }
    // report method
    report(){
    return `${
           this.firstName} ${
           this.lastName} started attending this institution in ${
           this.startDate}`
    }
    }

**上面的类包含一个方法，该方法将为使用Student**类创建的每个学生生成报告。要使用**report()**方法，您需要使用该类的现有对象来进行简单的函数调用。

感谢上面的“创建对象示例”，您应该有一个分配给变量**john的****Student**类的对象。使用**john**，您现在可以成功调用**report()**方法。

#### **使用类方法示例** ####

下面是在 JavaScript 中使用类方法的示例。

//create a new object
    const john = new Student('John', 'Brown', '2018');
    //calling the report method and storing its result in a variable
    let result = john.report();
    //printing the result to the console
    console.log(result);

上面的代码使用**Student**类在控制台中生成以下输出：

John Brown started attending this institution in 2018

### **在 JavaScript 类中使用静态方法** ###

静态方法是独一无二的，因为它们是 JavaScript 类中唯一可以在没有对象的情况下使用的方法。

从上面的示例中，您不能在没有类对象的情况下使用**report()**方法。这是因为**report()**方法依赖于对象的属性来产生理想的结果。但是，要使用静态方法，您只需要存储该方法的类的名称。

#### **创建静态方法示例** ####

下面是 JavaScript 的静态方法示例。

从上面的示例中要注意的重要一点是，每个静态方法都以**static**关键字开头。

#### **使用静态方法示例** ####

下面是在 JavaScript 中使用静态方法的示例。

//calling a static method and printing its result to the console
    console.log(Student.endDate(2018));

上面的代码行使用**Student**类在控制台中生成以下输出：