Hard'this' Binding💻 Output Question

Class method loses this when destructured

💡

Hint

Destructuring methods detaches them from their object. Always bind or use .call() when passing methods as callbacks.

What does this output?

class Greeter {
  constructor(name) { this.name = name; }
  greet() { return 'Hi, ' + this.name; }
}
const g = new Greeter('Alice');
console.log(g.greet());
const { greet } = g;
console.log(greet?.call(g));

Correct Output

Hi, Alice
Hi, Alice

Why this output?

Explanation: g.greet() has this = g (correct). Destructuring detaches the method but .call(g) explicitly provides the context.

Key Insight: Destructuring methods detaches them from their object. Always bind or use .call() when passing methods as callbacks.

More 'this' Binding Output Questions

EasyMethod call — this is the calling objectEasyArrow function has no own this — inherits lexicallyMediumbind permanently fixes this — call cannot override itMediumcall vs apply — same result, different syntax

Practice predicting output live →

66 output questions with instant feedback

💻 Try Output Quiz