Какой this у функции?

This у функции в JavaScript

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

Ключевые принципы определения this

Значение this зависит от контекста вызова (как была вызвана функция):

1. Обычный вызов функции

При простом вызове this ссылается на глобальный объект (window в браузере, global в Node.js) в нестрогом режиме. В строгом режиме ('use strict') значение будет undefined.

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

showThis(); // В браузере: Window {...}, в строгом режиме: undefined

2. Вызов как метода объекта

Когда функция вызывается как свойство объекта, this ссылается на объект, которому принадлежит метод.

const user = {
  name: 'Анна',
  greet() {
    console.log(`Привет, меня зовут ${this.name}`);
  }
};

user.greet(); // "Привет, меня зовут Анна" — this = user

3. Явное указание this с помощью call, apply, bind

Эти методы позволяют явно установить значение this.

function introduce(age) {
  console.log(`Я ${this.name}, мне ${age} лет`);
}

const person = { name: 'Иван' };

// call и apply вызывают функцию сразу
introduce.call(person, 30);    // "Я Иван, мне 30 лет"
introduce.apply(person, [30]); // "Я Иван, мне 30 лет"

// bind создает новую функцию с привязанным контекстом
const boundIntroduce = introduce.bind(person);
boundIntroduce(30);            // "Я Иван, мне 30 лет"

4. Конструктор (new)

При вызове с оператором new, this ссылается на вновь созданный пустой объект, который затем возвращается конструктором.

function Person(name) {
  this.name = name;
  console.log(this); // Ссылается на новый объект
}

const anna = new Person('Анна'); // this = новый объект { name: 'Анна' }

5. Стрелочные функции

Стрелочные функции не имеют собственного this. Они захватывают значение this из лексического окружения (окружающей области видимости) в момент создания.

const obj = {
  value: 'объект',
  regularFunc: function() {
    console.log(this.value); // "объект" — this = obj
  },
  arrowFunc: () => {
    console.log(this.value); // undefined — this берется из внешней области
  }
};

obj.regularFunc(); // "объект"
obj.arrowFunc();   // undefined (внешний this = глобальный объект/undefined)

6. Обработчики событий в DOM

В обработчиках событий, если функция назначена через addEventListener, this ссылается на DOM-элемент, на котором произошло событие.

button.addEventListener('click', function() {
  console.log(this); // Ссылается на элемент button
});

Специальные случаи и подводные камни

• Потеря контекста — самая частая проблема, когда метод передается как callback:

const user = {
  name: 'Мария',
  greet() {
    console.log(this.name);
  }
};

// Контекст потерялся — this = undefined/глобальный объект
setTimeout(user.greet, 100); // undefined (или ошибка в строгом режиме)

// Решение: использовать bind или стрелочную функцию
setTimeout(user.greet.bind(user), 100);
// Или
setTimeout(() => user.greet(), 100);

Итог

Значение this определяется исключительно способом вызова функции, а не местом её объявления. Это главный принцип, который нужно помнить. Проще всего анализировать this, задав вопрос: "Где и как была вызвана эта функция?".

Для предсказуемого поведения рекомендуется:

• Использовать стрелочные функции там, где нужно сохранить лексический this
• Применять bind, call, apply для явного управления контекстом
• Избегать передачи методов объектов в качестве колбэков без привязки контекста