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

Контекст виконання функції в JavaScript визначає, як функція бере дані зі свого оточення для виконання своєї роботи. Цей контекст включає змінні, об'єкти та інші ресурси, доступ до яких є у функції під час її виконання.

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

Значення this може варіюватися в залежності від наступних сценаріїв:

1. Метод об'єкта: Коли функція є методом об'єкта, значення this вказує на сам об'єкт, до якого вона належить.

2. Глобальний контекст: У глобальному контексті в браузері this вказує на глобальний об'єкт window, а в середовищі Node.js - на об'єкт global.

Розглянемо приклад виклику методу, який звертається до даних самого методу:

const user = {
  name: "Alex",

  showName() {
    console.log("User name: ", user.name);
  },
};

user.showName(); // User name: Alex

Наведений приклад працює, але він синтаксично неправильний. Всередині об'єктів у методах при зверненні до даних самого обʼєкту використовують слово this, де JavaScript замість слова this ставить імʼя самого обʼєкта.

const user = {
  name: "Alex",

  showName() {
    console.log("User name: ", this.name);
  },
};

user.showName(); // User name: Alex

Слово this - зарезервоване і на його місце підставляється посилання на сам обʼєкт.

Розширимо обʼєкт описавши метод додавання прізвища і його виведення, із використанням ключового слова this.

const user = {
  name: "Alex",

  showName() {
    console.log("User name: ", this.name);
  },

  addSurname(surname) {
    this.surname = surname;
  },

  showSurname() {
    if (!this.surname) {
      console.log("There is no surname!");
    } else {
      console.log("User surname: ", this.surname);
    }
  },
};

user.showSurname(); // There is no surname!
user.addSurname("Khomiak");
user.showSurname(); // User surname: Khomiak