Ключевое слово this в JavaScript

this — это ключевое слово в JavaScript, которое указывает на контекст исполняемого кода. Это ссылка на объект, который «владеет» текущим исполняемым кодом или функцией. Важно, что значение this может изменяться в зависимости от того, как была вызвана функция.

Как работает this?

Обычные функции

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

const obj = {
  name: "hello",
  getName: function() {
    console.log(this.name);
  }
};

obj.getName(); // выведет "hello"

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

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

const obj = {
  name: "hello",
  getName: () => {
    console.log(this.name); // `this` указывает на глобальный контекст (или window в браузере)
  }
};

obj.getName(); // выведет undefined, так как this не привязан к obj

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

Пример с классом

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

class Example {
  name = "hello";

  getName = () => {
    console.log(this.name); // здесь `this` указывает на экземпляр класса
  };
}

new Example().getName(); // выведет "hello"

Контекст выполнения

Контекст выполнения — это специальная внутренняя структура данных, которая содержит информацию о вызове функции и включает в себя:

• Конкретное место в коде, на котором находится интерпретатор.
• Локальные переменные функции.
• Значение this. Важно, что в случае с обычным объектом, если метод объекта определён как стрелочная функция, то контекст вызова (значение this) не будет связан с объектом, а будет наследоваться из внешнего контекста вызова.

const obj = {
  name: "hello",
  getName: () => {
    console.log(this.name); // `this` указывает на глобальный контекст
  }
};

obj.getName(); // выведет undefined, потому что `this` не связан с объектом