this Keyword Theory
The value of this is determined by call-site rules, not where a function is written, and those rules differ between regular functions, methods, constructors, and arrow functions.
What it is
In JavaScript, this provides execution context for a function call. The engine determines it when the function is invoked.
Regular function this depends on the call pattern. Method calls bind this to the receiver object, while plain function calls depend on strict mode and runtime context.
Arrow functions do not create their own this. They lexically capture this from the surrounding scope, which makes them useful for callbacks but unsuitable for dynamic rebinding.
Interview framing: define this Keyword in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
How it works
- Step 1: identify how the function is invoked: plain call, method call, constructor call, or explicit binding call/apply/bind.
- Step 2: apply precedence rules where explicit binding and new behavior override default binding.
- Step 3: for arrow functions, skip dynamic binding and inherit this from the lexical parent scope.
- Step 4: execute function body with resolved this value.
Common mistakes
Assuming this is based on where a function is declared
Regular functions use call-site binding, so moving or passing a function changes this unless explicitly controlled.
Fix: Debug this by checking invocation pattern, not declaration location.
Losing this when passing methods as callbacks
Extracted methods can be called as plain functions, dropping their object receiver and changing this unexpectedly.
Fix: Use bind, wrapper callbacks, or class fields with arrow functions when appropriate.
Using arrow functions for prototype methods that need dynamic this
Arrow functions capture outer this and ignore call-site binding, which can break method semantics on instances.
Fix: Use regular methods when behavior depends on the receiver object.
Interview questions
Common interview prompts with concise model answers.
What is this in strict mode for plain function calls?
In strict mode, plain function invocation sets this to undefined instead of the global object.
"use strict";
function showThis() {
console.log(this);
}
showThis(); // undefinedHow do call, apply, and bind differ?
call and apply invoke immediately with an explicit this, while bind returns a new function with this pre-bound.
Can arrow function this be changed with bind?
No. bind does not change lexical this captured by an arrow function.
Does new ignore a bound this?
When a bound function is called with new, constructor behavior takes priority and this points to the newly created instance.
Related concepts
Continue with these concepts to strengthen your mental model.