Урок: Методы класса

Введение

На прошлом уроке мы познакомились с классами и научились создавать объекты — структуры, которые хранят данные. Но если подумать, в реальной жизни объекты не только «существуют», они ещё и что-то делают.

Например:

• пользователь может войти в систему;
• товар можно добавить в корзину;
• страница может отправить форму.

Если в классе есть только данные — это половина картины. Настоящая сила появляется тогда, когда объект умеет выполнять действия.

И вот здесь появляются методы класса.

Методы — это способ «оживить» объект. Они описывают, что объект умеет делать.

Что такое методы класса

Метод — это функция внутри класса, которая работает с объектом.

Объявление, создание экземпляра и вызов метода в одном фрагменте:

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

  sayHello() {
    console.log('Привет, меня зовут ' + this.name);
  }
}

const user1 = new User('Анна');
user1.sayHello();

Что происходит:

• sayHello() — это метод класса;
• он вызывается через объект: user1.sayHello();
• внутри метода используется this.name, то есть данные конкретного объекта.

Как методы работают с данными

Главная идея: методы работают с теми свойствами, которые есть у объекта.

class Counter {
  constructor() {
    this.value = 0;
  }

  increment() {
    this.value = this.value + 1;
  }

  show() {
    console.log(this.value);
  }
}

const counter = new Counter();

counter.increment();
counter.increment();
counter.show();

Разбор:

• this.value хранит состояние объекта;
• increment() изменяет это состояние;
• show() читает и выводит его.

Объект хранит состояние, а методы это состояние изменяют или используют.

Ключевое слово this

this — одна из самых важных вещей в классах.

Оно означает: → «текущий объект»

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

  changeName(newName) {
    this.name = newName;
  }
}

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

user1.changeName('Мария');

console.log(user1.name);

Объяснение:

• this.name — это поле именно этого объекта;
• когда вызываем user1.changeName(...), this внутри метода указывает на user1.

Если бы не было this, метод не знал бы, с каким объектом он работает.

Методы как поведение объекта

Попробуем мыслить правильно:

• свойства — это что у объекта есть;
• методы — это что объект умеет делать.

class Cart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getItemsCount() {
    return this.items.length;
  }
}

const cart = new Cart();

cart.addItem('Телефон');
cart.addItem('Ноутбук');

console.log(cart.getItemsCount());

Что здесь важно:

• items — данные;
• addItem() — действие (изменяет данные);
• getItemsCount() — возвращает результат на основе данных.

Подготовка к Playwright (очень важно)

В автоматизации тестов методы — это основа.

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

class LoginPage {
  constructor(page) {
    this.page = page;
    this.loginField = '#login';
    this.passwordField = '#password';
  }

  fillLogin(login) {
    console.log('fill', this.loginField, login);
  }

  fillPassword(password) {
    console.log('fill', this.passwordField, password);
  }

  clickSubmit() {
    console.log('click', '#submit');
  }
}

const fakePage = {};
const loginPage = new LoginPage(fakePage);

loginPage.fillLogin('user');
loginPage.fillPassword('123');
loginPage.clickSubmit();

Обрати внимание:

• класс = страница;
• методы = действия пользователя.

Это ключевая идея Page Object.

Почему нельзя просто писать функции отдельно

Можно написать отдельные функции, но они не связаны с общим состоянием «страницы». Сравни: те же шаги через функции с явной передачей page:

function fillLogin(page, login) {
  console.log('fill #login', login, 'на', page.label);
}

function fillPassword(page, password) {
  console.log('fill #password', password, 'на', page.label);
}

const ctx = { label: 'mock-page' };

fillLogin(ctx, 'user');
fillPassword(ctx, '123');

С классом:

• всё собрано в одном месте;
• методы работают с общим this.page / полями;
• код становится логичным: «страница умеет делать действия».

Связь с будущими уроками

Важно понимать, куда мы движемся:

• Сейчас: → учимся создавать методы

• Дальше:

  • Урок 3: используем методы внутри Page Object
  • Урок 4: добавим async/await (методы станут асинхронными)
  • Урок 5: будем вызывать методы в реальных тестах

То есть:

методы → действия → автоматизация

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

Методы класса — это способ описать поведение объекта.

Главная идея:

Объект — это не просто набор данных, а сущность, которая умеет выполнять действия над этими данными.

Методы:

• используют this, чтобы работать с конкретным объектом;
• изменяют состояние или возвращают результат;
• превращают класс из «структуры» в «живую модель».

И самое важное для дальнейшего обучения:

в автоматизации тестов методы класса — это действия пользователя на странице.

На следующем уроке мы объединим всё это и начнём строить настоящие Page Object-классы в Playwright.