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.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project