ReviseAlgo Logo

Objects & Prototypes

The this Keyword — Rules & Binding

Master the JavaScript this keyword. Learn the four binding rules: default, implicit, explicit, and new binding, and how arrow functions override these behaviors.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In JavaScript, the this keyword refers to the object currently executing the code. Unlike other languages where this is bound statically to a class method, JavaScript's this binding is dynamic and is determined entirely at runtime by how the function is called.

2. Why It Matters

Misunderstanding this resolution is one of the most common causes of runtime bugs in JavaScript development. Knowing the binding rules is essential for writing clean object methods and working with callbacks.

3. Real-World Analogy

Think of a Personal Pronoun (e.g., "Me"):

  • Dynamic Context: The word "Me" doesn't have a fixed meaning. Its reference changes depending on who says it.
  • Speaker Context: When Alice says, "Pass me the pen," "me" refers to Alice. When Bob says, "Pass me the pen," "me" refers to Bob. The value of "me" is determined at the moment the sentence is spoken (invoked), based on who is speaking (the calling context).

4. The Four Binding Rules

The value of this is determined by four rules, ordered from lowest to highest priority:

1. Default Binding (Global Context):

If a function is called standalone (without an owner object), this defaults to the global object (window in browsers) or undefined in strict mode.

2. Implicit Binding (Object Context):

When a function is called as a method of an object, this refers to the object before the dot.

3. Explicit Binding:

Allows you to force a specific context using call, apply, or bind.

4. New Binding (Constructor Context):

When a function is invoked with the new keyword, it acts as a constructor. In this case, this refers to the newly created object instance.

5. Arrow Functions & Lexical this

Arrow functions do not follow the four binding rules. Instead, they resolve this lexically, inheriting it from the parent block scope where the arrow function was defined.

6. Common Mistakes

  • Implicitly losing context (Callback Trap): Passing an object method as a callback directly detaches it from its object, causing this to fall back to the default binding rule.

7. Quick Quiz

Q1: Which binding rule has the highest priority when determining the value of the this keyword?

A) Implicit Binding

B) New Binding

Answer: B — Constructor binding using the new keyword overrides explicit bindings (call/apply/bind) and implicit bindings.

8. Scenario-Based Challenge

The Event Handler Binding Trap:

You attach an object method as a listener: element.addEventListener('click', uiController.toggleTheme). The theme values are stored on uiController. Write three different ways to resolve the losing context issue.

9. Debugging Exercise

Explain why this constructor logs undefined, and how to fix it:

function Car(model) {
  this.model = model;
  this.start = function() {
    setTimeout(function() {
      console.log(this.model + ' started');
    }, 100);
  };
}
const civic = new Car('Civic');
civic.start(); // logs "undefined started"!
View Solution

Diagnosis: The standard function inside setTimeout uses default binding, meaning this falls back to the global context (where model is undefined).

Fix: Use an arrow function to inherit this lexically from the start method scope:

this.start = function() {
  setTimeout(() => {
    console.log(this.model + ' started');
  }, 100);
};

11. Interview Questions

🟢 Q1: List the four binding rules of the this keyword and describe their precedence.

Answer:
1. New Binding: Using the new keyword to create an object instance. (Highest priority)
2. Explicit Binding: Forcing context using call, apply, or bind.
3. Implicit Binding: Calling a method on an owner object (e.g. obj.method()).
4. Default Binding: Standard standalone function execution. (Lowest priority, resolves to global or undefined)

12. Production Considerations

  • • Use Strict Mode: Enforce strict mode to prevent accidental pollution of the global namespace, making this default to undefined instead of the global window object when context is lost.