Lädt...

Das Schlüsselwort this

Dieselbe Etikett-Funktion kann einmal Tasse sagen, dann die Tasse verfehlen und danach Becher sagen. Die geschweiften Klammern blieben liegen. Geändert hat sich der Aufruf. JavaScript legt this beim Aufruf fest, nicht beim Tippen der Funktion.

Nach dem schlichten Methodenaufruf

Die Methodenseite hat eine Funktion am Objekt abgelegt und sie als product.tag() gestartet. In dieser Form war this das Objekt vor dem Punkt. Dort endete die Seite. Hier bleibt die Funktion, und der Aufruf wechselt: vom Objekt gelöst, mit call gezielt, mit bind verriegelt oder als Pfeil geschrieben.

Fünf Arten, wie der Aufruf this setzt

📊 Methode, nackt, call, bind, Pfeil

Form	Beispiel	Wohin this zeigt
Methode	`product.tag()`	das Objekt vor dem Punkt
nackt	`let show = product.tag; show()`	nicht jenes Objekt (`undefined` im strikten Modus)
call	`product.tag.call(cup)`	das Objekt, das du `call` gibst, nur für diesen Lauf
bind	`product.tag.bind(product)`	für spätere Aufrufe auf jenes Objekt verriegelt
Pfeil	`() => this.name` in einer anderen Funktion	das this der äußeren Funktion, nicht das Objekt vor dem Punkt

Benenne den Aufruf, bevor du this liest. Die Funktion auf dem Objekt abzulegen friert this nicht ein. Der Aufruf entscheidet. bind entscheidet im Voraus für einen späteren Aufruf. Ein Pfeil ignoriert den Aufruf und liest die Funktion, die ihn umschließt.

Methodenaufruf — this ist das Objekt vor dem Punkt

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());

Der Punkt nennt weiter das Objekt

product.tag() startet tag und setzt this auf product. Die Konsole schreibt Mug. Das ist die Regel von der Methodenseite, hier als Grundlinie stehen gelassen. Die nächsten vier Aufrufe verlassen diese Grundlinie absichtlich.

Nackter Aufruf — das Objekt ist weg

javascript

"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());

Hebst du die Funktion ab, geht die Tasse mit dem Punkt

show und product.tag sind dieselbe Funktion. show() hat kein Objekt vor einem Punkt, also ist this im strikten Modus undefined. Die Wache liefert missing. Ohne die Wache wirft this.name. Diese Seite bleibt im strikten Modus, damit das Ergebnis vorhersehbar ist. Ein loses Skript kann einen nackten Aufruf auf das globale Objekt zeigen lassen.

this mit call auf ein anderes Objekt richten

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));

call leiht die Funktion für ein Objekt aus

product.tag.call(cup) führt weiter das tag der Tasse aus, doch this ist für diesen Lauf cup. Die Konsole schreibt Cup. product.name bleibt Mug. call klebt die Funktion nicht auf cup. apply macht dieselbe Arbeit, wenn die weiteren Argumente in einem Array liegen — dieses Etikett braucht sie nicht.

Das Objekt mit bind verriegeln

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());

bind hebt das Objekt für einen späteren nackten Aufruf auf

bind gibt eine neue Funktion zurück. Darin bleibt this gleich product, obwohl show() keinen Punkt hat. Die Konsole schreibt Mug. Das ursprüngliche tag bleibt unangetastet. Nimm bind, wenn ein Knopf, ein Timer oder eine andere Funktion die Methode ohne Objekt davor aufrufen wird.

Der Pfeil holt this aus der äußeren Funktion

javascript

"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());

Ein Pfeil nimmt this nicht vom Punkt

product.tag() sieht aus wie ein Methodenaufruf, doch tag ist ein Pfeil. Ein Pfeil hat kein eigenes this. Er nimmt this aus make, und make lief als shelf.make(), also ist this gleich shelf. Die Konsole schreibt Shelf, nicht Mug. Eine normale Methode auf product hätte Mug geschrieben. Pfeile kamen auf einer früheren Seite; hier geht es nur um ihre Wirkung auf this.

Den Aufruf zur Aufgabe passen

Steht das Objekt vor dem Punkt? Lies this als dieses Objekt. Du hast die Funktion abgehoben und nicht gebunden? Erwarte das Objekt nicht. Ein anderes Objekt, ein Lauf? Nimm call. Ein späterer Aufruf ohne Punkt soll die Tasse trotzdem sehen? Zuerst bind. Du hast einen Pfeil geschrieben? Schau nach außen auf die umschließende Funktion, nicht auf das Objekt vor dem Punkt. Konstruktor und Klasse setzen this ebenfalls, das wartet auf eine spätere Seite. Als Nächstes kommt JSON: Text, der Daten beschreibt, keine weitere Regel für this.

Ein gebundenes Etikett auf die Seite setzen

Verriegle tag mit bind an der Tasse und rufe die neue Funktion ohne Punkt auf. Schreibe das Ergebnis in einen Absatz.

Seitendemo — gebundenes Etikett

html

<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>

Der Absatz zeigt Mug. show() hat kein Objekt vor einem Punkt, und die Zeile nennt trotzdem die Tasse, weil bind das this verriegelt hat. Ändere nur product.name, lade neu, und der Absatz folgt. Nächste Lektion: JSON in JavaScript — Text, der Daten beschreibt, keine neue Regel für this.

Übungsschritte

Rufe product.tag() auf und lies Mug.
Lege die Funktion in show, rufe show() im strikten Modus auf und lies missing.
Rufe product.tag.call(cup) auf und lies Cup.
Binde tag an product, rufe die neue Funktion ohne Punkt auf und lies Mug.
Starte shelf.make() und lies Shelf, nicht Mug.
Ändere in der HTML-Demo nur product.name, lade neu und lies den Absatz.

Häufige Ausrutscher

this für eingefroren halten, nur weil die Funktion auf dem Objekt sitzt
show() im strikten Modus aufrufen und weiter Mug erwarten
Glauben, call kopiere tag auf cup
Erwarten, bind schreibe das ursprüngliche tag um, statt eine neue Funktion zu liefern
Einen Pfeil als Methode schreiben und das Objekt vor dem Punkt erwarten
Die nächste Seite für eine weitere this-Regel halten — JSON ist ein Textformat für Daten

Kurz gefasst

Den Aufruf wählt this, nicht die Klammern
object.method() setzt this auf das Objekt vor dem Punkt
Ein nackter Aufruf im strikten Modus zeigt this nicht auf jenes Objekt
call setzt this auf das übergebene Objekt, nur für diesen Lauf
bind liefert eine Funktion, deren this verriegelt bleibt
Ein Pfeil nimmt this aus der umschließenden Funktion
Ein gebundener Aufruf kann eine Zeile auf der Seite füllen
Als Nächstes: JSON, Text, der Daten beschreibt

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Das Schlüsselwort this

Nach dem schlichten Methodenaufruf

Fünf Arten, wie der Aufruf this setzt

📊 Methode, nackt, call, bind, Pfeil

Methodenaufruf — this ist das Objekt vor dem Punkt

Der Punkt nennt weiter das Objekt

Nackter Aufruf — das Objekt ist weg

Hebst du die Funktion ab, geht die Tasse mit dem Punkt

this mit call auf ein anderes Objekt richten

call leiht die Funktion für ein Objekt aus

Das Objekt mit bind verriegeln

bind hebt das Objekt für einen späteren nackten Aufruf auf

Der Pfeil holt this aus der äußeren Funktion

Ein Pfeil nimmt this nicht vom Punkt

Den Aufruf zur Aufgabe passen

Ein gebundenes Etikett auf die Seite setzen

Seitendemo — gebundenes Etikett

Übungsschritte

Häufige Ausrutscher

Kurz gefasst

🧠 Testen Sie Ihr Wissen

Testen Sie Ihr Wissen

📝 Anweisungen

🚧 Kurs Kommt Bald

Course Name

Benachrichtigung Bei Verfügbarkeit

Jetzt Verfügbar

Coming Soon

Course Name