Основи на работа с контекст в 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 не сочеше към този елемент, в който се е случило събитието, тогава ние нямаше да успеем - щеше да се наложи за всяко поле да създаваме собствена функция със същия код!