JavaScript-ի this օբյեկտը

Այժմ մենք կաշխատենք this հատուկ օբյեկտի հետ, որ հասանելի է իրադարձության մշակիչ ֆունկցիայում։ Այս օբյեկտը ցույց է տալիս տարրը, որում տեղի է ունեցել իրադարձությունը։

this օբյեկտը հարմար է, երբ այն տարրը, որում տեղի է ունեցել իրադարձությունը, և այն տարրը, որի հետ գործողություններ են կատարվում իրադարձության արդյունքում, նույն տարրն են։

Օրինակ, եթե ունենք input, մենք կարող ենք դրան կապել ֆոկուսը կորցնելու մշակիչ և այդ իրադարձության առաջացման դեպքում ինչ-որ բան անել input-ի տեքստի հետ։ Եկեք կատարենք նկարագրվածը։ Ենթադրենք ունենք input։

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

Եկեք ստանանք հղում դրան elem փոփոխականում։

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

Կապենք դրան ֆունկցիա-մշակիչ, որ կպատասխանի blur իրադարձությանը։

elem.addEventListener('blur', func);

Այս func ֆունկցիայի ներսում հասանելի կլինի this օբյեկտը, որ ցույց է տալիս մեր input-ին։

function func() {
	console.log(this); // պարունակում է հղում դեպի մեր տարրը
}

Եկեք արտածենք մեր input-ի value ատրիբուտի պարունակությունը։

function func() {
	console.log(this.value); // կարտածի ատրիբուտի պարունակությունը
}

Իսկ այժմ input-ի մեջ գրենք ինչ-որ տեքստ։

function func() {
	this.value = '!!!';
}

Կարելի է օգտագործել նաև անանուն ֆունկցիա։

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Տրված է input։ Այս input-ի կողմից ֆոկուսը ստանալու դեպքում գրեք դրա մեջ 1 թիվը, իսկ ֆոկուսը կորցնելու դեպքում՝ 2 թիվը։ Input-ին դիմելու համար ֆունկցիա-մշակիչի ներսում օգտագործեք this օբյեկտը։

Տրված է կոճակ, որի արժեքը 1 թիվն է։ Կատարեք այնպես, որ այս կոճակի վրա կտտացնելու դեպքում նրա արժեքը ամեն անգամ մեկով աճի։