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-ը չցույց տար այն էլեմենտի վրա, որում տեղի է ունեցել իրադարձությունը, ապա մենք դա չէինք կարողանա անել. ստիպված կլինեինք յուրաքանչյուր ինպուտի համար ստեղծել մեր սեփական ֆունկցիան նույն կոդով: