На что ссылается this?

На что ссылается this

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

Основное правило

Значение this определяется не тем, где функция была определена, а тем, как она была вызвана. Это называется dynamic binding (динамическое связывание).

Способы вызова функции и значение this

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

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

const user = {
  name: "Иван",
  greet: function() {
    console.log("Привет, я " + this.name);
  }
};

user.greet(); // this = user, вывод: "Привет, я Иван"

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

Когда функция вызывается обычным образом (не как метод), this ссылается на глобальный объект (window в браузере, global в Node.js).

function getName() {
  console.log(this.name);
}

getName(); // this = window (или global в Node.js)

В strict mode this будет undefined:

"use strict";

function getName() {
  console.log(this); // undefined
}

getName();

3. Вызов через new (конструктор)

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

function User(name) {
  this.name = name;
}

const user = new User("Иван");
console.log(user.name); // "Иван"

4. Явное указание this через call, apply, bind

Методы call, apply и bind позволяют явно указать, на что должно ссылаться this.

const user = {
  name: "Иван"
};

function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

// call — вызывает функцию сразу с указанным контекстом
greet.call(user, "Привет"); // "Привет, Иван"

// apply — то же самое, но аргументы передаются массивом
greet.apply(user, ["Привет"]); // "Привет, Иван"

// bind — возвращает новую функцию с зафиксированным контекстом
const boundGreet = greet.bind(user);
boundGreet("Привет"); // "Привет, Иван"

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

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

const user = {
  name: "Иван",
  greet: function() {
    const arrow = () => {
      console.log(this.name); // this из greet
    };
    arrow();
  }
};

user.greet(); // "Иван"

// В отличие от обычной функции:
const user2 = {
  name: "Мария",
  greet: function() {
    function inner() {
      console.log(this.name); // undefined (strict mode)
    }
    inner();
  }
};

user2.greet(); // undefined

Практический пример: потеря контекста

Это частая ошибка в React и при работе с callbacks:

class Button {
  constructor(name) {
    this.name = name;
  }

  handleClick() {
    console.log(this.name);
  }
}

const btn = new Button("Кнопка");
const handler = btn.handleClick; // Потеря контекста!
handler(); // undefined (this = window/global)

// Решение 1: bind
const handler = btn.handleClick.bind(btn);

// Решение 2: стрелочная функция
const handler = () => btn.handleClick();

// Решение 3: стрелочный метод в классе
class Button {
  handleClick = () => {
    console.log(this.name);
  };
}

Приоритет привязки this

Если применяются несколько правил, this будет выбран в следующем порядке:

1. new — самый высокий приоритет
2. call/apply/bind — явное указание
3. Метод объекта — вызов через точку
4. Функция в window — глобальный контекст
5. Стрелочная функция — лексический контекст

Практический совет

В современной разработке стрелочные функции уменьшают проблемы с this, но понимание работы this остается критически важным для написания правильного кода и отладки ошибок.