L'avantage de this en JavaScript

Sur la base de ce qui a été dit précédemment, l'avantage particulier de this n'est pas encore évident. Après tout, à l'intérieur de la fonction de rappel, notre élément sera accessible de toute façon - car la variable elem sera globale pour notre fonction func :

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

function func() {
	// ici, la variable elem avec notre élément est accessible
}

Et, il est facile de comprendre que le contenu de this et le contenu de la variable elem dans notre cas sont égaux :

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

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

Quel est donc l'avantage particulier de this ? Il se manifeste lorsque nous avons plusieurs éléments, et que la même fonction est attachée à chacun d'eux.

Regardons un exemple. Supposons que nous ayons 3 boutons :

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

Obtenons leurs références dans des variables :

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

Attachons la même fonction à ces boutons :

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

Et à l'intérieur de la fonction, affichons this.value :

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

Le résultat est que nous avons trois boutons. Un clic sur chaque bouton entraînera l'appel de la fonction func. En même temps, à chaque clic, this contiendra une référence au bouton sur lequel l'événement s'est produit.

C'est-à-dire que chaque clic affichera dans la console le value du bouton sur lequel le clic a eu lieu, mais ce sera fait par la même fonction func ! C'est en cela que réside l'avantage de l'utilisation de this.

Il y a 5 paragraphes avec des textes. Lorsqu'on clique sur n'importe quel paragraphe, ajoutez un point d'exclamation à la fin de son texte.

Il y a 3 champs de saisie, dans lesquels sont écrits des nombres. Lors de la perte du focus dans n'importe lequel des champs, élevez le nombre qu'il contient au carré.