JavaRush /Курси /Frontend SELF UA /Синтаксис класів

Синтаксис класів

Frontend SELF UA
Рівень 39 , Лекція 4
Відкрита

5.1 Оголошення класу

З введенням ECMAScript 6 (ES6) у JavaScript з’явилася нова структура для створення об’єктів і управління наслідуванням — ключове слово class. Класи надають більш зручний та зрозумілий синтаксис для створення об'єктів і роботи з прототипами.

Класи в JavaScript — це синтаксичний цукор над існуючою прототипною системою наслідування. Вони роблять створення та управління об'єктами більш зрозумілим і структурованим.

Оголошення класу

Клас у JavaScript оголошується з використанням ключового слова class, після якого йде ім'я класу. Тіло класу укладено в фігурні дужки {}.

Приклад:

JavaScript
    
      class Person {
        // Метод класу
        greet() {
          console.log('Привіт!');
        }
      }

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

Вираз класу

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

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

JavaScript
    
      const Person = class PersonClass {
        greet() {
          console.log('Привіт!');
        }
      };

      const person = new Person();
      person.greet(); // Виведе: Привіт!
    
  

Приклад анонімного класу:

JavaScript
    
      const Person = class {
        greet() {
          console.log('Привіт!');
        }
      };

      const person = new Person();
      person.greet(); // Виведе: Привіт!
    
  

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('Тварина говорить');
        }

        eat() {
          console.log('Тварина їсть');
        }
      }

      const animal = new Animal();
      animal.speak(); // Виведе: Тварина говорить
      animal.eat();   // Виведе: Тварина їсть
    
  

5.3 Приклади використання класів

Створення складних об'єктів

Класи дозволяють створювати складні об'єкти з різними методами та властивостями.

Приклад:

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

        startEngine() {
          console.log(`${this.brand} ${this.model} двигун запущений.`);
        }

        stopEngine() {
          console.log(`${this.brand} ${this.model} двигун зупинений.`);
        }
      }

      const myCar = new Car('Toyota', 'Camry');
      myCar.startEngine(); // Виведе: Toyota Camry двигун запущений.
      myCar.stopEngine();  // Виведе: Toyota Camry двигун зупинений.
    
  
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ