Узнайте, как создавать классы в JavaScript

8 августа, 2021 Дядя Влад

В 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

Глядя на конструктор класса ученика выше, вы можете заметить, что объект этого класса будет иметь три атрибута.

Создание примера объекта

Ниже вы увидите пример создания объекта в JavaScript.

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

В приведенном выше коде для создания объекта используется класс Student .

При создании объекта класса вам необходимо использовать ключевое слово new , за которым следует имя класса и значения, которые вы хотите присвоить соответствующим атрибутам. Теперь у вас есть новый ученик с именем Джон, фамилией Браун и датой начала обучения 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 (), вам нужно будет использовать существующий объект класса, чтобы сделать простой вызов функции.

Благодаря приведенному выше «примеру создания объекта» у вас должен быть объект класса 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);

Код выше использует класс студентов , чтобы произвести следующий вывод в консоли:

 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));

В приведенной выше строке кода класс « Студенты» используется для вывода на консоль следующего вывода:

Создать класс JavaScript легко

Есть несколько вещей, которые вам нужно запомнить, если вы хотите создать класс JavaScript и создать из него один или несколько объектов:

Класс JavaScript должен иметь ключевое слово class .
Конструктор JavaScript указывает количество значений, которые может иметь объект.
Методы общего класса нельзя использовать без объекта.
Статические методы можно использовать без объекта.

Консоль . В этой статье используется метод log () для получения результатов использования как общих, так и статических методов в классе JavaScript. Этот метод является полезным инструментом для любого разработчика JavaScript, поскольку он помогает в процессе отладки.

Знакомство с методом console.log () – одна из самых важных вещей, которую вы можете сделать как разработчик JavaScript.