JavaScript-de this-iň üstünligi

Öň aýdylanlardan this-iň aýratyn üstünligi heniz anyk däl. Sebäbi, işleýji funksiýanyň içinde bize element elýeterli bolar – sebäbi elem üýtgeýjisi biziň func funksiýamyz üçin global bolar:

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

function func() {
	// bu ýerde bize element bilen elem üýtgeýjisi elýeterli
}

We, this-iň mazmunyny we elem üýtgeýjisiniň mazmunyny biziň ýagdaýymyzda deňdigini ýada salmak kyn däl:

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

function func() {
	console.log(elem === this); // true çykarar
}

this-iň aýratyn üstünligi nämede? Ol bize birnäçe elementimiz bar bolsa we her biri bir funksiýa bilen baglanyşykly bolsa görkezilýär.

Mysalda göreli. Bizde 3 düwme bolsun:

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

Olara çykgytlary üýtgeýjilere alalyň:

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

Bu düwmeleri bir funksiýa bilen baglalyň:

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

Funksiýanyň içinde bolsa this.value çykaryp görkezeris:

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

Netijede, biziň üç düwmämiz bar. Her düwmä basmak func funksiýasynyň çagyrylmagyna getirer. Bu ýagdaýda her basylyşda this, waka bolan düwme üçin çykgydy saklar.

Ýagny her basylyş konsola basylan düwmeniň value-syny çykarar, ýöne muny bir funksiýa func eder! this ulanmagyň üstünligi şonda.

Belli bir tekster bilen 5 abzas berlen. Islendik abzasa basylanyňda, onuň tekstiňiň ahyryna sora belgisini ýazyň.

Belli bir sanlar ýazylan 3 input berlen. Islendik inputda fokus ýitirilende, onda duran sany kwadrata göteriň.