JavaScript "this" Keyword Interview Questions

Rule 1: Method call — this is the object to the left of the dot

const user = {
  name: 'Alice',
  greet() {
    console.log(`Hello, I'm ${this.name}`)
  }
}

user.greet()  // 'Hello, I'm Alice' — this = user (object left of dot)

The rule is about the call site, not the definition. The same function gets a different this depending on what object it's called on:

function greet() {
  console.log(`I'm ${this.name}`)
}

const alice = { name: 'Alice', greet }
const bob   = { name: 'Bob',   greet }

alice.greet()  // "I'm Alice" — this = alice
bob.greet()    // "I'm Bob"   — this = bob

Rule 2: Plain function call — this is global (or undefined in strict mode)

function whoAmI() {
  console.log(this)
}

whoAmI()  // window (browser) or global (Node.js)

// In strict mode:
'use strict'
function whoAmI() {
  console.log(this)  // undefined — strict mode prevents global binding
}
whoAmI()

The classic lost-context bug — extracting a method from an object and calling it as a plain function:

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

user.greet()         // 'Alice' ✓

const fn = user.greet
fn()                 // undefined (or TypeError in strict mode)
                     // fn() is a plain call — this is global, not user

Rule 3: Constructor call with new — this is the new object

function Person(name, age) {
  this.name = name   // this = newly created object
  this.age  = age
}

const alice = new Person('Alice', 30)
console.log(alice.name)  // 'Alice'
console.log(alice.age)   // 30

When you use new, JavaScript: (1) creates a new empty object, (2) sets this to that object, (3) runs the function body, (4) returns the object (unless the function returns a different object explicitly).

Rule 4: Explicit binding with call, apply, bind

function introduce(city, country) {
  console.log(`${this.name} from ${city}, ${country}`)
}

const alice = { name: 'Alice' }

// call — pass this, then individual args
introduce.call(alice, 'Mumbai', 'India')   // 'Alice from Mumbai, India'

// apply — pass this, then args as array
introduce.apply(alice, ['Mumbai', 'India']) // 'Alice from Mumbai, India'

// bind — returns a NEW function with this permanently locked
const aliceIntro = introduce.bind(alice)
aliceIntro('Mumbai', 'India')   // 'Alice from Mumbai, India'
aliceIntro('Delhi', 'India')    // 'Alice from Delhi, India'
// alice is permanently bound — calling differently has no effect

Rule 5: Arrow functions — no own this, inherits lexically

Arrow functions don't have their own this. They inherit this from the enclosing lexical context — the this of the surrounding code at the time the arrow function was written.

const timer = {
  count: 0,

  // Regular function — this would be lost in setTimeout callback
  startBad() {
    setTimeout(function() {
      this.count++  // this = window (plain callback), not timer
      console.log(this.count)  // NaN or error
    }, 1000)
  },

  // Arrow function — inherits this from startGood's execution context
  startGood() {
    setTimeout(() => {
      this.count++   // this = timer ✓ — arrow inherited it
      console.log(this.count)  // 1
    }, 1000)
  }
}

timer.startGood()

Arrow functions are the fix for "losing this in callbacks." The arrow function doesn't rebind this — it uses whatever this the surrounding function had.

class — this in method context

class Counter {
  count = 0

  increment() {
    this.count++
    console.log(this.count)
  }
}

const c = new Counter()
c.increment()  // 1 ✓ — method call, this = c

// The extraction bug still applies to classes:
const fn = c.increment
fn()  // TypeError in strict mode — this is undefined, not c

// Fix — bind in constructor:
class Counter2 {
  count = 0

  constructor() {
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.count++
  }
}

// Fix — use arrow function as class field (most common in React):
class Counter3 {
  count = 0
  increment = () => {   // arrow field — this is permanently bound
    this.count++
  }
}

The precedence order

When multiple rules could apply, this is the priority:

1. new binding — highest priority
2. Explicit binding (call/apply/bind)
3. Method call (implicit binding)
4. Default binding (plain call) — lowest priority

Arrow functions are outside this hierarchy — they have no binding of their own and cannot be overridden by any of the above.

Common this bugs and fixes

// Bug 1: method passed as callback loses context
class Button {
  label = 'Click me'
  handleClick() {
    console.log(this.label)  // 'undefined' if called as callback
  }
}
const btn = new Button()
document.addEventListener('click', btn.handleClick)  // this = document element

// Fix: bind
document.addEventListener('click', btn.handleClick.bind(btn))

// Fix: arrow wrapper
document.addEventListener('click', () => btn.handleClick())

// Fix: arrow class field (React standard)
class Button2 {
  label = 'Click me'
  handleClick = () => {    // arrow — this permanently bound
    console.log(this.label)
  }
}

// Bug 2: chained method losing context
const { greet } = user    // destructuring extracts function
greet()                   // this = global, not user

// Fix: always call it as user.greet() or use bind