Вопросы на собеседовании фронтенд-разработчика. Классы в JS

Что такое класс

Классы — один из паттернов программирования, форма организации кода и архитектуры. Они используются для моделирования предметных областей реального мира в программах.

Классово-ориентированное (объектно-ориентированное) программирование основано на том, что данные связываются с поведением, которое взаимодействует с данными. То есть данные упаковываются (инкапсулируются) вместе с поведением.

Класс можно представить как определённый план, на основе которого можно что-то построить (создать экземпляр).

В JavaScript все классы являются функциями.

typeof class Book {} // 'function'

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

constructor() — это автоматически вызываемый метод для создания (инициализации) объекта.

class Book {
    constructor(author, title) {
        this.author = author;
        this.title = title;
    }
}

const book = new Book('Иван', 'Заголовок');
console.log(book) // { author: 'Иван', title: 'Заголовок' }

Без использования синтаксиса классов, метод constructor() будет выглядеть просто как тело функции:

function Book(author, title) {
    this.author = author;
    this.title = title;
}

const book = new Book('Иван', 'Заголовок');
console.log(book) // { author: 'Иван', title: 'Заголовок }

Не стоит путать метод constructor() у классов и свойство с именем constructor у объекта prototype объявленной функции.

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

В классе, как и в обычном объекте, можно объявлять методы:

class Logger {
    info(message) {
        console.info(message);
    }
}

Все объявленные методы класса являются не перечисляемыми (enumerable: false), т.е. при использовании, например for..in, для прохода по свойствам и методам созданного объекта, методы класса будут недоступны.

Без использования синтаксиса классов объявление метода выглядело бы так:

function Logger() {}
Logger.prototype.info = function(message) {
    console.info(message);
}

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

class Logger {
    defaultMessage = 'Hi';
}

Свойства не добавляются в объект prototype. Они добавляются к созданному объекту при инициализации:

Logger.prototype // { info: ..function }

const logger = new Logger();
logger.defaultMessage // 'Hi'

Статические свойства и методы

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

Расширение функционала

С помощью ключевого слова extends можно расширить функционал класса:

class Book {
    showSomething () {
        console.log('Что-то');
    }
}

class FantasyBook extends Book {}

const fantasyBook = new FantasyBook();
fantasyBook.showSomething() // 'Что-то'

без использования extends будет выглядеть так:

function Book() {}
Book.prototype.showSomething= function() {
    console.log('Что-то');
}

function FantasyBook() {}
Object.setPrototypeOf(FantasyBook.prototype, Book.prototype);

const fantasyBook = new FantasyBook();
fantasyBook.showSomething() // 'Что-то'

Доступ к родительскому классу

Дочерний класс может обратиться к родительскому классу (если такой имеется).

Для вызова родительского метода constructor() необходимо использовать метод super(). Он работает только в дочернем constructor().

С помощью super.[methodName]() можно обратиться к методам родительского класса.