This

🔹 this i JavaScript

this är ett nyckelord som refererar till det aktuella kontextet (dvs. "vem som äger funktionen"). Viktigt: det beror på hur funktionen anropas, inte var den är definierad.

1. Globalt sammanhang

console.log(this); // I browser: Window, i Node: global

2. Inuti ett objekt

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

person.greet(); // "Anna"

3. Arrow functions

Arrow functions binder inte sitt eget this, de använder sitt omgivande scope istället.

const person = {
  name: "Anna",
  greet: () => {
    console.log(this.name);
  }
};

person.greet(); // undefined (eller global scope)

👉 Därför används oftast vanliga funktioner för metoder i objekt, och arrow functions för callbacks.

4. Konstruktorer och class

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hej ${this.name}`);
  }
}

let u = new User("Eva");
u.sayHi(); // "Hej Eva"

Här pekar this på instansen.

5. Manuell binding (bind, call, apply)

Man kan själv bestämma vad this ska vara:

function greet() {
  console.log(this.name);
}

const user = { name: "Oskar" };

greet.call(user);  // "Oskar"
greet.apply(user); // "Oskar"
let bound = greet.bind(user);
bound();           // "Oskar"

🔹 "that" i JavaScript

Det finns ingen nyckelord that i JavaScript. Men: förr (innan => arrow functions fanns) brukade man ofta skriva:

const person = {
  name: "Anna",
  greet: function() {
    const that = this; // spara this
    setTimeout(function() {
      console.log(that.name);
    }, 1000);
  }
};

person.greet(); // "Anna"

Varför?

• Inuti setTimeout förlorade funktionen sitt this (blev window/undefined).
• Genom att spara this i en variabel kallad that kunde man behålla referensen.

👉 Idag löser man detta med arrow functions istället:

const person = {
  name: "Anna",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // funkar tack vare arrow
    }, 1000);
  }
};

✅ Sammanfattning

• this = beror på hur funktionen anropas.
• that = inget nyckelord, bara ett gammalt workaround-namn för att spara this.
• Numera används arrow functions för att undvika that = this-tricket.