How to change the context of a function in…

In JavaScript, the execution context of a function (the value of this) can be changed in several ways:

call(): Executes a function with a specified this value and arguments passed individually.

// 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

apply(): Executes a function with a specified this value and arguments passed as an array or array-like object.

// 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

bind(): Creates a new function bound to a specified this value. The original function is not called immediately.

// 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

Arrow functions (=>): Arrow functions do not have their own this. They capture this from the lexical scope (the surrounding scope where they were defined).

class MyClass {
  constructor() {
    this.value = 'class value';
    // Arrow function preserves the class context
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

const instance = new MyClass();
const method = instance.logValue;

method(); // class value (context preserved)

// Compare with a regular function without bind
class AnotherClass {
    constructor() {
        this.value = 'another value';
        this.logValue = function() {
            console.log(this.value); // 'this' will be window or undefined in strict mode
        };
    }
}

const anotherInstance = new AnotherClass();
const anotherMethod = anotherInstance.logValue;

anotherMethod(); // undefined (context lost when called as a standalone function)

How to change the context of a function in JavaScript?