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

Существует несколько способов, которые можно использовать для избежания потери контекста:

1. Использование стрелочных функций - стрелочные функции привязывают значение this к контексту внешней функции, т.е. контексту, в котором они были определены. При использовании стрелочных функций не происходит потери контекста.

const obj = {
  name: "John",
  greet: function () {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  },
};
 
obj.greet(); // "Hello, my name is John" (after 1 second delay)

2. Использование метода bind() - метод bind() создает новую функцию, которая привязывает значение this к определенному объекту. Это позволяет сохранить контекст функции, когда она вызывается в другом контексте.

const obj = {
  name: "John",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
const otherObj = {
  name: "Jane",
};
 
const boundGreet = obj.greet.bind(otherObj);
boundGreet(); // "Hello, my name is Jane"

3. Использование метода call() или apply() - методы call() и apply() вызывают функцию с определенным значением this. Разница между этими методами заключается в том, как передаются аргументы функции.

const obj = {
  name: "John",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
const otherObj = {
  name: "Jane",
};
 
obj.greet.call(otherObj); // "Hello, my name is Jane"
obj.greet.apply(otherObj); // "Hello, my name is Jane"

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

const obj = {
  name: "John",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};
 
const otherObj = {
  name: "Jane",
};
 
const context = obj;
context.greet(); // "Hello, my name is John"
 
someFunction(context.greet); // передача метода с сохраненным контекстом

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

5. Потеря контекста внутри setTimeout. Как только метод передаётся отдельно от объекта – this теряется.

let user = {
  firstName: "Вася",
  sayHi() {
    alert(`Привет, ${this.firstName}!`);
  },
};
 
setTimeout(user.sayHi, 1000); // Привет, undefined!

При запуске этого кода мы видим, что вызов this.firstName возвращает не «Вася», а undefined!

Это произошло потому, что setTimeout получил функцию sayHi отдельно от объекта user (именно здесь функция и потеряла контекст).

Решение 1: Сделать функцию-обёртку

let user = {
  firstName: "Вася",
  sayHi() {
    alert(`Привет, ${this.firstName}!`);
  },
};
 
setTimeout(function () {
  user.sayHi(); // Привет, Вася!
}, 1000);

Что произойдёт, если до момента срабатывания setTimeout (ведь задержка составляет целую секунду!) в переменную user будет записано другое значение? Тогда вызов неожиданно будет совсем не тот!

Решение 2: Привязать контекст с помощью bind. Без возникновения уязвимости, как в Решении 1.

let user = {
  firstName: "Вася",
};
 
function func() {
  alert(this.firstName);
}
 
let funcUser = func.bind(user);
funcUser(); // Вася

Назад