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

←→
↑
en ru