JavaScript-də this-in üstünlüyü

Əvvəllər deyilənlərdən hələ ki, this-in xüsusi üstünlüyü aydın deyil. Axı hadisə işləyicisi funksiyasının daxilində bizim elementə çıxış yolu olacaq - axı elem dəyişəni bizim func funksiyamız üçün qlobal olacaq:

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

function func() {
	// burada bizim element olan elem dəyişəninə çıxış var
}

Və, this-in məzmunu ilə elem dəyişəninin məzmununun bizim halda bərabər olduğunu təxmin etmək çətin deyil:

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

function func() {
	console.log(elem === this); // true çap edəcək
}

Bəs this-in xüsusi üstünlüyü nədədir? O, bizim bir neçə elementimiz olduqda və hər birinə eyni funksiya bağlandıqda özünü göstərir.

Nümunəyə baxaq. Tutaq ki, bizim 3 düyməmiz var:

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

Onlara istinadları dəyişənlərə əldə edək:

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

Bu düymələrə eyni funksiyanı bağlayaq:

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

Funksiya daxilində isə this.value çap edək:

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

Beləliklə, bizim üç düyməmiz var. Hər bir düyməyə klikləmək func funksiyasının çağırılmasına səbəb olacaq. Eyni zamanda, hər klikdə this hadisənin baş verdiyi düyməyə istinad ehtiva edəcək.

Yəni hər klik konsola kliklənmənin baş verdiyi düymənin value dəyərini çap edəcək, amma bunu eyni func funksiyası edəcək! this-dən istifadənin üstünlüyü də budur.

5 abzas və içlərində bəzi mətnlər verilmişdir. Hər hansı bir abzasa kliklədikdə, onun mətninin sonuna nida işarəsi əlavə edin.

3 input verilmişdir, içlərində bəzi rəqəmlər yazılmışdır. Hər hansı bir inputda fokus itirildikdə, onun içindəki ədədi kvadrata yüksəldin.