Wie ändert man den Kontext einer Funktion in…

In JavaScript kann der Ausführungskontext einer Funktion (der Wert von this) auf verschiedene Weisen geändert werden:

call(): Führt eine Funktion mit einem angegebenen this-Wert und einzelnen Argumenten aus, die durch Kommas getrennt sind.

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

const obj = { type: 'Objekt' };

greet.call(obj, 'Alice'); // Hallo, Alice! Ich bin Objekt

apply(): Führt eine Funktion mit einem angegebenen this-Wert und Argumenten aus, die in Form eines Arrays oder array-ähnlichen Objekts übergeben werden.

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

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

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

bind(): Erstellt eine neue Funktion, die an einen bestimmten this-Wert "gebunden" ist. Die ursprüngliche Funktion wird nicht sofort ausgeführt.

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

function sayHello() {
  console.log(`Mein Name ist ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Mein Name ist Bob

Arrow-Funktionen (=>): Arrow-Funktionen haben keinen eigenen this-Kontext. Sie erfassen this aus der lexikalischen Umgebung (dem umgebenden Scope, in dem sie definiert wurden).

class MyClass {
  constructor() {
    this.value = 'Klassenwert';
    // Arrow-Funktion behält den Klassenkontext
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // Klassenwert (der Kontext bleibt erhalten)

// Vergleich mit einer normalen Funktion ohne bind
class AndereKlasse {
    constructor() {
        this.value = 'anderer Wert';
        this.logValue = function() {
            console.log(this.value); // 'this' wird window oder undefined im Strict-Modus
        };
    }
}

const andereInstanz = new AndereKlasse();
const andereMethode = andereInstanz.logValue;

andereMethode(); // undefined (der Kontext geht bei Aufruf als eigenständige Funktion verloren)

Wie ändert man den Kontext einer Funktion in JavaScript?