JavaScript-da kontekst bilen işlemegiň esaslary

Bizde içinde this ulanylýan func funksiýamyz bar bolsun:

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

Bu funksiýada this näme görkezýär? Biz bilmeýäris. We JavaScript hem bilmeýär. We funksiýanyň özi hem bilmeýär. Ýagny, funksiýa döredilýän wagtynda this-iň haýsy niräni görkezjekdigi kesgitlenmedik. Bu diňe şol funksiýa çagyrylan wagtynda kesgitlenýär.

Bizde bir input elementimiz bar bolsun:

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

Bu inputa func funksiýamyzy şeýle baglalyň, input fokusy ýitireninde ýerine ýetirilsin. Indi funksiýa ýerine ýetirilýän wagtynda this biziň inputymyzy görkezer:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // fokusy ýitirende 'text' çykar
}

Emma, bir input däl-de, birnäçe input bolup bilýär:

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

We bu inputlaryň her birine func funksiýamyzy baglap bileris. Bu ýagdaýda birinji element üçin funksiýa çagyrylan wagtynda this ona görkezer, ikinji element üçin bolsa şoňa görkezer.

Amalyýetda bu şuny aňladýar, funksiýanyň içindäki this haysy inputdan fokus ýitireniňizden baglydyr:

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

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

function func() {
	console.log(this.value); // ýa 'text1', ýa-da 'text2' çykar
}

Umuman, this-iň bu aýratynlygy ýigrän amatly - biz diňe bir funksiýa döredýäris we ony näçe inputa bolsa-da baglap bileris. Eger this ýagdaý bolýan elemente görkezmesedi, onda bu başardyk bolmazdy - her bir input üçin öz funksiýamyzy şol kod bilen döretmeli bolardy!