The this Keyword

Definition

Unlike a regular variable, `this` is not resolved through the scope chain. Its value is determined by the call site, meaning the same function body can produce a different `this` depending on how it is invoked. Called as a method (`obj.greet()`), `this` is the object before the dot. Called standalone (`greet()`), `this` is `undefined` in strict mode (or the global object in non-strict code). Called with `.call()`, `.apply()`, or `.bind()`, `this` is whatever object you explicitly pass in, regardless of how the function is normally attached. Arrow functions break this pattern on purpose: they have no `this` of their own and instead capture `this` lexically from the scope where they were defined, the same way a closure captures a variable. That makes arrow functions useful inside methods or callbacks where you want `this` to stay pointed at the surrounding object instead of being reset by the caller.

Examples

const person = {
  name: "Ada",
  greet() { return this.name; },
};
person.greet(); // "Ada"

const detached = person.greet;
detached(); // undefined (this is not person anymore)

function greet() { return this.name; }
const bound = greet.bind({ name: "Bo" });
bound(); // "Bo"

const arrowGreet = () => this;
// this inside the arrow is whatever this was outside it, fixed forever

Where you see this

• Choosing arrow functions for callbacks (event handlers, array methods) so this still points at the class or object that set them up.
• Using .bind() to pass an object method as a callback without losing its this.
• Debugging a 'cannot read property of undefined' error caused by detaching a method from its object.
• Understanding why React class components historically bound handlers in the constructor.