Как изменить контекст функции в JavaScript?

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

1. call(): Выполняет функцию с заданным значением this и аргументами, переданными по отдельности через запятую.

   // function.call(thisArg, arg1, arg2, ...)
   function greet(name) {
     console.log(`Hello, ${name}! I am ${this.type}`);
   }
   
   const obj = { type: 'object' };
   
   greet.call(obj, 'Alice'); // Hello, Alice! I am object
   

2. apply(): Выполняет функцию с заданным значением this и аргументами, переданными в виде массива или массивоподобного объекта.

   // function.apply(thisArg, [argsArray])
   function sum(a, b) {
     console.log(`${this.name}: ${a + b}`);
   }
   
   const context = { name: 'Calculator' };
   const numbers = [5, 10];
   
   sum.apply(context, numbers); // Calculator: 15
   

3. bind(): Создает новую функцию, "привязанную" к заданному значению this. Оригинальная функция при этом не вызывается немедленно.

   // function.bind(thisArg, arg1, arg2, ...)
   const user = { name: 'Bob' };
   
   function sayHello() {
     console.log(`My name is ${this.name}`);
   }
   
   const boundSayHello = sayHello.bind(user);
   
   boundSayHello(); // My name is Bob
   

4. Стрелочные функции (=>): Стрелочные функции не имеют собственного контекста this. Они захватывают this из лексического окружения (из обычного родительского scope, где они были определены).

   class MyClass {
     constructor() {
       this.value = 'class value';
       // Стрелочная функция сохраняет контекст класса
       this.logValue = () => {
         console.log(this.value);
       };
     }
   }
   
   const instance = new MyClass();
   const method = instance.logValue;
   
   method(); // class value (контекст сохранен)
   
   // Сравните с обычной функцией без bind
   class AnotherClass {
       constructor() {
           this.value = 'another value';
           this.logValue = function() {
               console.log(this.value); // 'this' будет window или undefined в строгом режиме
           };
       }
   }
   
   const anotherInstance = new AnotherClass();
   const anotherMethod = anotherInstance.logValue;
   
   anotherMethod(); // undefined (контекст потерян при вызове как отдельной функции)