Методы объекта в JavaScript

• Что такое метод объекта
• Создание метода
• Короткая запись метода
• Вызов метода
• this внутри метода
• Методы с параметрами
• Добавление метода после создания объекта
• Стрелочные функции в методах
• Итого

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

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

sayHi - это метод объекта user. Его значение - функция.

Что такое метод объекта

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

let user = {
  name: 'Анна',
  age: 28,
  sayHi: function () {
    console.log('Привет!');
  },
};

name и age хранят данные. sayHi хранит действие.

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

Создание метода

Метод можно записать как обычное свойство, где значением будет функция.

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

user.sayHi(); // Привет!

После имени метода ставятся круглые скобки, потому что мы вызываем функцию.

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

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

let user = {
  name: 'Анна',
  sayHi() {
    console.log('Привет!');
  },
};

user.sayHi(); // Привет!

Запись sayHi() внутри объекта равнозначна записи sayHi: function (). В современных проектах чаще встречается короткий вариант.

Вызов метода

Метод вызывают через точку от имени объекта.

let calculator = {
  showResult() {
    console.log('Результат готов');
  },
};

calculator.showResult();

Если имя метода хранится в переменной или содержит пробел, можно использовать квадратные скобки.

let user = {
  'say hi'() {
    console.log('Привет!');
  },
};

user['say hi'](); // Привет!

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

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

let user = {
  name: 'Анна',
  sayHi() {
    console.log('Привет, ' + this.name);
  },
};

user.sayHi(); // Привет, Анна

В этом примере this указывает на объект user, потому что метод вызван как user.sayHi().

Можно было бы написать user.name, но this.name удобнее, когда один и тот же метод может работать с разными объектами.

function showName() {
  console.log(this.name);
}

let firstUser = {
  name: 'Анна',
  showName,
};

let secondUser = {
  name: 'Олег',
  showName,
};

firstUser.showName(); // Анна
secondUser.showName(); // Олег

Функция одна, а результат разный, потому что this определяется во время вызова метода.

Методы с параметрами

Метод может принимать параметры, как обычная функция.

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

cart.add(500);
cart.add(1200);

console.log(cart.total); // 1700

В метод add() передается цена. Затем метод прибавляет ее к свойству total этого же объекта.

Добавление метода после создания объекта

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

let user = {
  name: 'Анна',
};

user.sayHi = function () {
  console.log('Привет, ' + this.name);
};

user.sayHi(); // Привет, Анна

Здесь мы создали новое свойство sayHi и записали в него функцию.

Стрелочные функции в методах

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

let user = {
  name: 'Анна',
  sayHi: () => {
    console.log(this.name);
  },
};

user.sayHi(); // undefined

Стрелочная функция не создает собственный this. Поэтому в таком методе this не будет указывать на объект user.

Если методу нужен доступ к свойствам объекта через this, лучше использовать короткую запись метода.

let user = {
  name: 'Анна',
  sayHi() {
    console.log(this.name);
  },
};

user.sayHi(); // Анна

Итого

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

• Метод вызывается через объект: user.sayHi().
• Короткая запись sayHi() удобнее записи sayHi: function () .
• this внутри метода обычно указывает на объект, через который метод вызвали.
• Методы могут принимать параметры, как обычные функции.
• Для методов, которым нужен this, не стоит использовать стрелочные функции.