JavaScript this Keyword call, apply, bind is an important JavaScript topic because it appears in real projects, debugging sessions, and interviews. Learn the meaning first, then connect it to a small working example so the rule does not stay abstract.
For this page, focus on what problem JavaScript this Keyword call, apply, bind solves, where developers usually make mistakes, and how to verify the result. The audit note for this lesson was: limited checklist/practice/mistake/FAQ notes .
A strong understanding of JavaScript this Keyword call, apply, bind should include syntax, behavior, one realistic use case, one failure case, and one quick way to check your work with tools or output.
JavaScript this Keyword call apply bind should be studied as a practical JavaScript lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the javascript > this-and-new-keyword page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
JavaScript this keyword refers to the current object. In other words, while executing every JavaScript function has a reference to its current execution context, known as this. In simple, here execution context means how the function is called. JavaScript this has different values depending on where it is used-
Global Context: in a browser script, top-level this usually points to window. In JavaScript modules and strict-mode functions, the value is different and often undefined.
Object's Method: when a function is called with dot notation such as user.sayHi(), this points to the object before the dot.
The call(), apply() and bind() Methods: these methods let you explicitly choose the this value instead of depending on how the function is called.
The new keyword is used to create an instances of objects from a constructor function, which has to be placed before the constructor function call and will do the following-
function TutorialsLogic(tutorial) {
this.tutorial = tutorial;
}
const site = new TutorialsLogic('JavaScript');
console.log(site.tutorial); // JavaScript
console.log(site.__proto__ === TutorialsLogic.prototype); // trueThe value of this depends entirely on how a function is called, not where it is defined.
// 1. Global context - this = window (browser) or global (Node.js)
console.log(this === window); // true (browser)
// 2. Object method - this = the object
const person = {
name: 'Alice',
greet() {
return `Hello, I am ${this.name}`;
}
};
console.log(person.greet()); // Hello, I am Alice
// 3. Regular function - this = undefined (strict) or window (non-strict)
function show() {
console.log(this); // window or undefined
}
// 4. Arrow function - this = inherited from enclosing scope
const timer = {
seconds: 0,
start() {
setInterval(() => {
this.seconds++; // 'this' refers to timer object
console.log(this.seconds);
}, 1000);
}
};
// 5. Event handler - this = the element that fired the event
document.getElementById('btn').addEventListener('click', function() {
console.log(this); // <button> element
});These three methods let you explicitly set the value of this when calling a function.
function introduce(greeting, punctuation) {
return `${greeting}, I am ${this.name}${punctuation}`;
}
const user = { name: 'Bob' };
// call - invoke immediately, args passed individually
console.log(introduce.call(user, 'Hello', '!'));
// Hello, I am Bob!
// apply - invoke immediately, args passed as array
console.log(introduce.apply(user, ['Hi', '.']));
// Hi, I am Bob.
// bind - returns a NEW function with 'this' permanently bound
const boundIntro = introduce.bind(user, 'Hey');
console.log(boundIntro('?'));
// Hey, I am Bob?
// Practical: borrowing methods
const arr = [3, 1, 4, 1, 5, 9];
const max = Math.max.apply(null, arr);
console.log(max); // 9
// Modern equivalent:
console.log(Math.max(...arr)); // 9A common mistake is saving a method into a variable and calling it later. The function is no longer called as an object method, so this no longer points to the original object. Use bind(), an arrow wrapper, or call the method through the object.
"use strict";
const account = {
owner: "Riya",
showOwner() {
return this.owner;
}
};
const looseFunction = account.showOwner;
// looseFunction(); // TypeError: this is undefined in strict mode
const fixedFunction = account.showOwner.bind(account);
console.log(fixedFunction()); // Riya
// Another safe option:
const wrapper = () => account.showOwner();
console.log(wrapper()); // RiyaWhen a constructor is called with new, JavaScript normally returns the newly created object. If the constructor explicitly returns another object, that object replaces the new instance. Returning a primitive value such as a string or number is ignored.
function User(name) {
this.name = name;
return "ignored";
}
console.log(new User("Aman").name); // Aman
function SpecialUser(name) {
this.name = name;
return { name: name, role: "admin" };
}
console.log(new SpecialUser("Maya")); // { name: "Maya", role: "admin" }class JavaScriptthisKeywordcallapplybindReview {
public static void main(String[] args) {
String state = "ready";
System.out.println("JavaScript this Keyword call apply bind: " + state);
}
}String value = null;
if (value == null) {
System.out.println("JavaScript this Keyword call apply bind: handle the missing value before continuing");
}Calling a value before checking whether it actually holds a function reference.
Trace the variable assignment, the property lookup, and the actual call expression.
Memorizing JavaScript this Keyword call apply bind without the situation where it is useful.
Connect JavaScript this Keyword call apply bind to a concrete JavaScript task.
Testing JavaScript this Keyword call apply bind only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Memorizing JavaScript this Keyword call apply bind without the situation where it is useful.
Connect JavaScript this Keyword call apply bind to a concrete JavaScript task.
The common mistake is memorizing syntax without understanding when the behavior changes or fails.
Remember the problem it solves in JavaScript, then attach the syntax or steps to that problem.
You can predict the result of a small example, explain a failure case, and choose it over a nearby alternative for a clear reason.
They often copy the syntax but skip the state, input, dependency, selector, route, type, or configuration that controls the behavior.
Explore 500+ free tutorials across 20+ languages and frameworks.