Understanding JavaScript this: Context, Objects, Functions, and Classes

const user = {
  name: "Priya", greet() {
    console.log(`Hi, I'm ${this.name}!`);
  }
};
user.greet();
// "Hi, I'm Priya!" ✅ — works perfectly
const copiedGreet = user.greet;
copiedGreet();
// "Hi, I'm undefined!" 😱 — SAME function!

function introduce() {
  console.log(`I am ${this.name}`);
}const priya = {
  name: "Priya", introduce
};
const amit = {
  name: "Amit", introduce
};
priya.introduce();
// "I am Priya" — this = priyaamit.introduce();    // "I am Amit"  — this = amit

const player = {
  name: "Arjun", score: 0, addPoints(points) {
    this.score += points;
    // this = player    console.log(`${this.name} has ${this.score} points 🏆`);  }};
    player.addPoints(50);
    // "Arjun has 50 points 🏆"player.addPoints(30);    // "Arjun has 80 points 🏆"

const app = {
  user: {
    name: "Riya", sayHi() {
      console.log(`Hi from ${this.name}`);
    }
  }
};
app.user.sayHi();
// "Hi from Riya" — this = app.user (the closest left object)

function showThis() {
  console.log(this);
}showThis();
// undefined (strict mode / modules)              // or the global object (window) in sloppy old scripts

const user = {
  name: "Priya", greet() {
    console.log(`Hi, I'm ${this.name}!`);
  }
};
const copiedGreet = user.greet;
// function copied WITHOUT its ownercopiedGreet();                    // 😱 plain call — no dot, no owner!// this = undefined → this.name → "Hi, I'm undefined!" (or TypeError in strict)

const counter = {
  count: 0, increment() {
    this.count++;
    console.log(this.count);
  }
};
const btn = document.getElementById("myBtn");
btn.addEventListener("click", counter.increment);
// 😱 passing the bare function!// Click → this is NOT counter → this.count → NaN 💥

class Student {
  constructor(name) {
    this.name = name;
    // this = the new student being built  }}
    const s1 = new Student("Priya");
    // this inside constructor = s1const s2 = new Student("Amit");    // this inside constructor = s2
    console.log(s1.name);
    // "Priya"console.log(s2.name);   // "Amit"

function introduce(city) {
  console.log(`I'm ${this.name} from ${city}`);
}const person = {
  name: "Priya"
};
introduce.call(person, "Mumbai");
// "I'm Priya from Mumbai"//         👆 "use THIS object as this"

introduce.apply(person,["Delhi"]);
// "I'm Priya from Delhi"//            👆 same, but arguments arrive as an array

const boundIntroduce = introduce.bind(person);
boundIntroduce("Pune");
// "I'm Priya from Pune" — this locked forever ✅boundIntroduce("Goa");     // "I'm Priya from Goa"

const counter = {
  count: 0, increment() {
    this.count++;
    console.log(this.count);
  }
};
// ✅ Fix #1 — bind locks `this` to counter:btn.addEventListener("click", counter.increment.bind(counter));// Clicks now print 1, 2, 3… ✅

const timer = {
  seconds: 0, start() {
    setInterval(() => {
      // 🏹 arrow — inherits this from start()      this.seconds++;      console.log(`${this.seconds}s ⏱️`);    }, 1000);  }};
      timer.start();
      // 1s ⏱️, 2s ⏱️, 3s ⏱️… ✅ this = timer, inherited!

const timer = {
  seconds: 0, start() {
    setInterval(function() {
      // 😱 regular function — own this!      this.seconds++;                // this = undefined/window → NaN 💥      console.log(this.seconds);    }, 1000);  }};

// ✅ Fix #1: bind (the classic way)btn.addEventListener("click", counter.increment.bind(counter));
// ✅ Fix #2: arrow wrapper (the modern way)btn.addEventListener("click", () => counter.increment());// The arrow keeps the dot-call: counter.increment() → Rule 3 works! ✅

const user = {
  name: "Priya", greet:() => {
    console.log(`Hi, I'm ${this.name}`);
    // 😱 this = outer scope, NOT user!  }};
    user.greet();
    // "Hi, I'm undefined" — arrows ignore the dot!
    // ✅ Use regular methods when you NEED dynamic this:const user2 = {  name: "Priya",  greet() {                            // regular method shorthand    console.log(`Hi, I'm ${this.name}`);   // this = user2 ✅  }};

1. new fn()? → this = the new object being built2. fn.call/apply/bind? → this = the object you passed3. obj.fn()? → this = obj(left of the dot)4. plain fn()? → this = undefined(strict) / window(sloppy)5. arrow() => {
}? → IGNORES all rules — inherits from birthplace 🏹

const obj = {
  name: "Obj", regular() {
    console.log(this.name);
  }, arrow:() => {
    console.log(this.name);
  }
};
obj.regular();
// "Obj"    — Rule 3 (dot) ✅
obj.arrow();
// undefined — arrow ignores dots 🏹
const stolen = obj.regular;
stolen();
// undefined — Rule 4 (no dot) 😱
obj.regular.call( {
  name: "X"
});
// "X"      — Rule 2 (explicit) 🎛️
class Box {
  constructor() {
    this.name = "Box";
  }
}new Box();
// this = the new Box — Rule 1 🏗️

class ClickCounter {
  constructor(buttonId, labelId) {
    this.count = 0;
    this.button = document.getElementById(buttonId);
    this.label = document.getElementById(labelId);
    // 🏹 Arrow function = this stays locked to THIS counter forever:
    this.button.addEventListener("click",() => {
      this.count++;
      this.updateLabel();
    });
    this.updateLabel();
  } updateLabel() {
    this.label.textContent = `Clicks: ${this.count} 🖱️`;
  } reset() {
    this.count = 0;
    this.updateLabel();
  }
}// HTML needed:
// <button id="counterBtn">Click me!</button>
// <p id="counterLabel"></p>
const counter = new ClickCounter("counterBtn", "counterLabel");
// Click the button → "Clicks: 1", "Clicks: 2"… ✅ this never gets lost!