JavaScript — Introduktion genom exempel

11.2 Användning av this

I metoderna i objekten använder man this för att referera till egenskaper och metoder. Men vi har ju tidigare sett en annan användning av this. I en funktion som kopplas till ett HTML-element genom en händelselyssnare, är this en referens till HTML-elementet. Om det då är en metod i ett objekt som kopplas till elementet genom händelselyssnaren, får vi en konflikt i betydelsen av this. I detta exempel ska vi se hur denna konflikt kan hanteras.

Sammanfattning

Ska en metod i ett objekt användas i en händelselyssnare, lägger man in anrop av den i en anonym funktion. Då kan this i metoden användas för att referera till objektets egenskaper och metoder.
elem.addEventListener("händelse", () => myObject.myMethod() );

Om man i metoden också behöver en referens till elementet, skickar man med event-objektet. Då kan man i metoden använda currentTarget som referens till elementet
elem.addEventListener("händelse", (e) => myObject.myMethod(e) );

myMethod(e) {
    this är referens till objektet
    e.currentTarget är referens till elementet
}

Om man ska använda en metod som en parameter, där man anger en funktion som ska aktiveras senare, t.ex. i en händelselyssnare eller en timer, kan man inte endast skriva this.myMethod, eftersom this då kommer referera till fel objekt. Istället får man ange metoden i en anonym arrow function
setTimer( () => this.myMethod(), time);

Egna övningar

I denna övning ska du göra några tillägg i koden som du skapade i övningen i föregående exempel. Så börja med att kopiera din JavaScript-kod från föregående övning och lägg in den i test.js i denna övning. Gör sedan följande tillägg:

• I getShortForecast ska du på div-elementet lägga två händelselyssnare för händelserna mouseenter och mouseleave. De ska anropa funktionen showBothTemp respektive showHiTemp. Dessa funktioner ska vara metoder i samma class som getShortForecast och beskrivs i de följande punkterna.
• Funktionen showBothTemp ska inte ha några andra parametrar än event-objektet. Funktionen ska visa både lägsta och högsta temperaturen i prognosen (t.ex. 7°/14°) i det p-element där temperaturen visas. Har du följt instruktionerna i förra övningen, bör det vara det 2:a p-elementet inom div-elementet.
  • Utgå från div-elementet, så kan du i querySelector använda "p:nth-of-type(2)".
• Funktionen showHiTemp ska vara likadan som showBothTemp, med den skillnaden att nu ska endast högsta temperaturen visas (t.ex. 14°).

Då man pekar på en ruta med en prognos för en dag, kan det se ut på följande sätt.