How Does the this Keyword Work in JavaScript?
Understand the JavaScript this keyword — the four binding rules, call, apply and bind, arrow functions and the lost-this problem, with clear examples.
Expected Interview Answer
In JavaScript, this refers to the object that is executing the current function, and its value is determined by how the function is called — not where it is defined.
There are a few binding rules, checked in order of precedence: new binding (this is the freshly created object), explicit binding via call, apply or bind, implicit binding where this is the object left of the dot, and default binding to the global object or undefined in strict mode. Arrow functions are the exception: they have no this of their own and instead inherit it from the enclosing lexical scope, which makes them ideal for callbacks that must preserve the surrounding this.
- Lets methods reference the object they belong to
- Enables reusable functions that operate on different objects
- call, apply and bind allow explicit control of context
- Arrow functions solve the lost-this problem in callbacks
- Underpins constructor functions and class methods
AI Mentor Explanation
The this keyword is like the word 'striker' in a commentary. It does not name a fixed player — it points to whoever is currently on strike facing the ball. As batters rotate, the same word refers to different people, because its meaning depends entirely on who is in that role at the moment it is spoken.
Step-by-Step Explanation
Step 1
Check for new
If the function is called with new, this is the brand-new object being constructed.
Step 2
Check explicit binding
call, apply or bind set this to the object you pass in, overriding implicit rules.
Step 3
Check implicit binding
If called as obj.method(), this is obj — the object left of the dot.
Step 4
Fall back to default
A plain call sets this to the global object, or undefined in strict mode.
Step 5
Remember arrow functions
Arrows ignore all the above and inherit this from the enclosing lexical scope.
What Interviewer Expects
- That this is determined by the call site, not the definition site
- The four binding rules and their precedence order
- How call, apply and bind differ
- Why arrow functions do not have their own this
- The lost-this problem in callbacks and how to fix it
Common Mistakes
- Assuming this is fixed by where the function is written
- Passing a method as a callback and losing its this binding
- Using an arrow function as an object method expecting this to be the object
- Confusing call (comma arguments) with apply (array of arguments)
- Forgetting that strict mode makes default this undefined, not global
Best Answer (HR Friendly)
“The this keyword points to whichever object is currently running a function, and it changes based on how that function is called. It is a bit like the word 'here' — it means something different depending on where you say it.”
Code Example
const user = {
name: 'Ada',
greet() {
return `Hi, I'm ${this.name}`;
},
};
console.log(user.greet()); // 'Hi, I'm Ada' — implicit binding, this = user
const greet = user.greet;
console.log(greet()); // this is undefined (strict) — the context was lost
const bound = user.greet.bind(user);
console.log(bound()); // 'Hi, I'm Ada' — explicit binding restores thisFollow-up Questions
- What is the difference between call, apply and bind?
- Why does an arrow function not have its own this?
- How do you fix a callback that has lost its this context?
- What does this refer to in the global scope in strict vs non-strict mode?
- What is this inside a class method versus a standalone function?
MCQ Practice
1. The value of this in a normal function is decided by?
For ordinary functions, this is set by the call site — the way the function is invoked — not by its definition location.
2. An arrow function's this comes from?
Arrow functions have no own this; they inherit it from the surrounding lexical scope at definition time.
3. Which method calls a function immediately with an explicit this?
call invokes the function right away with a given this; bind returns a new function instead of calling it.
Flash Cards
What decides this in a normal function? — The call site — how the function is invoked, not where it is defined.
What is this in obj.method()? — The object left of the dot, via implicit binding — here, obj.
Arrow function this? — Inherited from the enclosing lexical scope; arrows have no own this.
call vs bind? — call runs the function now with a set this; bind returns a new bound function.