The this Keyword

The this keyword in JavaScript is one of the most confusing concepts. Unlike most languages where this always refers to the current instance, in JavaScript this depends on how the function is called, not where it’s defined.

Let’s go through every scenario.

1. this in Global Context

In the global scope (outside any function), this refers to the global object.

console.log(this); // window (in browser) or global (in Node.js)

var name = "Manish";
console.log(this.name); // "Manish" — var attaches to window

2. this in Object Methods

When a function is called as a method of an object, this refers to the object that owns the method.

const user = {
  name: "Manish",
  greet() {
    console.log(this.name); // "Manish" — this = user
  }
};
user.greet();

3. this in Regular Functions

In a regular function (not called as an object method), this defaults to window. In strict mode, it’s undefined.

function showThis() {
  console.log(this); // window (or undefined in strict mode)
}
showThis();

"use strict";
function showThisStrict() {
  console.log(this); // undefined
}
showThisStrict();

4. this in Arrow Functions

Arrow functions do not have their own this. They inherit this from the enclosing lexical scope (the parent). This is the biggest difference from regular functions.

const user = {
  name: "Manish",
  greet: () => {
    console.log(this.name); // undefined — arrow inherits global this, not user
  },
  delayedGreet() {
    setTimeout(() => {
      console.log(this.name); // "Manish" — arrow inherits this from delayedGreet
    }, 1000);
  }
};

user.greet();        // undefined (this = window, not user)
user.delayedGreet(); // "Manish" (arrow inherits this from the method)

This is why arrow functions are perfect for callbacks inside methods — they keep the parent’s this.

5. this in Classes

Inside a class, this refers to the instance being created.

class User {
  constructor(name) {
    this.name = name; // this = the new instance
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const user = new User("Manish");
user.greet(); // "Hi, I'm Manish" — this = user instance

6. this in Event Handlers

In a DOM event handler, this refers to the element that received the event.

const button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log(this); // the <button> element
});

// But with arrow function, this is inherited from outer scope
button.addEventListener("click", () => {
  console.log(this); // window — not the button!
});

The golden rule

In simple language, this is determined by how a function is called:

• Called with obj.method() → this is obj
• Called alone fn() → this is window (or undefined in strict mode)
• Arrow function → this is whatever the parent’s this was
• Called with new → this is the new instance
• Called with call/apply/bind → this is whatever you pass in

If you remember just one thing — look at the left side of the dot when the function is called. That’s what this is.