Podstawy pracy z kontekstem w JavaScript

Załóżmy, że mamy jakąś funkcję func, wewnątrz której używane jest this:

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

Na co wskazuje this w tej funkcji? A my nie wiemy. I JavaScript nie wie. I sama funkcja nie wie. Oznacza to, że w momencie tworzenia funkcji to, na co dokładnie wskazuje this, nie jest określone. I określi się to dopiero wtedy, gdy ta funkcja zostanie wywołana.

Załóżmy, że mamy jakieś pole input:

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

Przypiszmy do tego pola input naszą funkcję func tak, aby wykonała się po utracie fokusu przez pole input. Teraz w momencie wykonania funkcji this będzie wskazywać na nasze pole input:

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

elem.addEventListener('blur', func);
function func() {
  console.log(this.value); // po utracie fokusu wypisze 'text'
}

Ale przecież możemy mieć nie jedno pole input, a kilka:

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

I do każdego z tych pól input możemy przypisać naszą funkcję func. W tym przypadku dla pierwszego elementu this w momencie wywołania funkcji będzie wskazywać na niego, a dla drugiego - na niego.

W praktyce oznacza to, że this wewnątrz funkcji zależy od tego, na którym z pól input straciliśmy fokus:

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

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

function func() {
  console.log(this.value); // wypisze albo 'text1', albo 'text2'
}

Ogólnie rzecz biorąc, taka cecha this jest bardzo wygodna - tworzymy tylko jedną funkcję i przypisujemy ją do dowolnej liczby pól input. Gdyby this nie wskazywał na ten element, w którym zdarzenie miało miejsce, to u nas by się to nie udało - musielibyśmy dla każdego pola input tworzyć własną funkcję z tym samym kodem!