Что будет выведено в консоль при вызове метода объекта, если внутри используется this, и почему

Question

this не “лежит” внутри функции навсегда — он определяется в момент вызова. Если функция вызвана как метод объекта (obj.fn()), то this обычно будет указывать на obj. Если вынести метод в переменную и вызвать как обычную функцию (const f = obj.fn; f()), то this потеряется: в strict mode станет undefined, а без strict mode — глобальным объектом (в браузере это window). У стрелочной функции нет своего this, она берет его из внешнего окружения.

YeaHub · Accepted Answer

Определениеthis — это контекст вызова функции, который определяется call site (местом/способом вызова), а не местом объявления функции.Как понять, что будет в thisОбычно достаточно посмотреть на форму вызова:Вызов как метод: obj.method()this → objОбычный вызов функции: fn()this → undefined в strict modethis → глобальный объект без strict modeСтрелочная функция: () => {}this не меняется при вызове, берется снаружиПримеры1) Метод объекта'use strict';

const user = {
  name: 'Ann',
  show() {
    console.log(this.name);
  },
};

user.show(); // "Ann" (this = user)
2) Потеря контекста при “отрыве” метода'use strict';

const user = {
  name: 'Ann',
  show() {
    console.log(this);
  },
};

const f = user.show;
f(); // undefined (strict mode)
3) Стрелка внутри метода (берет this снаружи)'use strict';

const user = {
  name: 'Ann',
  showLater() {
    setTimeout(() => {
      console.log(this.name);
    }, 0);
  },
};

user.showLater(); // "Ann"
Практический смыслПотеря this часто случается, когда:передаем метод как колбэк (onClick={obj.method})деструктурируем метод (const { method } = obj)используем setTimeout(obj.method, 0)Выводthis зависит от формы вызова. Чтобы избежать неожиданностей, следи за тем, вызываешь ли ты функцию как obj.method() или как fn(); для колбэков часто используют bind, стрелки или обертку-функцию.