Правила визначення this

Якщо говорити про звичайну функцію (не стрілкову), то значення контексту визначається не на момент створення функції, а на момент виклику.

Значення this визначається тим, як викликають функцію, а не тим, де її оголосили.

this і глобальна область видимості​

Якщо скрипт виконується не в суворому режимі, то this посилається на об'єкт window. В суворому режимі this, в глобальній області видимості, буде undefined.

"use strict"; // Суворий чи не суворий режим

function myFunc() {
  console.log(this);
}

myFunc(); // window or undefined

this і методи об'єкта​

Якщо функція є методом обʼєкта, то контекст посилатиметься на сам обʼєкт в якому і міститься цей метод.

const user = {
  name: "Alex",

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

  showThisObject() {
    console.log(this);
  },
};

user.showThisObject(); //{name: 'Alex', showName: ƒ, showThisObject: ƒ}
user.showName(); //User name: Alex

Раніше ми визначили: контекст визначається місцем виклику функції, а не її створення.

Тому, якщо створити функцію у глобальній області - вона матиме глобальний контекст (window або undefined). А якщо цю функцію присвоїти як метод якомусь обʼєкту, то якщо викликати цей метод, як частину об'єкта - контекст посилатиметься на цей обʼєкт. Далі приклад:

// Створюємо функцію у глобальній області видимості
function showContext() {
  console.log(this);
}

// Виклик функції покаже контекст
showContext(); // window or undefined

// Створимо якийсь обʼєкт
const user = {
  name: "Alex",
};

// Присвоїмо методу обʼєкту функцію з глобальної області видимості
user.showObjectContext = showContext;

// Контекст цієї функції вже буде обʼєкт user
user.showObjectContext(); // {name: 'Alex', showObjectContext: ƒ}

this в callback-функціях​

Якщо метод об'єкта передають як колбек-функцію, то контекст не зберігається. Колбек - це посилання на метод, яке присвоюється як значення параметра, що викликається без об'єкта.

// Створюємо обʼєкт з методом, в якому є посилання на мам обʼєкт 
const user = {
  name: "Alex",
  showName() {
    console.log(this.name);
  },
};

// Видно, що метод працює і повідомлення виводиться
user.showName(); // Alex

// Передамо метод у функцію як колбек
function myFunc(callback) {
  callback();
}

// Викличемо функцію в яку передамо метод, як колбек
myFunc(user.showName); // Помилка бо у myFunc немає властивості name

this і стрілкові функції​

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

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

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

// Створюємо стрілкову функцію у глобальній області видимості
const showContext = () => {
  console.log(this);
};

// Виклик функції покаже контекст
showContext(); // window

// Створимо якийсь обʼєкт
const user = {
  name: "Alex",
};

// Присвоїмо методу обʼєкту стрілкову функцію з глобальної області видимості
user.showObjectContext = showContext;

// Контекст цієї функції буде все той же, бо це стрілка
user.showObjectContext(); // window 

Обмежуючи стрілкові функції постійним контекстом, можна краще їх оптимізувати, на відміну від звичайних функцій, значення this яких можна змінити.