Liaison de contexte via la méthode call en JavaScript

Ainsi, nous avons vu comment fonctionne réellement this. Examinons maintenant les méthodes qui permettent d'indiquer de manière forcée dans quel contexte une fonction est appelée (c'est-à-dire de dire forcément à quoi est égal this).

La première méthode que nous allons voir s'appelle call. Regardons son fonctionnement sur un exemple. Supposons que nous ayons un input :

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

Récupérons la référence à cet input et enregistrons-la dans une variable elem :

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

Créons maintenant une fonction func, à l'intérieur de laquelle nous afficherons this.value :

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

Pour l'instant, notre fonction ne sait pas à quoi se réfère this. Si nous l'avions liée via addEventListener, alors oui. Mais nous ne ferons pas cela. À la place, nous allons simplement appeler notre fonction, en lui disant que this doit être égal à elem.

Cela se fait comme ceci : func.call(elem). Ce code est équivalent à un simple appel de fonction func comme ceci : func(), seulement avec la condition que this est égal à elem.

Ainsi, la syntaxe de la méthode call est la suivante : fonction.call(objet). Rassemblons tout ensemble :

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

function func() {
	console.log(this.value); // affichera la value de l'input
}
func.call(elem);

Une fonction est donnée :

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

Trois inputs sont donnés :

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

À l'aide de la méthode call et de la fonction func affichez à l'écran la value de chacun des inputs.