тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

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

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

На что указывает this в этой функции? А мы не знаем. И JavaScript не знает. И сама функция не знает. То есть в момент создания функции то, на что именно указывает this, не определено. И определится это только тогда, когда эта функция будет вызвана.

Пусть у нас есть какой-то инпут:

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

Привяжем к этому инпуту нашу функцию func так, чтобы она выполнилась по потери фокуса инпутом. Теперь в момент выполнения функции this будет указывать на наш инпут:

let elem = document.querySelector('#elem'); elem.addEventListener('blur', func); function func() { console.log(this.value); // по потери фокуса выведет 'text' }

Но ведь у нас может быть не один инпут, а несколько:

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

И к каждому из этих инпутов мы можем привязать нашу функцию func. В этом случае для первого элемента this в момент вызова функции будет указывать на него, а для второго - на него.

На практике это значит, что this внутри функции зависит от того, на каком из инпутов мы потеряли фокус:

let 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 не указывал на тот элемент, в котором произошло событие, то у нас бы такое не получилось - пришлось бы для каждого инпута создавать свою функцию с тем же кодом!