JS This Keyword

JavaScript this Keyword: Invocation Context & Explicit Binding

The this keyword refers to the object executing the current function. Its value is NOT static; it is determined at runtime based on how the function was invoked (Implicit, Explicit, New, or Arrow binding).

this Binding Rules Decision Tree

flowchart TD
    CallSite["Function Call Site"] --> Rule1{"Invoked with 'new'?"}
    Rule1 -- "Yes" --> NewBound["this = Newly Created Object Instance"]
    
    Rule1 -- "No" --> Rule2{"Invoked via call(), apply(), or bind()?"}
    Rule2 -- "Yes" --> ExplicitBound["this = Explicit Target Object"]
    
    Rule2 -- "No" --> Rule3{"Invoked as Method (obj.func())?"}
    Rule3 -- "Yes" --> MethodBound["this = Context Object (obj)"]
    
    Rule3 -- "No" --> Rule4{"Is Arrow Function?"}
    Rule4 -- "Yes" --> LexicalBound["this = Lexical Enclosing Scope 'this'"]
    Rule4 -- "No" --> DefaultBound["this = globalThis (or undefined in strict mode)"]

this Binding Summary Table

Practical Code Example

// Demonstrating the 4 binding rules of 'this'

// 1. Method Invocation (Implicit Binding)
const account = {
  username: "Maksudur",
  display() {
    console.log(`Method this: ${this.username}`);
  }
};
account.display(); // "Maksudur"

// Loss of implicit binding when detached from object context
const detachedDisplay = account.display;
// detachedDisplay(); // Throws TypeError: Cannot read property 'username' of undefined in strict mode

// 2. Explicit Binding (call, apply, bind)
const externalUser = { username: "Sarah" };
account.display.call(externalUser); // Explicitly sets this to externalUser -> "Sarah"

const boundDisplay = account.display.bind(externalUser);
boundDisplay(); // Fixed bound function -> "Sarah"

// 3. Arrow Function Lexical 'this'
const timer = {
  seconds: 0,
  start() {
    // Arrow function inherits 'this' from timer.start() execution context!
    setTimeout(() => {
      this.seconds++;
      console.log(`Timer seconds: ${this.seconds}`);
    }, 50);
  }
};
timer.start();

Best Practices & Gotchas

• Do Not Use Arrow Functions for Object Methods: Defining object methods with arrow functions (display: () => { ... }) binds this to the outer global scope, causing this.prop to evaluate as undefined.
• Use bind() for Event Listener Callbacks: Pass this.handleClick.bind(this) to DOM event listeners inside class components to preserve class instance binding.
• Difference Between call and apply: call(thisArg, arg1, arg2) accepts comma-separated arguments. apply(thisArg, [argsArray]) accepts an array of arguments.

Self-Check Challenge

Explain the output difference between fn.call(obj, 10, 20) and fn.apply(obj, [10, 20]).