Come cambiare il contesto di una funzione in…

In JavaScript, il contesto di esecuzione di una funzione (this) può essere modificato in diversi modi:

call(): Esegue una funzione con un valore this specificato e argomenti passati singolarmente separati da virgole.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Ciao, ${name}! Sono ${this.type}`);
}

const obj = { type: 'oggetto' };

greet.call(obj, 'Alice'); // Ciao, Alice! Sono oggetto

apply(): Esegue una funzione con un valore this specificato e argomenti passati sotto forma di array o oggetto simile a array.

// function.apply(thisArg, [argsArray])
function sum(a, b) {
  console.log(`${this.name}: ${a + b}`);
}

const context = { name: 'Calcolatrice' };
const numbers = [5, 10];

sum.apply(context, numbers); // Calcolatrice: 15

bind(): Crea una nuova funzione "legata" a un valore this specificato. La funzione originale non viene eseguita immediatamente.

// function.bind(thisArg, arg1, arg2, ...)
const user = { name: 'Bob' };

function sayHello() {
  console.log(`Il mio nome è ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Il mio nome è Bob

Funzioni freccia (=>): Le funzioni freccia non hanno il loro proprio contesto this. catturano this dall'ambiente lessicale (dallo scope genitore in cui sono state definite).

class MyClass {
  constructor() {
    this.value = 'valore di classe';
    // La funzione freccia mantiene il contesto della classe
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // valore di classe (il contesto è mantenuto)

// Confronta con una funzione normale senza bind
class AltraClasse {
    constructor() {
        this.value = 'altro valore';
        this.logValue = function() {
            console.log(this.value); // 'this' sarà window o undefined in modalità strict
        };
    }
}

const altraInstance = new AltraClasse();
const altroMetodo = altraInstance.logValue;

altroMetodo(); // undefined (il contesto viene perso quando chiamato come funzione separata)

Come cambiare il contesto di una funzione in JavaScript?