this in JavaScript

Datum: Mai 2025
Lesedauer: 2 Minuten

Prägnante Übersicht zum this Keyword in JS.

Was ist this?

this referenziert einen Wert. In der Regel ist dies der sogenannte "execution context".
Im Browser ist dies die window Instance (aus Window), welche das document enthält.
In Node.js ist es global.
In einer Funktion ist es eine Referenz zum Objekt, auf welchem Aufruf getätigt wurde.

Funktionen

Im globalen Kontext eines Browsers verweist this standardmässig auf das window Objekt.

function logThisContext() {
    console.log(this); // window
}
 
logThisContext();

In einem Objekt bezieht sich this auf das aktuelle Objekt, was in diesem Fall den Zugriff auf die ppg ermöglicht.

const player = {
    ppg: 23,
    getPpg() {
        console.log(this.ppg); // 23
    },
};
 
player.getPpg();

Nach Erstellung eines Objekts mit der new Syntax, referenziert this die neue Instanz.

function Player(name) {
    this.name = name;
 
    this.getName = function () {
        console.log(this.name);
    };
}
 
const magic = new Player('Magic Johnson');
magic.getName();

Arrow Functions

In Arrow Functions basiert das this auf dem Ausführungskontext der umschliessenden Funktion oder des umgebenden Objekts.

const player = {
    ppg: 23,
    reb: 8,
    getPpg() {
        console.log(this.ppg); // this->player; ppg->23
    },
    getReb: () => console.log(this.reb), // this->window; this.reb->undefined
};
 
player.getPpg();
player.getReb();

Prototype Methods

bind() kreiert eine neue Funktion, welche this an ein spezifisches Objekt bindet.

function getPpg() {
    console.log(this); // {ppg: 23}
    console.log(this.ppg); // 23
}
 
const player = {
    ppg: 23,
};
 
const playerPpg = getPpg.bind(player);
playerPpg();

call() funktioniert ähnlich, ruft jedoch die Funktion direkt auf. Dabei können zusätzliche Argumente einzeln übergeben werden.

function getPpg() {
    console.log(this); // {ppg: 23}
    console.log(this.ppg); // 23
}
 
const player = {
    ppg: 23,
};
 
getPpg.call(player);

apply() funktioniert wie call(), aber anstelle von einzelnen Argumenten wird ein Array übergeben.

function getPointsPerMin(freethrows, playedMins) {
    console.log((this.ppg + freethrows) / playedMins); // 1
}
 
const player = {
    ppg: 23,
};
 
getPointsPerMin.call(player, [4, 27]);

Method Chaining

Method Chaining ist das Aufrufen mehrere Methoden hintereinander auf einem Objekt. Daraus resultiert ein kompakter, gut lesbarer Code. Eine solche Abrufkette kann man z.B. für einen Fetch verwenden.

fetch('https://example.com/datapoint')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error:', error));

Der Schlüssel zur Implementierung ist auf Zeile 6 sichtbar. Da wird das aktuelle Objekt mit this zurückgegeben, wodurch der nächste Methodenaufruf direkt anschliessend erfolgen kann.

function Player(name) {
    this.name = name;
 
    this.dribble = function () {
        console.log('- Dribble -');
        return this;
    };
}
 
const ai = new Player('Allen Iverson');
ai.dribble().dribble().dribble(); // - Dribble - - Dribble - - Dribble -

Strict Mode

Strict Mode (ab ECMAScript 5) zwingt JavaScript zu strengeren Regeln.
Ist dieser Modus aktiv, referenziert this nicht implizit den execution context.

'use strict';
 
console.log(this); // undefined

Zugriffe auf window oder global müssen also explizit erfolgen.