JavaRush /Курсы /Модуль 1: Web Core /Cинтаксис классов

Cинтаксис классов

Модуль 1: Web Core

20 уровень , 4 лекция

Открыта

5.1 Объявление класса

С введением ECMAScript 6 (ES6) в JavaScript появилась новая структура для создания объектов и управления наследованием — ключевое слово class. Классы предоставляют более удобный и понятный синтаксис для создания объектов и работы с прототипами.

Классы в JavaScript — это синтаксический сахар над существующей прототипной системой наследования. Они делают создание и управление объектами более понятным и структурированным.

Объявление класса

Класс в JavaScript объявляется с использованием ключевого слова class, за которым следует имя класса. Тело класса заключено в фигурные скобки {}.

Пример:

JavaScript

    
      class Person {
        // Метод класса
        greet() {
          console.log('Hello!');
        }
      }

      // Создание экземпляра класса
      const person = new Person();
      person.greet(); // Выведет: Hello!

Выражение класса

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

Пример именованного класса:

JavaScript

    
      const Person = class PersonClass {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Выведет: Hello!

Пример анонимного класса:

JavaScript

    
      const Person = class {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Выведет: Hello!

5.2 Поля и методы классов

Свойства классов

Свойства классов в ES6 можно объявлять только внутри конструктора. Однако в более новых версиях JavaScript (ES2022) введены поля классов, позволяющие объявлять свойства вне конструктора.

Пример использования свойств в конструкторе:

JavaScript

    
      class User {
        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"

Пример использования полей классов (ES2022):

JavaScript

    
      class User {
        username = 'default_username';
        email = 'default@example.com';

        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"

Объяснение:

В первом примере свойства username и email объявляются и инициализируются внутри конструктора
Во втором примере свойства username и email объявляются вне конструктора как поля класса

Методы класса

Класс может содержать методы, которые определяются внутри тела класса. Эти методы автоматически добавляются в прототип созданных объектов.

Пример методов класса:

JavaScript

    
      class Animal {
        speak() {
          console.log('Animal speaks');
        }

        eat() {
          console.log('Animal eats');
        }
      }

      const animal = new Animal();
      animal.speak(); // Выведет: Animal speaks
      animal.eat();   // Выведет: Animal eats

5.3 Примеры использования классов

Создание сложных объектов

Классы позволяют создавать сложные объекты с различными методами и свойствами.

Пример:

JavaScript

    
      class Car {
        constructor(brand, model) {
          this.brand = brand;
          this.model = model;
        }

        startEngine() {
          console.log(`${this.brand} ${this.model} engine started.`);
        }

        stopEngine() {
          console.log(`${this.brand} ${this.model} engine stopped.`);
        }
      }

      const myCar = new Car('Toyota', 'Camry');
      myCar.startEngine(); // Выведет: Toyota Camry engine started.
      myCar.stopEngine();  // Выведет: Toyota Camry engine stopped.

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (4)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

Виталий Уровень 48

1 июля 2025

Все три способа объявляют классы в JavaScript и работают похожим образом, но между ними есть некоторые отличия. 1) class Person { ... } — это класс с именем Person. Его объявление хостится (поднимается) в пределах блока, и к классу можно обращаться до объявления в блоке, но обращение вне блока до объявления вызовет ошибку. Имя класса — Person, и оно доступно как внутри класса (например, для рекурсии). 2) const Person = class PersonClass { ... } — это класс с именем PersonClass, но он присвоен переменной Person. Внутри класса доступно имя PersonClass (например, для рекурсивных вызовов), снаружи — имя Person. Такое объявление удобно, если нужно использовать внутреннее имя класса, но при этом обращаться снаружи через другое имя. Переменная Person неизменна. 3) const Person = class { ... } — анонимный класс, который присваивается переменной Person. У класса нет внутреннего имени, значит, внутри невозможно обращаться к нему по имени (например, для самореференса или рекурсии). Внешне используется имя переменной Person. Это простой и часто используемый способ, если внутреннее имя класса не требуется.

Андрей Уровень 50

30 мая 2025

Пример использования полей классов (ES2022): class User { username = 'default_username'; email = 'default@example.com'; constructor(username, email) { if(username) this.username = username; if(email) this.email = email; } } так работает.

RayCowperwood Уровень 48

4 июня 2025

Можно заменить ifв, для лучшего чтения, с использованием логического ИЛИ


this.username = username  || this.username;
this.email = email || this.email;

Максим Уровень 55

8 июля 2025

class User { constructor(username='default_username', email='default@example.com') { this.username = username; this.email = email; } } Вот наиболее понятный пример после python.