Darba pamati ar kontekstu JavaScript

Pieņemsim, ka mums ir kāda funkcija func, kurās iekšā tiek izmantots this:

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

Uz ko norāda this šajā funkcijā? Mēs nezinām. Un JavaScript nezinām. Un pati funkcija nezinām. Tas ir, funkcijas izveides brīdī tas, uz ko tieši norāda this, nav noteikts. Un noteikts tas būs tikai tad, kad šī funkcija tiks izsaukta.

Pieņemsim, ka mums ir kāds input lauks:

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

Piesaistīsim šim input laukam mūsu funkciju func tā, lai tā izpildītos, kad input zaudē fokusu. Tagad funkcijas izpildes brīdī this norādīs uz mūsu input lauku:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // pēc fokusa zaudēšanas izvadīs 'text'
}

Bet mums var būt nevis viens input lauks, bet vairāki:

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

Un uz katru no šiem input laukiem mēs varam piesaistīt mūsu funkciju func. Šajā gadījumā pirmajam elementam this funkcijas izsaukšanas brīdī norādīs uz to, bet otrajam - uz to.

Prakse tas nozīmē, ka this iekšā funkcijā ir atkarīgs no tā, uz kura no input laukiem mēs zaudējām fokusu:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // izvadīs vai nu 'text1', vai 'text2'
}

Kopumā, šāda this īpatnība ir ļoti ērta - mēs veidojam tikai vienu funkciju un piesaistām to jebkuram skaitam input lauku. Ja this nenorādītu uz to elementu, kurā notika notikums, tad mums tas neizdotos - būtu jāveido katrai input laukam sava funkcija ar to pašu kodu!