Контекст виконання функції

Можна з упевненістю сказати, що ключове слово this - це одна з найзаплутаніших концепцій JavaScript на старті навчання. Новачки часто підставляють this методом наукового тику доти, доки скрипт не спрацює.

Контекст у JavaScript схожий на контекст у реченні:

• Петя біжить швидко, тому що Петя намагається зловити поїзд.
• Петя біжить швидко, тому що він намагається зловити поїзд.

Друге речення звучить лаконічніше. Підмет речення - Петя, і ми можемо сказати, що контекст речення - це Петя, тому що він у центрі уваги у цей конкретний час у реченні. Навіть займенник «хто» стосується Петі.

І точно так само об'єкт може бути поточним контекстом виконання функції.

// Петя біжить швидко, тому що Петя намагається зловити поїзд.
const petya = {
  username: "Petya",
  showName() {
    console.log(petya.username);
  },
};

petya.showName();

Звернення до властивостей об'єкта всередині методів, використовуючи ім'я самого об'єкта, - аналогічно використанню Петя, замість він.

Всередині функцій можна використовувати зарезервоване ключове слово this. Під час виконання функції, в this записується посилання на об'єкт, в контексті якого вона була викликана. Таким чином, в тілі функції ми можемо отримати доступ до властивостей і методів цього об'єкта.

// Петя біжить швидко, тому що він (this) намагається зловити поїзд.
const petya = {
  username: "Petya",
  showName() {
    console.log(this.username);
  },
};

petya.showName();

Розглянемо приклад з колекцією книг.

const bookShelf = {
  authors: ["Бернард Корнуелл", "Роберт Шеклі"],
  getAuthors() {
    return this.authors;
  },
  addAuthor(authorName) {
    this.authors.push(authorName);
  },
};

console.log(bookShelf.getAuthors()); // ["Бернард Корнуелл", "Роберт Шеклі"]
bookShelf.addAuthor("Лі Таніт");
console.log(bookShelf.getAuthors()); // ["Бернард Корнуелл", "Роберт Шеклі", "Лі Таніт"]

Методи getAuthors і addAuthor - це функції (методи об'єкта), які викликаються в контексті об'єкта bookShelf. Під час їх виконання в this записується посилання на об'єкт bookShelf і ми можемо звернутися до його властивостей і методів.