Основи рада са контекстом у JavaScript-у

Нека имамо неку функцију func, унутар које се користи this:

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

На шта указује this у овој функцији? А ми не знамо. И JavaScript не зна. И сама функција не зна. То јест, у тренутку креирања функције није утврђено на шта тачно указује this. А утврдиће се тек када се та функција позове.

Нека имамо неки уносни поље (инпут):

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

Прикачимо на то уносни поље нашу функцију func тако да се изврши при губитку фокуса уносног поља. Сада у тренутку извршења функције this ће указивати на наш уносни поље:

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

elem.addEventListener('blur', func);
function func() {
  console.log(this.value); // при губитку фокуса исписаће 'text'
}

Али, можемо имати не само једно уносни поље, већ неколико:

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

И на свако од ових уносних поља можемо прикачити нашу функцију func. У том случају за први елемент this у тренутку позивања функције ће указивати на њега, а за други - на њега.

У пракси то значи да this унутар функције зависи од тога на ком од уносних поља смо изгубили фокус:

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

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

function func() {
  console.log(this.value); // исписаће или 'text1', или 'text2'
}

У принципу, таква особина this је веома згодна – креирамо само једну функцију и прикачујемо је на било који број уносних поља. Да this није указивао на онај елемент у којем се догодио догађај, то не би успело – морало би се за свако уносни поље креирати своја функција са истим кодом!