Q104: this Binding and Call Site Rules

What Interviewers Want To Evaluate

This question tests whether you understand how this is determined in JavaScript. Interviewers want call-site rules, default binding, implicit binding, explicit binding, constructor calls, arrow functions, strict mode, event handlers, classes, and common React or callback bugs.

Senior engineers should explain this without saying it “points to the current object.”

Short Interview Answer

In JavaScript, this is usually determined by how a function is called, not where it is defined. The main rules are default binding, implicit binding through an object call, explicit binding with call, apply, or bind, and constructor binding with new. Arrow functions are different because they do not create their own this; they close over this from the surrounding lexical scope. Strict mode changes default binding from the global object to undefined.

Detailed Interview Answer

The most important phrase is: this is call-site dependent for normal functions.

Look at the invocation:

fn()                 default binding
obj.fn()             implicit binding
fn.call(obj)         explicit binding
new Fn()             constructor binding
() => this.value     lexical this

Default Binding

When a normal function is called directly, this uses default binding. In non-strict browser scripts, this may be the global object. In strict mode, this is undefined.

Modern modules and many bundler outputs use strict behavior.

Implicit Binding

When a function is called as a property of an object, the object to the left of the call becomes this.

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

user.greet(); // "Asha"

The call site is user.greet().

Lost Binding

If you extract the method, the call site changes.

const greet = user.greet;
greet(); // this is no longer user

This is a classic callback bug.

Explicit Binding

call, apply, and bind set this explicitly for normal functions. bind returns a new function with this fixed.

This is useful for callbacks, though modern code often prefers arrow functions or class fields depending on context.

Constructor Binding

When called with new, JavaScript creates a new object and binds this to that object inside the constructor function.

Class constructors use this model with additional class semantics.

Arrow Functions

Arrow functions do not have their own this. They use this from the lexical scope where they are created.

This is useful for callbacks but dangerous if you expected the function to receive dynamic this.

Common Mistakes

A common mistake is saying this always means the object where the function was defined. It does not.

Another mistake is using arrow functions for object methods that need dynamic this.

Senior Trade-Offs

Dynamic this is flexible but can be confusing. Arrow functions are predictable but cannot be rebound.

A senior answer should recommend avoiding unnecessary this in complex code and using explicit parameters when clearer.

Code or Design Example

const user = {
  name: "Dev",
  normal() {
    return this.name;
  },
  arrow: () => {
    return this.name;
  },
};

console.log(user.normal()); // "Dev"
console.log(user.arrow()); // usually undefined

The arrow function does not get this from user.

Production Example

In event handlers, passing a method directly can lose binding:

button.addEventListener("click", user.greet);

The function may run with this as the button or undefined depending on context. Use a wrapper or bind when needed.

React Context

In modern function components, this is usually avoided. Older class components often needed binding for event handlers.

Understanding the rule still matters when using libraries, DOM APIs, classes, or legacy code.

Debugging Workflow

When this is unexpected:

find the exact call site
check strict mode
check whether function is arrow or normal
check whether method was extracted
check call/apply/bind
check new constructor calls

Revision Notes

Normal function this is determined by call site. Arrow function this is lexical.

Key Takeaways

Do not ask where the function is written. Ask how it is called.

Follow-Up Questions

1. How is this determined?
2. What is default binding?
3. What is implicit binding?
4. How does bind work?
5. How does new affect this?
6. How are arrow functions different?
7. Why does method extraction lose this?
8. How does strict mode affect this?
9. How does this appear in event handlers?
10. How would you avoid confusing this usage?

How I Would Answer This In A Real Interview

I would explain the call-site rules for normal functions, then contrast arrow functions as lexical. I would show method extraction and object method examples, and mention strict mode, bind, constructor calls, and callback bugs.