Методы и this

Объект может хранить не только данные, но и действия над ними. Функция, которая лежит в свойстве объекта, называется методом. Благодаря методам данные и код, который с ними работает, оказываются в одном месте.

Метод объекта

Метод — это обычная функция, записанная как значение свойства. Вызывают её через точку и круглые скобки:

const user = {
  name: 'Анна',
  greet: function () {
    return 'Привет!';
  },
};
 
console.log(user.greet()); // Привет!

Краткая запись метода

Слова : function можно опустить — так методы и пишут в современном коде:

const calculator = {
  add(a, b) {
    return a + b;
  },
};
 
console.log(calculator.add(2, 3)); // 5

this

Внутри метода слово this означает объект, у которого метод вызвали. Через него метод читает и меняет свойства своего объекта:

const user = {
  name: 'Анна',
  greet() {
    return `Привет, я ${this.name}`;
  },
};
 
console.log(user.greet()); // Привет, я Анна

Значение this определяется в момент вызова: в записи user.greet() это объект слева от точки.

Методы, которые меняют объект

Метод может изменять свойства объекта. Так устроены счётчики, корзины и другие объекты с состоянием — данными, которые меняются со временем:

const counter = {
  value: 0,
  increment() {
    this.value++;
  },
};
 
counter.increment();
counter.increment();
 
console.log(counter.value); // 2

Краткая запись свойств

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

const name = 'Олег';
const age = 30;
 
const user = { name, age };
 
console.log(user.age); // 30

Запись { name, age } означает то же, что { name: name, age: age }.

Частая ошибка

У стрелочной функции нет своего this, поэтому её не используют для методов. Кроме того, this теряется, если метод отделить от объекта и вызвать отдельно:

const user = {
  name: 'Анна',
  greet() {
    return `Привет, я ${this.name}`;
  },
};
 
const greet = user.greet; // метод скопирован без объекта
greet();                  // this больше не указывает на user

Так случается, когда метод передают в другую функцию, например в setTimeout(user.greet, 1000). Решение — передать стрелочную функцию, которая вызовет метод у объекта: setTimeout(() => user.greet(), 1000).