Das this keyword in JavaScript
Was bedeutet this?
this
ermöglicht innerhalb einer Funktion den Zugriff auf das aufrufende Objekt.
function eineFunktion() { console.log(this); } eineFunktion();
Existiert noch kein aufrufendes Objekt (wie im Beispiel oben), zeigt this
standardmäßig auf das globale Objekt window
.
Wird der strict mode in JavaScript genutzt, ist this standardmäßig undefined
.
Wozu braucht man this
?
this
kann die Schreibarbeit beim Programmieren vereinfachen. Als kleine Demonstration erstellen wir einen Button, dessen Text bei jedem click-Event verdoppelt werden soll.
<!-- ohne this --> <button onclick="document.getElementsByTagName('button')[0].innerHTML += document.getElementsByTagName('button')[0].innerHTML">Klick</button> <!-- mit this --> <button onclick="this.innerHTML += this.innerHTML">Klick</button>
Das button
Objekt im Beispiel ruft bei jedem Mausklick die in onclick
definierte Funktion auf. Daher zeigt this
innerhalb dieser Funktion auf das button
Objekt und ermöglicht den Zugriff auf seine Eigenschaften. Die Eigenschaft innerHTML
ermöglicht in diesem Fall den lesenden und schreibenden Zugriff auf den Inhalt des Objekts.
this
beim Event-Handling
Wie man sieht eignet sich this
sehr gut, um innerhalb einer Event-Handler-Funktion auf das Objekt zuzugreifen, für das das Event (im Beispiel click) ausgelöst wurde. Und das kann besonders dann äußerst hilfreich werden, wenn man eine einzelne Event-Handler-Funktion gleich für mehrere, möglicherweise sogar ganz verschiedene Objekte nutzen möchte.
<div id="ein-div">erstes Objekt</div> <button>zweites Objekt</button>
function eventHandler() { this.innerHTML = 'Ich bin ein ' + this.nodeName + ' und du hast mich geklickt'; } document.getElementById('ein-div').addEventListener('click', eventHandler, false); document.getElementsByTagName('button')[0].addEventListener('click', eventHandler, false);
this
in Konstruktorfunktionen
Ein weiteres Einsatzgebiet von this
ist das dynamische Erzeugen von Objekten. Im Sprachschatz von JavaScript gibt es keine Klassen. Daher werden bei der Erzeugung von Objekten, die alle dieselbe Struktur haben sollen, oft Konstruktorfunktionen benutzt. this
wird innerhalb einer Konstruktorfunktion genutzt, um jedem Objekt bestimmte Eigenschaften und Methoden zuzuordnen.
function autoKonstruktor(marke, ps) { this.marke = marke; this.ps = ps; } autoKonstruktor.prototype.info = function () { alert('Dies ist ein Auto der Marke ' + this.marke + ' mit sagenhaften ' + this.ps + ' Pferdestärken.'); }; var neuesAuto = new autoKonstruktor('Trabant', 23); neuesAuto.info();
Hier zeigt this
also of das jeweilige Objekt, das durch die Konstruktorfunktion erzeugt wurde.
Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project
Karriere bei a coding project - Wir freuen uns auf dich!
Alle unsere Stellen sind Remote oder an unseren Standorten in Münster und Wuppertal verfügbar:
- PHP-Entwickler (m/w/d) mit Fokus Laravel
- Frontend-Entwickler (m/w/d)
- Technischer Kundenbetreuer (m/w/d)
// Warum Du Dich für uns entscheiden solltest
- Regelmäßig neue Projekte, die Du von Grund an mit planen und aufbauen kannst
- Arbeit in einem wachsenden IT-Unternehmen
- So viel Home-Office wie Du möchtest - Und einen Arbeitsplatz in unserem Büro in Münster
- Wöchentliche Vorträge: Jeden Freitag hält ein Mitarbeiter einen Vortrag über ein Fachthema seiner Wahl