Что выведется в console.log при разных вариантах вызова функций с контекстом?

В JavaScript ключевое слово this (контекст выполнения) — это специальная переменная, которая определяется в момент вызова функции, а не в момент её объявления. Его значение зависит от того, как именно была вызвана функция.

Основные правила определения this

• Обычный вызов функции: В нестрогом режиме ('use strict' не используется) this ссылается на глобальный объект (в браузере — window, в Node.js — global). В строгом режиме значение this будет undefined.
• Вызов как метода объекта: Если функция вызывается как свойство объекта (через точку или квадратные скобки), то this ссылается на этот объект.
• Явное указание контекста: Методы call, apply и bind позволяют явно задать, на что будет указывать this внутри функции.
• Стрелочные функции: Они не имеют своего собственного this. Вместо этого они захватывают значение this из окружающей лексической области видимости (например, из внешней обычной функции или глобального контекста).

Практические примеры

Рассмотрим несколько примеров, демонстрирующих эти правила.

'use strict';

const obj = {
  name: 'Test',
  regularFunc: function() {
    console.log(this?.name); // this указывает на obj
  },
  arrowFunc: () => {
    console.log(this?.name); // this захвачен из глобальной области
  }
};

function standaloneFunc() {
  console.log(this); // В строгом режиме — undefined
}

// 1. Вызов как метода объекта
obj.regularFunc(); // Выведет: 'Test'

// 2. Вызов стрелочной функции как метода
obj.arrowFunc(); // Выведет: undefined (так как глобальный this.name не определён)

// 3. Обычный вызов функции
standaloneFunc(); // Выведет: undefined

// 4. Явное указание контекста с помощью call
const anotherObj = { name: 'Another' };
obj.regularFunc.call(anotherObj); // Выведет: 'Another'

// 5. Потеря контекста при присваивании метода переменной
const extractedFunc = obj.regularFunc;
extractedFunc(); // Выведет: undefined (функция вызвана без контекста объекта)

// 6. Фиксация контекста с помощью bind
const boundFunc = obj.regularFunc.bind(obj);
boundFunc(); // Выведет: 'Test'

Эти примеры показывают, как важно понимать механизм работы this, особенно при работе с обработчиками событий, колбэками и асинхронным кодом, где контекст может легко потеряться.

Вывод: Понимание контекста this критически важно для написания корректного JavaScript-кода. Используйте методы call/apply/bind для явного управления контекстом, а стрелочные функции — когда нужно сохранить контекст из внешней области (например, в колбэках или методах классов).