Что такое класс (минимум)

Урок: Что такое класс

Введение

Представь, что ты разрабатываешь сайт с интернет-магазином. У тебя есть товары: у каждого есть название, цена, описание. Потом появляются действия: добавить в корзину, изменить количество, удалить товар.

Можно хранить всё это разрозненно — в переменных и функциях. Но довольно быстро код превращается в хаос: данные лежат отдельно, логика отдельно, и становится трудно понять, что с чем связано.

И вот здесь появляется идея: объединить данные и поведение в одну структуру.

Например:

  • есть «Товар» как сущность;
  • у него есть свойства (название, цена);
  • у него есть действия (добавить в корзину).

Такую структуру в JavaScript называют классом.

Классы помогают:

  • структурировать код;
  • описывать реальные объекты (страницы, кнопки, пользователи);
  • писать более понятные и масштабируемые программы.

Особенно это важно в автоматизации тестирования (например, в Playwright), где мы работаем с страницами и их элементами как с объектами.

Что такое класс простыми словами

Класс — это шаблон (или чертёж), по которому создаются объекты.

Представь чертёж автомобиля:

  • он описывает, какие есть детали;
  • какие у машины есть характеристики;
  • но сам по себе не является машиной.

Точно так же:

  • класс — это описание;
  • объект — это конкретный экземпляр.

Пример на JavaScript — объявление и создание объекта в одном фрагменте, чтобы код в песочнице выполнялся целиком:

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

const user1 = new User('Анна');
console.log(user1.name);

Что здесь происходит:

  • class User — мы объявляем класс с именем User;
  • constructor — специальный метод, который вызывается при создании объекта;
  • this.name = name — сохраняем переданное значение внутрь объекта (поле объекта слева, параметр справа);
  • new User(...) — создаёт новый объект на основе класса;
  • console.log показывает, что у экземпляра появилось свойство name.

Свойства объекта

Свойства — это данные, которые хранит объект.

Расширим класс: два поля в конструкторе, затем создание и вывод:

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

const user1 = new User('Анна', 25);

console.log(user1.name);
console.log(user1.age);

Что важно понять:

  • this — это ссылка на текущий объект;
  • всё, что мы записываем через this, становится частью объекта.

Несколько объектов по одному шаблону

Один класс — много независимых экземпляров:

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

const u1 = new User('Анна');
const u2 = new User('Пётр');

console.log(u1.name, u2.name);

Зачем нужны классы

До классов в JavaScript можно было писать код через функции и объекты, но:

  • трудно поддерживать структуру;
  • сложно повторно использовать код;
  • логика и данные часто разделены.

Классы дают:

  1. Структуру Мы описываем, из чего состоит объект.

  2. Повторное использование Можно создать сколько угодно объектов по одному шаблону.

  3. Читаемость Код становится ближе к реальному миру:

    • User
    • Product
    • Cart
    • Page

Пример из автоматизации (подготовка к следующим урокам)

Представим страницу логина.

Без классов в тесте часто пишут прямые вызовы к page. В настоящем Playwright это асинхронно; в песочнице теории мы используем учебный мок page, который только пишет в консоль, что «было бы» вызвано:

const page = {
  fill: async (selector, value) => {
    console.log('fill', selector, value);
  },
  click: async (selector) => {
    console.log('click', selector);
  },
};

(async () => {
  await page.fill('#login', 'user');
  await page.fill('#password', '123');
  await page.click('#submit');
})();

С классом (упрощённо) — страница как объект, внутри храним ссылку на page:

class LoginPage {
  constructor(page) {
    this.page = page;
  }
}

const page = {
  fill: async (s, v) => console.log('fill', s, v),
  click: async (s) => console.log('click', s),
};

const loginPage = new LoginPage(page);
console.log('Страница привязана:', loginPage.page === page);

Мы описали страницу как объект.

В следующих уроках мы добавим:

  • методы (действия);
  • асинхронность (async/await);
  • использование в тестах.

Это и есть путь к Page Object Pattern, который используется в Playwright.

Как работает создание объектов

Важно понять механику — один запуск: класс, new, проверка:

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

const user1 = new User('Анна');
console.log('name:', user1.name);
console.log('это экземпляр User?', user1 instanceof User);

Под капотом при new происходит:

  1. Создаётся новый объект
  2. Вызывается constructor
  3. this указывает на этот объект
  4. Свойства записываются в него
  5. Объект возвращается в переменную

Связь с последующими уроками

Этот урок — фундамент.

Дальше мы будем постепенно развивать идею:

  • Урок 2: добавим методы (поведение объектов)
  • Урок 3: превратим классы в Page Object для Playwright
  • Урок 4: добавим асинхронные действия
  • Урок 5: научимся использовать классы в реальных тестах

То есть сейчас ты учишься: → создавать «объекты» → дальше научишься «заставлять их работать»

Итоговое понимание

Класс — это не просто синтаксис, а способ думать о коде как о наборе объектов.

Ты описываешь:

  • что это за сущность;
  • какие у неё есть данные;
  • (в следующих уроках) какие у неё есть действия.

Главная идея урока:

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

Именно это позволяет:

  • писать более чистый код;
  • легче масштабировать проект;
  • строить архитектуру тестов в Playwright.

В следующем уроке мы сделаем следующий шаг — научим наши классы что-то делать.