Контекст выполнения функции (значение `this` внутри функции) может быть изменён несколькими способами. Это позволяет более гибко управлять тем, как функции вызываются, особенно в объектно-ориентированном программировании. Вот основные способы изменения контекста функции:

1. `call()` и `apply()`

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

• `call(thisArg, arg1, arg2, ...)`: Вызывает функцию с указанным контекстом `thisArg` и аргументами `arg1`, `arg2`, ...
• `apply(thisArg, [argsArray])`: Аналогичен `call`, но принимает аргументы в виде массива.

function greet() {
  console.log(`Привет, ${this.name}`);
}

const person = { name: 'Алексей' };

greet.call(person);  // Привет, Алексей
greet.apply(person); // Привет, Алексей

2. `bind()`(thisArg[, arg1[, arg2[, ...]]])` создаёт новую функцию с привязанным контекстом `thisArg` и начальными аргументами `arg1`, `arg2`, ...
 

function greet() {
  console.log(`Привет, ${this.name}`);
}

const person = { name: 'Мария' };
const greetPerson = greet.bind(person);

greetPerson(); // Привет, Мария

3. Стрелочные функции(`() => {}`) не имеют собственного контекста `this`. Вместо этого они заимствуют `this` из окружающего лексического контекста. Это значит, что `this` внутри стрелочной функции будет таким же, как и в её родительском контексте, что упрощает работу с контекстом, особенно в колбэках и обработчиках событий.

const person = {
  name: 'Иван',
  greet: function() {
    // Стрелочная функция заимствует `this` из метода `greet`
    window.setTimeout(() => console.log(`Привет, ${this.name}`), 1000);
  }
};

person.greet(); // Привет, Иван (после задержки в 1 секунду)

Использование контекста в классах

ES6 для методов, которые вы хотите передать в качестве колбэков и при этом сохранить контекст класса, часто используется `.bind(this)` в конструкторе или определение метода через стрелочную функцию в свойстве класса.

Изменение контекста функции  — мощный механизм, позволяющий более гибко управлять выполнением кода. `call()`, `apply()`, и `bind()` дают возможность явно указать контекст `this` для функций, в то время как стрелочные функции позволяют наследовать контекст из родительского лексического окружения, делая код более чистым и понятным.

Feb. 26, 2024, easyoffer