The `this` Keyword

⏱️ ~2-minute bite · solve the sandbox to master

0%lesson

🧒

5-Year-Old Metaphor

— The physical, real-world picture. No jargon.

🧒 `this` is a fingerprint left on whoever is holding the phone right now.

A function is a phone. When you call it, somebody is holding it — that holder is this. It does not matter who made the phone or where it was kept. Only who is holding it at the moment of the call.

alice.call() → Alice is holding it → this = alice.
Drop the phone on the floor (const f = alice.call; f()) → nobody holds it → undefined.
.call(bob) → you physically shove the phone into Bob's hand.
An arrow function has no hands. It just keeps pointing at the room it was born in.

🎛️

Interactive Sandbox

— Move something, see it react instantly.

🧍phone

📱alice

🧍bob

🧍window/undefined

🧍newObj

🧍bornRoom

1	alice.whoHoldsMe()

// this resolves to → alice

Called as a method → `this` is whatever is left of the dot.

🎯

Challenge

Hand the phone to BOB without touching the object it lives on.

Try it

🎯

Why Should I Care?

— The exact interview question + the bug it kills.

Exact interview question

“What logs here, and why?”

1	const user = {
2	name: 'Ada',
3	greet() { return 'hi ' + this.name; },
4	};
5	const g = user.greet;
6	console.log(g()); // ?
7	console.log(user.greet()); // ?

Answer: g() → hi undefined (lost holder), user.greet() → hi Ada.

Production bug it solves

Passing a class method as a callback — onClick={this.handleClick} — and getting “Cannot read properties of undefined”. The handler got ripped off its object. Fix: bind in the constructor, or use a class field arrow (handleClick = () => {…}), which has no hands and keeps the instance.

🔬

The Deep Dive

— Spec refs, engine internals, the minutiae.

The four binding rules, in precedence order (highest wins):

new binding — new Foo() creates a fresh object and binds it; ignores everything below.
Explicit binding — .call / .apply / .bind. A hard-bound fn (bind) can't be re-bound except by new.
Implicit binding — obj.fn() → the base object. Only the last reference before the call counts (a.b.fn() → b).
Default binding — bare fn() → globalThis in sloppy mode, undefined in strict (ES5 §10.4.3 / ES2015 strict).

Arrows are special: they have no [[ThisMode]]: lexical binding — the spec (ES2015 §14.2) resolves this via the enclosing environment record, so .call on an arrow is a no-op for this.

In V8, this isn't a variable in the local scope; it's a receiver slot on the activation. That's why arrows can skip it entirely — no slot, walk up the scope chain.

🎤

Interview Questions

— Real questions from real interviews — with answers.

new > explicit (.call/.bind) > implicit (obj.fn()) > default (global/undefined).

Extracting a method breaks the implicit binding — there's no longer a dot-call receiver.

Arrow functions have no own `this` binding — they capture it from their enclosing lexical scope at creation time.

`.call` invokes immediately with args listed; `.apply` invokes immediately with args as array; `.bind` returns a new permanently-bound function.

Prototype methods share one function; class field arrows create a new function per instance.

`new` creates a fresh object linked to the constructor's prototype, then calls the function with it as `this`; returning a non-primitive overrides it.

🎮

Memory Game

— Quick quiz — lock the concept in long-term memory.

1/4

How does `this` work inside a class field vs a class method?