Loading...
See how the JavaScript this keyword works with an interactive visualization. Step through implicit, explicit, new, and arrow function binding rules with call, apply, and bind examples.
Loading visualization...
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.
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.
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.
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.
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.
Common interview prompts with concise model answers.
In strict mode, plain function invocation sets this to undefined instead of the global object.
"use strict";
function showThis() {
console.log(this);
}
showThis(); // undefinedcall and apply invoke immediately with an explicit this, while bind returns a new function with this pre-bound.
No. bind does not change lexical this captured by an arrow function.
When a bound function is called with new, constructor behavior takes priority and this points to the newly created instance.
Continue with these concepts to strengthen your mental model.
const user = { name: "Alice", greet() { console.log(this.name); }}; user.greet();const greetFn = user.greet;greetFn();no binding yet
no objects yet
No output yet.