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

Определение

this — это контекст вызова функции, который определяется call site (местом/способом вызова), а не местом объявления функции.

Как понять, что будет в this

Обычно достаточно посмотреть на форму вызова:

1. Вызов как метод: obj.method()

   • this → obj

2. Обычный вызов функции: fn()

   • this → undefined в strict mode

   • this → глобальный объект без strict mode

3. Стрелочная функция: () => {}

   • 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 часто случается, когда:

  1. передаем метод как колбэк (onClick={obj.method})

  2. деструктурируем метод (const { method } = obj)

  3. используем setTimeout(obj.method, 0)

Вывод

this зависит от формы вызова. Чтобы избежать неожиданностей, следи за тем, вызываешь ли ты функцию как obj.method() или как fn(); для колбэков часто используют bind, стрелки или обертку-функцию.