Explain this keyword in JavaScript.

Let’s break down this keyword in JavaScript step by step, because it behaves differently depending on where and how it is used.

---

🔹 What is this?

• this is a special keyword in JavaScript that refers to the object that is currently executing the function.
• Its value depends on how a function is called, not where it is defined.

---

🔹 Behavior of this in Different Scenarios

1. Global Context (non-strict mode)

console.log(this); // In browser → Window object

👉 In the global scope, this refers to the global object (window in browsers, global in Node.js).

In strict mode:

'use strict';
console.log(this); // undefined

---

2. Inside an Object Method

const person = {
  name: "Himanshu",
  greet: function () {
    console.log(this.name);
  }
};
person.greet(); // "Himanshu"

👉 Here, this refers to the object that owns the method (person).

---

3. Inside a Function

function show() {
  console.log(this);
}
show(); // In browser → Window

👉 In normal functions, this refers to the global object (in non-strict mode).
👉 In strict mode, it becomes undefined.

---

4. Inside a Constructor Function

function Car(model) {
  this.model = model;
}
const car1 = new Car("BMW");
console.log(car1.model); // "BMW"

👉 With new, this refers to the newly created object.

---

5. Inside a Class

class Student {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}
const s1 = new Student("Ravi");
s1.showName(); // "Ravi"

👉 In a class, this refers to the instance of the class.

---

6. Arrow Functions

const obj = {
  name: "Sharma",
  greet: () => {
    console.log(this.name);
  }
};
obj.greet(); // undefined

👉 Arrow functions do not have their own this.
They inherit this from the surrounding scope (lexical scoping).

---

7. Event Handlers

button.addEventListener("click", function() {
  console.log(this); // The button element
});

👉 With normal functions, this refers to the DOM element that received the event.

With arrow functions:

button.addEventListener("click", () => {
  console.log(this); // Inherited from parent scope, usually Window
});

---

🔹 Quick Summary

• Global scope: this → global object (window).
• Object method: this → object itself.
• Function (strict mode): this → undefined.
• Constructor / Class: this → new object instance.
• Arrow function: this → parent scope.
• Event handler (normal): this → DOM element.