JavaScript this Keyword call, apply, bind: Tutorial, Examples, FAQs & Interview Tips

JavaScript this Keyword

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.

JavaScript new Keyword

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-

It creates a new object and the type of this object is simply object.
It sets the new empty objects invisible prototype property(i.e. __proto__) to be the constructor function visible and accessible prototype property.
It binds this keyword to the newly created object and executes the constructor function.
It returns the newly created object.

Note: Constructor functions have a public prototype property. Objects created from that constructor keep an internal prototype link to it. Modern code usually inspects this relationship with Object.getPrototypeOf(obj) instead of relying on __proto__.

example

function TutorialsLogic(tutorial) {
  this.tutorial = tutorial;
}
const site = new TutorialsLogic('JavaScript');
console.log(site.tutorial); // JavaScript
console.log(site.__proto__ === TutorialsLogic.prototype); // true

this in Different Contexts

The value of this depends entirely on how a function is called, not where it is defined.

this Contexts

// 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); //

call(), apply(), and bind()

These three methods let you explicitly set the value of this when calling a function.

call, apply, bind

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)); // 9

When this Gets Lost

A 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.

Lost this

"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()); // Riya

Constructor Return Rules

When 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.

new Return Rules

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" }

Key Takeaways

this refers to the object that is currently executing the function - it changes based on how the function is called.
Arrow functions do NOT have their own this - they inherit it from the surrounding lexical scope.
call() and apply() invoke a function immediately with a custom this; bind() returns a new bound function.
The new keyword creates a new object, sets its prototype, binds this to it, and returns it.
In strict mode ("use strict"), this inside a regular function is undefined instead of the global object.
Use bind() to fix this in callbacks and event handlers where context would otherwise be lost.

JavaScript this Keyword call, apply, bind: Tutorial, Examples, FAQs & Interview Tips