TOPIC OVERVIEW

javascript/this

The one keyword whose value depends entirely on how a function gets called, not where it's written.

10 QuestionsAdvancedHigh Priority ~11 min read

Unlike variables, this isn't determined by where a function is defined — it's determined by how the function is called. The same function can have a completely different this depending on whether it's called as a method (obj.fn()), as a plain function (fn()), as a constructor (new Fn()), or with an explicit binding (fn.call(obj)). That call-site dependency is exactly what trips people up when a method is passed as a callback and loses its object context along the way.

Arrow functions break this pattern intentionally — they don't have their own this at all, and instead capture this lexically from the enclosing scope at the time they're defined. That's why arrow functions are often the fix for 'this is undefined inside my callback,' but it also means arrow functions make bad object methods, since they'll capture this from the surrounding context instead of the object they're attached to.

What you'll walk away knowing

The four rules that determine this: default binding, implicit binding, explicit binding, and new binding

Why this breaks when a method is passed as a callback, and how to prevent it

How arrow functions differ fundamentally by capturing this lexically instead of dynamically

What this refers to in strict mode versus non-strict mode when called with no context

1How do React class components use this, and why did binding in the constructor become a common pattern? How did arrow function class fields solve it?Intermediate 2What are the trade-offs between using arrow functions everywhere to avoid this confusion vs using regular functions with explicit binding?Intermediate 3What is the value of this in a class constructor? What about in a class method called as a callback?Intermediate 4What is the default binding of this? How does strict mode change it?Intermediate 5In what real-world scenarios have you encountered this-related bugs? How did you debug and fix them?Intermediate 6What does new binding do to this? What happens internally when you use new?Intermediate 7How does this behave in prototype chain method calls? Does it refer to the instance or the prototype?Intermediate 8Explain how this works in event listeners. How do you preserve the correct this when using class methods as event handlers?Intermediate 9How does this behave differently in arrow functions vs regular functions? Why?Intermediate 10How does this behave in a module (ESM) at the top level vs CommonJS?Intermediate 11When mixing ES6 classes with prototype manipulation, how can this become unpredictable?Intermediate 12Can this inside an arrow function be changed using .call(), .apply(), or .bind()? Why or why not?Intermediate 13What is the difference between call, apply, and bind? When would you use each?Intermediate 14How does Function.prototype.bind work under the hood? Can you implement a polyfill for it?Intermediate 15How would you explain the this keyword to a junior developer in one analogy?Intermediate 16Explain the 5 rules that determine the value of this in JavaScript. Walk through each with an example.Intermediate 17What is 'context loss' and what are the three most common ways to fix it in production code?Intermediate 18What is the difference between implicit and explicit binding? When does implicit binding get lost?Intermediate 19Can you think of a scenario where using .bind() causes a memory issue? How would you address it?Intermediate

All Topics

Sharethis topic

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.