What is this?

The Shape Shifter

Unlike most variables, this isn't determined by where a function is written — it's determined by how the function is called. The caller decides the shape.

Global Context

When a function is called without any owner (a "loose call"), this defaults to the global object — window in browsers:

// In a browser (non-strict mode)
console.log(this); // window

function showThis() {
  console.log(this);
}
showThis(); // window (loose call — no owner)

In strict mode, loose calls give undefined instead — a much safer default:

"use strict";

function showThis() {
  console.log(this);
}
showThis(); // undefined — strict mode doesn't default to window

Object Context

When a function is called as a method (with an object before the dot), this becomes that object:

const shapeshifter = {
  form: "wolf",
  reveal() {
    console.log("I am a " + this.form);
  },
};

shapeshifter.reveal(); // "I am a wolf"
// this = shapeshifter (the object before the dot)

The Detached Method Trap

Copying a method to a variable strips the object context. The function is the same, but the caller is gone:

const shapeshifter = {
  form: "wolf",
  reveal() {
    console.log("I am a " + this.form);
  },
};

const detached = shapeshifter.reveal;
detached(); // "I am a undefined" — identity lost!
// The function was copied without its context

Try It: Context Explorer

Explore different calling scenarios and see what this resolves to in each:

Summary