Grunderna i att arbeta med kontext i JavaScript

Låt oss säga att vi har en funktion func, inuti vilken this används:

function func() {
	console.log(this.value);
}

Vad pekar this på i denna funktion? Det vet vi inte. Och JavaScript vet inte. Och själva funktionen vet inte. Det betyder att i ögonblicket när funktionen skapas är det inte bestämt vad exakt this pekar på. Och det bestäms först när denna funktion anropas.

Låt oss säga att vi har ett inputfält:

<input id="elem" value="text">

Låt oss binda vår funktion func till detta inputfält så att den körs när inputfältet förlorar fokus. Nu, vid tidpunkten för funktionens exekvering, kommer this att peka på vårt inputfält:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // kommer att skriva ut 'text' vid förlust av fokus
}

Men vi kan ju ha inte ett inputfält, utan flera:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Och till vart och ett av dessa inputfält kan vi binda vår funktion func. I detta fall kommer this för det första elementet vid tidpunkten för funktionsanropet att peka på det, och för det andra - på det.

I praktiken betyder det att this inuti funktionen beror på vilket av inputfälten som förlorat fokus:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // kommer att skriva ut antingen 'text1' eller 'text2'
}

I allmänhet är denna egenskap hos this mycket bekväm - vi skapar bara en funktion och binder den till valfritt antal inputfält. Om this inte pekade på det element där händelsen inträffade, skulle vi inte kunna göra så - vi skulle vara tvungna att för varje inputfält skapa vår egen funktion med samma kod!