Bases du travail avec le contexte en JavaScript

Supposons que nous ayons une fonction func, à l'intérieur de laquelle this est utilisé :

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

Sur quoi pointe this dans cette fonction ? Et nous ne le savons pas. Et JavaScript ne le sait pas. Et la fonction elle-même ne le sait pas. C'est-à-dire qu'au moment de la création de la fonction, ce sur quoi pointe this n'est pas déterminé. Et cela ne sera déterminé que lorsque cette fonction sera appelée.

Supposons que nous ayons un champ de saisie :

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

Attachons à ce champ de saisie notre fonction func de sorte qu'elle s'exécute lors de la perte de focus du champ. Maintenant, au moment de l'exécution de la fonction, this pointera vers notre champ de saisie :

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // lors de la perte de focus, affichera 'text'
}

Mais nous pourrions avoir non pas un seul champ de saisie, mais plusieurs :

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Et nous pouvons attacher notre fonction func à chacun de ces champs de saisie. Dans ce cas, pour le premier élément, this au moment de l'appel de la fonction pointera vers lui, et pour le second - vers lui.

En pratique, cela signifie que this à l'intérieur de la fonction dépend du champ de saisie sur lequel nous avons perdu le focus :

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // affichera soit 'text1', soit 'text2'
}

En général, cette particularité de this est très pratique - nous créons une seule fonction et l'attachons à n'importe quel nombre de champs de saisie. Si this ne pointait pas vers l'élément dans lequel l'événement s'est produit, alors nous ne pourrions pas faire cela - il faudrait créer pour chaque champ de saisie sa propre fonction avec le même code !