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

Технический фундамент методов объекта

Метод — это функция в свойстве объекта, которая может использовать this для доступа к данным того же объекта.

const counter = {
  value: 0,
  inc() {
    this.value += 1;
    return this.value;
  },
};

console.log(counter.inc()); // 1

Ключевой момент: корректность метода зависит от контекста вызова (obj.method()), потому что от него зависит значение this.

Синтаксис

const user = {
  name: 'Ann',
  greet() {
    return `Привет, ${this.name}`;
  },
};

console.log(user.greet()); // Привет, Ann

Можно и в классической форме:

const calc = {
  add: function (a, b) {
    return a + b;
  },
};

`this` внутри метода

this указывает на объект, через который вызвали метод.

const cart = {
  total: 0,
  add(price) {
    this.total += price;
  },
};

cart.add(100);
console.log(cart.total); // 100

Проверь себя: что произойдет, если вызвать метод без объекта-контекста?

Подсказка: контекст потеряется, и this уже не будет ссылаться на cart.

const add = cart.add;
// add(100); // обычно TypeError: нельзя прочитать/изменить this.total

const addBound = cart.add.bind(cart);
addBound(100);
console.log(cart.total); // 200

Осторожно со стрелочными функциями

Стрелочную функцию обычно не используют как метод объекта, когда нужен this.

const bad = {
  name: 'Max',
  greet: () => `Hi, ${this.name}`,
};

console.log(bad.greet()); // обычно undefined для this.name

Анти-провал: для методов с this используй обычную функцию/краткий метод.

Микро-сценарии

Объект корзины с методами addItem, removeItem, getTotal.
Объект настроек с методом toggleTheme.

const settings = {
  theme: 'light',
  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  },
};

Типичные ошибки

Использовать стрелку в методе, где нужен this.
Путать данные и поведение (все писать только как поля).
Вызывать метод отдельно и терять контекст.
Слишком перегружать объект логикой, не разделяя обязанности.

Краткий итог

Метод — функция внутри объекта.
Методы описывают поведение сущности.
this ссылается на объект вызова.
Для методов с this лучше обычная функция/сокращенный синтаксис.
Грамотные методы делают код предметно-понятным.

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