Ask ten JavaScript developers what this means and you’ll hear ten different stories. The language decides this not by where a function lives but by how it’s invoked. That single principle spawns four binding rules—default, implicit, explicit and new—while arrow functions sidestep them entirely with lexical scoping.

Default binding falls back to the global object—or undefined in strict mode—when a function runs alone. Implicit binding grabs the object left of the dot, but extracting a method loses that link, causing undefined results. Explicit binding via call, apply, or bind forces a specific context, and new creates a fresh instance with this locked to it.

In React class components, unbound handlers are invoked as plain functions, so this becomes undefined, forcing developers to bind in the constructor or declare arrow‑function properties. Arrow functions also shine in callbacks, eliminating the old “self = this” pattern. Functional components with hooks sidestep this altogether, which is why modern codebases favor them.