this & binding

The plain-language idea

Here's the twist that trips everyone: variables are lexical (decided by where you write them), but this is dynamic — decided by how the function is called, at the call site.

Same function, called four ways, four different values of this.

The four rules

function who() { return this?.name ?? "none"; }

const user = { name: "Adesh", who };
who();            // "none"  — plain call (this is undefined in strict mode)
user.who();       // "Adesh" — implicit: called on an object
who.call(user);   // "Adesh" — explicit: you pass this in
const bound = who.bind(user);
bound();          // "Adesh" — bound: this is locked in

this isn't fixed when a function is written — it's decided by HOW it's called, at the call site.

BackNext

Arrow functions are the exception: they don't get their own this — they borrow it from where they were written. That's lexical, like a variable.

See it in a real thing

The classic bug: passing a method as a callback loses its object.

const timer = {
  seconds: 0,
  tick() { this.seconds++; },
};
setInterval(timer.tick, 1000);         // broken: `this` is no longer `timer`
setInterval(() => timer.tick(), 1000); // fixed: the arrow keeps the call on `timer`

What people usually miss

Watch out

• A plain function callback's this is undefined in strict mode — not the surrounding object.
• Arrow methods on an object are usually wrong — an arrow used as an object method captures the outer this, not the object.
• bind returns a new function — it never changes the original.

The genealogy

this is the dynamic counterpart to lexical scope — knowing both, and when arrow functions opt out of dynamic this, is the whole topic. It's also why methods often needed binding in older React class components.