Основы работы с контекстом в JavaScript

Пусть у нас есть какая-то функция func, внутри которой используется this:

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

На что указывает this в этой функции? А мы не знаем. И JavaScript не знает. И сама функция не знает. To есть в момент создания функции то, на что именно указывает 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 не указывал на тот элемент, в котором произошло событие, то у нас бы такое не получилось - пришлось бы для каждого инпута создавать свою функцию с тем же кодом!