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

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

All Topics