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

What is the difference between call, apply, and bind? When would you use each?

call and apply invoke the function immediately with a specified this, while bind returns a new function with a permanently bound this. call accepts arguments individually, apply accepts arguments as an array.

call(thisArg, arg1, arg2, ...) invokes the function immediately, setting this to thisArg and passing arguments individually. apply(thisArg, [argsArray]) does the same but accepts arguments as an array. bind(thisArg, arg1, arg2, ...) returns a new function with this permanently set to thisArg; it does not invoke the function immediately. Use call when you know arguments separately, apply when arguments are in an array, and bind when you need to create a reusable bound function. Example: function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const obj = { name: 'Alice' }; greet.call(obj, 'Hello', '!'); greet.apply(obj, ['Hi', '?']); const boundGreet = greet.bind(obj, 'Hey'); boundGreet('!!');.