Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Класс

Прототипы, с одной стороны, мощный механизм, с другой — он низкоуровневый. Другими словами, при использовании прототипов придется писать довольно много однообразного кода, особенно для реализации цепочек. По этой причине разработчики JavaScript внедрили в язык понятие Класс, как более привычное и понятное для большинства разработчиков. С появлением классов программировать на JavaScript стало действительно проще, но классы в JavaScript имеют очень серьезные отличия от классов многих других языков. Начнем с примера. Ниже код обычной абстракции на JavaScript:

function Company(name, email) {
  this.name = name;
  this.email = email;
};

Company.prototype.getName = function getName() {
  return this.name;
}

Company.prototype.getEmail = function getEmail() {
  return this.email;
}

Company.prototype.setEmail = function setEmail(email) {
  this.email = email;
}

const company = new Company('Hexlet');
console.log(company.getName()); // => "Hexlet"

Этот код можно представить классом:

// Каждый класс должен лежать в своем собственном файле
// Идеально если имя класса совпадает с именем файла с учетом регистра
class Company { // имя класса - это имя функции конструктора
  // Метод с именем constructor соответствует функции-конструктору
  // Он вызывается, когда мы делаем new Company(name, email)
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // Это свойство getName с записанной в него обычной (function) функцией
  getName() {
    return this.name;
  }

  getEmail() {
    return this.email;
  }

  setEmail(email) {
    this.email = email;
  }
}

// С точки зрения использования не меняется ничего
const company = new Company('Hexlet', 'support@hexlet.io'); // вызывается метод constructor
console.log(company.getName()); // => "Hexlet"

Метод, соответствующий функции-конструктору внутри класса, называется constructor. Интерпретатор вызывает его автоматически при создании нового объекта через new. Если конструктор отсутствует – то ничего страшного не произойдет. Это равносильно созданию и вызову пустой функции-конструктора:

function Company() {

}

const company = new Company();

Классы повышают уровень абстракции и дают разработчикам инструмент, к которому они привыкли в других языках. Они действительно позволяют не задумываться о прототипах, лежащих в их основе. По крайней мере, пока речь идет о написании прикладного кода. А вот во время отладки без знания прототипов не обойтись. Кроме того, они иногда напрямую используются в библиотеках, потому что позволяют сделать вещи, которые нельзя сделать с помощью классов.

Свойства

В объектах встречаются свойства, имеющие значения по умолчанию. Например, у компании могут быть сотрудники. Если в компанию не был добавлен ни один сотрудник, то метод, возвращающий список сотрудников, должен вернуть пустой массив. Если он этого не сделает, то это сильно усложнит разработку, так как везде придется делать проверки на существование:

const company = new Company();
company.getEmployees(); // []

Как этого добиться? Без классов это делается прямо внутри функции-конструктора:

function Company() {
  this.employees = [];
}

Так же поступают и в классах:

class Company {
  constructor() {
    this.employees = [];
  }
  // остальные методы
}

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

class Company {
  employees = [];
}

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

Подводные камни

Классы в JavaScript не статичны, как это сделано во многих языках, где один раз определив класс, вы больше не можете его менять. Мы по-прежнему работаем с прототипами и функциями, выполняющими роль конструкторов. Мы можем написать такой код после того, как класс был определен:

// В любом месте программы после определения класса
Company.prototype.greeting = function greeting() {
  return `Hello, ${this.name}!`;
}

const company = new Company('Hexlet');
console.log(company.greeting()); // => "Hello, Hexlet!"

Как правильно использовать классы?

Стоит начать с того, что классы в JavaScript нужны далеко не всегда. JavaScript — мощный язык программирования, который не заставляет использовать одну парадигму программирования (в отличие от Java, например). С его помощью просто делать простые вещи и при необходимости применять сложные концепции для сложных вещей.

ООП в принципе и классы в частности – сложные концепции, которые невозможно выучить заранее по курсам, видео и статьям. Единственный способ разобраться – писать продакшен код, совершать ошибки и исправлять их (за счет советов более опытных разработчиков).

Существует миф о том, что классы нужны для моделирования реального мира. С их помощью такое действительно делают (даже в коде выше у нас есть компания), но это очень узкое понимание назначения классов. В жизни их используют для совершенно разных целей. В коде сложных приложений могут быть сотни и тысячи классов, большая часть из которых не имеет никакой связи с реальным миром (адаптеры к базе данных, разные стратегии кеширования). В следующих курсах, посвященных ООП, мы погрузимся больше в то, как проектировать классы и в каких ситуациях вводить.


Дополнительные материалы

  1. @babel/plugin-proposal-class-properties

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».