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