学习如何在 JavaScript 中创建类

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

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

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

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

JavaScript 类结构

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

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

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

 class ClassName{
//class body
}

在 JavaScript 中创建类

在编程中,类可以被看作是用于创建专门对象的通用实体。例如,在学校环境中,广义实体(班级)可以是学生,而学生的对象可以是约翰·布朗。但是在创建对象之前,您需要知道它将存储的数据,这就是 JavaScript 构造函数发挥作用的地方。

在 JavaScript 类中使用构造函数

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

使用构造函数示例

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

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

上面的代码展示了 JavaScript 类构造函数的一个重要方面;与 Java 和 C++ 等其他语言不同,JavaScript 的构造函数不使用类名来创建构造函数。正如您在上面的示例中看到的那样,它使用构造函数关键字。

相关:学习如何在 Java 中创建类

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

每个建造的房子都可以被看作是这个类的一个对象。虽然这些房子中的每一个都是用相同的蓝图创建的,但它们可以通过特定的地理位置或拥有它们的人来区分。

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

在 JavaScript 中创建对象

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

相关:如何在 JavaScript 中声明变量

查看上面的 student 类构造函数,您可以看出该类的一个对象将具有三个属性。

创建对象示例

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

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

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

创建类的对象时,需要使用new关键字,后跟类名和要分配给各个属性的值。现在你有一个新学生,名字叫约翰,姓布朗,开始日期是 2018 年。你还有一个常量变量:约翰。此变量很重要,因为它允许您使用创建的对象。

如果没有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()方法,您需要使用该类的现有对象来进行简单的函数调用。

感谢上面的“创建对象示例”,您应该有一个Student类的对象,该对象分配给变量john 。使用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);

上面的代码使用Students类在控制台中生成以下输出:

 John Brown started attending this institution in 2018

在 JavaScript 类中使用静态方法

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

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

创建静态方法示例

下面是 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}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}

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

使用静态方法示例

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

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

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

 2022

创建 JavaScript 类很容易

如果你想创建一个 JavaScript 类并从中实例化一个或多个对象,你需要记住几件事:

  • JavaScript 类必须具有class关键字。
  • JavaScript 构造函数指示对象可以具有的值的数量。
  • 没有对象就不能使用通用类方法。
  • 静态方法可以在没有对象的情况下使用。

控制台。本文通篇使用log()方法来提供在 JavaScript 类中使用通用方法和静态方法的结果。此方法对于任何 JavaScript 开发人员来说都是一个有用的工具,因为它有助于调试过程。

熟悉console.log()方法是您作为 JavaScript 开发人员可以做的最重要的事情之一。