this in JavaScript

Date: May 2025
Reading time: 2 minutes

Concise overview of the this keyword in JS.

What is this?

this references a value. Generally, this is the "execution context".
In the browser, this is the window instance (from Window), which contains the document.
In Node.js it is global.
In a function, it is a reference to the object on which the call was made.

Functions

In the global context of a browser, this refers to the window object by default.

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

In an object, this refers to the current object, which in this case enables access to the ppg.

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

After creating an object with the new syntax, this references the new instance.

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, the this is based on the execution context of the enclosing function or object.

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() creates a new function that binds this to a specific object.

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

call() works in a similar way, but calls the function directly. Additional arguments can be passed individually.

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

apply() works like call(), but instead of individual arguments, an array is passed.

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

Method Chaining

Method chaining is the calling of several methods in succession. This results in compact, readable code. Such a call chain can be used for a fetch, for example.

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

The key to the implementation is visible on line 6. The current object is returned with this, which means that the next method call can be made directly afterwards.

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 (from ECMAScript 5) forces JavaScript to follow stricter rules.
If this mode is active, this does not implicitly reference the execution context.

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

Therefore, window or global must be explicitly accessed.