Как можно изменить контекст выполнения функции в JavaScript?

Контекст выполнения функции (значение this) в JavaScript можно изменить несколькими способами:

• Методы call(), apply(), bind()
• Использование стрелочных функций
• Сохранение контекста в переменную

Методы call(), apply() и bind()

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

// Пример использования call()
function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };
greet.call(person, 'Привет', '!'); // Выводит: Привет, Alice!

// Пример использования apply()
function sum(a, b) {
  console.log(this.prefix + (a + b));
}

const context = { prefix: 'Сумма: ' };
sum.apply(context, [10, 20]); // Выводит: Сумма: 30

// Пример использования bind()
const boundGreet = greet.bind(person, 'Здравствуйте');
boundGreet('?'); // Выводит: Здравствуйте, Alice?

Различия между call(), apply() и bind():

Метод	Описание	Аргументы	Возвращаемая занчение
call()	Вызывает функцию с заданным значением this и отдельными аргументами.	Первый аргумент - значение this, остальные аргументы передаются функции по отдельности.	Результат выполнения функции.
apply()	Вызывает функцию с заданным значением this и аргументами в виде массива.	Первый аргумент - значение this, второй аргумент - массив или псевдомассив аргументов для функции.	Результат выполнения функции.
bind()	Создает новую функцию, которая при вызове имеет заданное значение this.	Первый аргумент - значение this, остальные аргументы становятся префиксом для аргументов создаваемой функции.	Новая функция с привязанным контекстом.

Использование стрелочных функций

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

// Пример со стрелочной функцией
const obj = {
  name: 'Bob',
  sayHello: function() {
    const innerFunction = () => {
      console.log('Привет, ' + this.name); // this относится к obj
    };
    innerFunction();
  }
};

obj.sayHello(); // Выводит: Привет, Bob

Сохранение контекста в переменную

До появления стрелочных функций часто использовался паттерн сохранения контекста в отдельную переменную (например, that или self).

// Пример сохранения контекста в переменную
const anotherObj = {
  name: 'Charlie',
  sayHi: function() {
    const self = this; // Сохраняем контекст в self
    setTimeout(function() {
      console.log('Привет, ' + self.name); // Используем сохраненный контекст
    }, 100);
  }
};

anotherObj.sayHi(); // Выводит: Привет, Charlie (через 100мс)