JS метод Statements.class()

Загальний опис

Ключове слово class у JavaScript відіграє важливу роль у створенні більш структурованого та легкого для розуміння об'єктно-орієнтованого коду. Введене у ECMAScript 2015 (ES6), class надає більш чітку та зручну синтаксичну конструкцію для створення об'єктів та керування спадкуванням. Використання class сприяє кращій організації коду та спрощує імплементацію складних об'єктних структур, що робить його незамінним інструментом в розробці сучасних JavaScript-додатків.

На практиці, class використовується для створення нових класів об'єктів. Класи в JavaScript - це "шаблони" для створення об'єктів, що містять як спільні властивості (атрибути), так і методи. Така структура є дуже схожою на класи в інших об'єктно-орієнтованих мовах програмування, що робить її легкою для розуміння та використання.

Для створення класу за допомогою class, спочатку оголошується новий клас, після чого визначаються його конструктор та методи. Конструктор – це спеціальний метод, що автоматично викликається при створенні нового об'єкта класу, і використовується для ініціалізації властивостей об'єкта.

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

    display() {
        console.log(`This car is a ${this.brand} ${this.model}.`);
    }
}

let myCar =

 new Car("Toyota", "Corolla");
myCar.display(); // Виводить: "This car is a Toyota Corolla."

У цьому прикладі, клас Car має конструктор, який приймає два аргументи - brand і model. Ці аргументи використовуються для ініціалізації властивостей об'єкта. Метод display визначений для виведення інформації про автомобіль.

Крім того, JavaScript дозволяє використовувати спадкування класів за допомогою ключового слова extends. Це дозволяє створювати нові класи, що наслідують властивості та методи іншого класу, що сприяє більшій повторній використовуваності коду та спрощенню його структури.

class ElectricCar extends Car {
    constructor(brand, model, batteryLife) {
        super(brand, model); // Викликає конструктор батьківського класу
        this.batteryLife = batteryLife;
    }

    displayBatteryLife() {
        console.log(`Battery life is ${this.batteryLife} hours.`);
    }
}

let myElectricCar = new ElectricCar("Tesla", "Model S", 24);
myElectricCar.display(); // Виводить: "This car is a Tesla Model S."
myElectricCar.displayBatteryLife(); // Виводить: "Battery life is 24 hours."

У цьому прикладі, ElectricCar наслідується від класу Car та додатково містить властивість batteryLife та метод displayBatteryLife. Ключове слово super використовується для виклику конструктора батьківського класу, що дозволяє ElectricCar успадкувати властивості brand і model від Car.

Можливість використання статичних методів у класах також додає додаткову гнучкість. Статичні методи належать класу, а не конкретному екземпляру об'єкта, і можуть бути викликані без створення екземпляра класу.

class Calculator {
    static add(a, b) {
        return a + b;
    }

    static subtract(a, b) {
        return a - b;
    }
}

console.log(Calculator.add(5, 3)); // Виводить: 8
console.log(Calculator.subtract(5, 3)); // Виводить: 2

У цьому прикладі, клас Calculator має статичні методи add та subtract, які можуть бути викликані без створення нового екземпляра Calculator.

Класи в JavaScript також підтримують використання гетерів і сетерів для контролю доступу до властивостей об'єкта. Це дозволяє реалізувати додаткову логіку при читанні або зміні властивостей, що забезпечує більшу гнучкість і безпеку.

class User {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        if (value.length < 4) {
            console.log("Name is too short.");
            return;
        }
        this._name = value;
    }
}

let user = new User("John");
console.log(user.name); // Виводить: John
user.name = "Al"; // Виводить: Name is too short.

У цьому прикладі, User має приватну властивість _name та гетер і сетер для неї. Сетер дозволяє валідувати дані перед їх присвоєнням.

Таким чином, class у JavaScript надає могутній, але при цьому інтуїтивно зрозумілий спосіб створення та керування об'єктами, що сприяє створенню більш організованого, масштабованого та легко підтримуваного коду.

Синтаксис

class name {
  // class body
}
class name extends otherName {
  // class body
}

Параметри

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2

class Book {
    constructor(title, author) {
        this.title = title; // Встановлюємо назву книги
        this.author = author; // Встановлюємо автора книги
    }

    displayInfo() {
        return `Книга: ${this.title}, Автор: ${this.author}`;
    }
}

const myBook = new Book("451° за Фаренгейтом", "Рей Бредбері");
console.log(myBook.displayInfo()); // Виводимо інформацію про книгу

class Vehicle {
    constructor(make) {
        this.make = make; // Виробник транспортного засобу
    }

    displayMake() {
        return `Виробник: ${this.make}`;
    }
}

class Car extends Vehicle {
    constructor(make, model) {
        super(make); // Виклик конструктора базового класу
        this.model = model; // Модель автомобіля
    }

    displayModel() {
        return `Модель: ${this.model}`;
    }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.displayMake()); // Виводимо виробника
console.log(myCar.displayModel()); // Виводимо модель