👆this Keyword

this refers to the object executing the current function, determined at call-time. Arrow functions inherit this lexically — they cannot be rebound.

Memory Trick

this is like a pronoun — it means different things depending on who's speaking (calling the function).

1️⃣ Rules for this binding

Context	this value
Global scope	`window` (browser) / `undefined` (strict)
Object method	The object
Regular function call	`window` or `undefined` (strict)
Arrow function	Inherited from enclosing scope
`call` / `apply` / `bind`	Explicitly set
Constructor (`new`)	Newly created object

2️⃣ Common Trap — Context Loss

js
const obj = {
  name: 'Alice',
  greet() { console.log(this.name); }
};

obj.greet(); // 'Alice' ✅
const fn = obj.greet;
fn(); // undefined ❌ — this is now window/undefined!

// Fix 1: bind
const bound = obj.greet.bind(obj);
bound(); // 'Alice' ✅

// Fix 2: arrow function
const obj2 = {
  name: 'Alice',
  greet: () => console.log(this.name) // ❌ lexically inherits outer this
};

3️⃣ Arrow Functions vs bind()

	Arrow Function	bind()
How	Lexically inherits this	Explicitly sets this
Rebindable	❌ Never	✅ Creates new function
Use case	Callbacks, short methods	Legacy code, class methods

js
// Arrow: captured at creation
const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++; // this = timer object ✅
    }, 1000);
  }
};

Was this helpful?

Found an issue? Report here

Test your Knowledge

2 questions to cement what you just learned.