JavaScript Runtime

this Binding Rules

Understand how JavaScript decides what this means at the moment a function is called.

Learn new, call, apply, bind, implicit and default binding, arrow-function lexical this, callbacks, classes, DOM events, React, and interview traps.

The call-site rule

For a regular function, this usually refers to the object associated with the current function call. The most important idea is that this is determined by how the function is called, not where it is written.

call style → binding rule → value of this

Arrow functions are the exception: they capture this lexically from the surrounding scope.

1. new binding: new User()

function User(name) {
  this.name = name;
}
const user = new User("Zubair");

At this call site, this refers to The newly created instance.

2. Explicit binding: call / apply / bind

introduce.call(user, "Engineer");
introduce.apply(user, ["Engineer"]);
const fixed = introduce.bind(user);

At this call site, this refers to The object supplied explicitly.

3. Implicit binding: object.method()

const cart = {
  items: 3,
  count() { return this.items; }
};
cart.count(); // 3

At this call site, this refers to The object before the dot.

4. Default binding: plainFunction()

"use strict";
function showThis() {
  console.log(this);
}
showThis(); // undefined

At this call site, this refers to undefined in strict mode.

Call-site playground

Choose a call style and see which binding rule determines this.

user.showName()this → user

Binding Method Comparison

Method	Executes immediately	Arguments	this
call()	Yes	Individually	Supplied object
apply()	Yes	Array	Supplied object
bind()	No	Individually	Permanently bound object
obj.method()	Yes	Normal call	Object before the dot
arrow function	Depends on call	Normal arguments	Lexical outer this

Method context can be lost

const user = {
  name: "Zubair",
  greet() { console.log(this.name); }
};

const greetUser = user.greet;
greetUser(); // undefined in strict mode

Extracting a method turns the call into a plain function call. Use user.greet.bind(user) or a wrapper arrow function.

Arrow callback preserves context

const user = {
  name: "Zubair",
  greetLater() {
    setTimeout(() => console.log(this.name), 1000);
  }
};

The arrow callback captures this from greetLater, where the method was called as user.greetLater().

Use event.currentTarget

button.addEventListener("click", event => {
  console.log(event.currentTarget);
});

event.currentTarget is clearer than relying on this in a DOM handler.

Checkout service callback

button.addEventListener(
  "click",
  () => checkoutService.placeOrder(order)
);

A wrapper arrow closes over checkoutService and avoids passing an unbound method.

Best Practices and Interview Answer

Use regular method syntax when an object method needs dynamic this.

Use arrow functions for callbacks that should preserve surrounding this.

Use bind() when passing instance methods as callbacks.

Prefer explicit parameters when dynamic context is unnecessary.

Use event.currentTarget for DOM event targets.

Modern React function components generally avoid this and use hooks and closures.

Remember new > explicit > implicit > default binding.

bind() cannot replace an arrow function's lexical this.

30-second answer: this is usually determined by the call site. new uses the new instance, call/apply/bind set it explicitly, obj.method() uses obj, and a plain call is undefined in strict mode. Arrow functions do not have their own this; they capture it lexically.

Practice quiz

this Binding Quiz

Select an answer to see the explanation.

1. What usually determines the value of this for a regular function?

2. What does this refer to inside a function called with new?

3. Which methods provide explicit binding?

4. In user.greet(), what is this for a regular method?

5. What happens when an object method is extracted and called as greetUser()?

6. How do arrow functions determine this?

7. Why are arrow functions useful inside object-method callbacks?

8. What is the preferred value for a DOM event target?

9. Can bind() replace the this of an arrow function?

10. Which fix safely passes an object method as a callback?

Score: 0 / 10