this-ის უპირატესობა JavaScript-ში

წინასგან ნათქვამიდან ჯერ კიდევ არ ირკვევა this-ის განსაკუთრებული უპირატესობა. ყოველივე ეს, ფუნქცია-ჰენდლერის შიგნით ჩვენი ელემენტი მაინც იქნება ხელმისაწვდომი - ბოლოს და ბოლოს, ცვლადი elem იქნება გლობალური ჩვენი ფუნქციისთვის func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// აქ ხელმისაწვდომია ცვლადი elem ჩვენი ელემენტით
}

და, ადვილი მისახვედრია, რომ this-ის შიგთავსი და ცვლადის elem შიგთავსი ჩვენს შემთხვევაში ტოლია:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // გამოიტანს true-ს
}

რა არის this-ის განსაკუთრებული უპირატესობა? ის ვლინდება მაშინ, როდესაც ჩვენ გვაქვს რამდენიმე ელემენტი, და თითოეულზე მიბმულია ერთი და იგივე ფუნქცია.

შევხედოთ მაგალითს. მოდით, გვქონდეს 3 ღილაკი:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

მივიღოთ მითითებები მათზე ცვლადებში:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

მივაბათ ამ ღილაკებს ერთი და იგივე ფუნქცია:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

ფუნქციის შიგნით კი გამოვიტანოთ this.value:

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

გამოვა, რომ გვაქვს სამი ღილაკი. ნებისმიერ ღილაკზე დაჭერა გამოიწვევს ფუნქცია func-ის გამოძახებას. ამ შემთხვევაში, ყოველ დაჭერაზე this შეიცავს მითითებას იმ ღილაკზე, რომელზეც მოხდა მოვლენა.

ანუ, ყოველი დაჭერა გამოიტანს კონსოლში value-ს იმ ღილაკისა, რომელზეც მოხდა დაჭერა, მაგრამ ამას აკეთებს ერთი და იგივე ფუნქცია func! ეს არის this-ის გამოყენების უპირატესობა.

მოცემულია 5 აბზაცი რაიმე ტექსტით. ნებისმიერ აბზაცზე დაწკაპუნებით ჩაწერეთ მისი ტექსტის ბოლოს ძახილის ნიშანი.

მოცემულია 3 ინფუთი, რომლებშიც ჩაწერილია რაიმე რიცხვი. ნებისმიერ ინფუთში ფოკუსის დაკარგვისას ახარისხეთ მასში მყოფი რიცხვი კვადრატში.