Verständnis von this, Bind, Call und Apply in JavaScript
Wie funktioniert „this“ in JavaScript und wie kann es in verschiedenen Kontexten genutzt werden? Wir zeigen es Ihnen und erklären außerdem, wie Sie „bind“, „call“ und „apply“ verwenden können, um die Kontrolle über „this“ in Ihren JavaScript-Funktionen zu behalten.
Das this-Schlüsselwort
In JavaScript bezieht sich „this“ auf ein Objekt, und je nachdem, wie und wo es aufgerufen wird, kann es auf unterschiedliche Objekte verweisen. Schauen wir uns verschiedene Kontexte an:
Globaler Kontext
Im globalen Kontext verweist „this“ auf das globale Objekt, das in einem Browser „window“ und in Node.js „global“ ist.
Beispiel:
console.log(this);
Ausgabe (im Browser):
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Methode in einem Objekt
Wenn eine Funktion eine Methode eines Objekts ist, verweist „this“ auf dieses Objekt.
Beispiel:
const auto = { marke: 'BMW', modell: 'X5', vorstellen: function() { console.log(`Ich fahre einen ${this.marke} ${this.modell}.`); } } auto.vorstellen();
Ausgabe:
Ich fahre einen BMW X5.
Konstruktorfunktion
Wenn Sie eine Funktion als Konstruktor verwenden, um Objekte zu erstellen, verweist „this“ auf das neu erstellte Objekt.
Beispiel:
function Person(name, alter) { this.name = name; this.alter = alter; } const alice = new Person('Alice', 30); console.log(alice.name); // Ausgabe: Alice
DOM-Ereignishandler
In einem DOM-Ereignishandler verweist „this“ auf das Element, auf das der Ereignishandler angewendet wurde.
Beispiel:
const button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log(this.textContent); });
Wenn der Button geklickt wird, gibt der Ereignishandler den Text des Buttons aus.
Die Methoden „bind“, „call“ und „apply“
Die Methode „bind“
Die Methode „bind“ ermöglicht es, eine Funktion an ein bestimmtes Objekt zu binden. Die ursprüngliche Funktion bleibt unverändert, aber bei Aufruf der gebundenen Funktion wird „this“ auf das angegebene Objekt gesetzt.
Beispiel:
const hund = { name: 'Rex', bellen: function() { console.log(`${this.name} bellt.`); } } const katze = { name: 'Whiskers' } const bellenDerKatze = hund.bellen.bind(katze); bellenDerKatze(); // Ausgabe: Whiskers bellt.
Die Methoden „call“ und „apply“
Die Methoden „call“ und „apply“ ermöglichen es, eine Funktion aufzurufen und den Wert von „this“ sowie Argumente explizit festzulegen. Der Unterschied zwischen den beiden Methoden besteht darin, wie Sie Argumente übergeben:
- „call“ erwartet, dass die Argumente einzeln übergeben werden.
- „apply“ erwartet, dass die Argumente in einem Array übergeben werden.
Beispiel mit „call“:
function grüßen(geschlecht) { if (geschlecht === 'männlich') { console.log(`Hallo, Herr ${this.name}!`); } else if (geschlecht === 'weiblich') { console.log(`Hallo, Frau ${this.name}!`); } else { console.log(`Hallo, ${this.name}!`); } } const person = { name: 'Max' } grüßen.call(person, 'männlich'); // Ausgabe: Hallo, Herr Max!
Beispiel mit „apply“:
const argumente = ['weiblich']; grüßen.apply(person, argumente); // Ausgabe: Hallo, Frau Max!
Fazit
In JavaScript ist das Verständnis von „this“ und die Verwendung der Methoden „bind“, „call“ und „apply“ entscheidend, um den Kontext und die Ausführung von Funktionen zu steuern. Mit diesem Wissen können Sie sicherstellen, dass Ihre Funktionen auf die richtigen Objekte zugreifen und korrekt ausgeführt werden.