Liaison de contexte via la méthode bind en JavaScript

La méthode suivante bind permet de lier le contexte à une fonction de façon permanente. Cette méthode retourne une nouvelle fonction, dans laquelle this aura une valeur rigidement définie.

Regardons un exemple.

Supposons que nous ayons un input :

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

Supposons que la référence à cet input soit stockée dans la variable elem :

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

Supposons que nous ayons également la fonction suivante func :

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

Utilisons bind pour créer une nouvelle fonction, qui sera une copie de la fonction func, mais this y sera toujours égal à elem :

let newFunc = func.bind(elem);

Maintenant, la variable newFunc contient une fonction. Appelons-la, en passant '1' comme premier paramètre et '2' comme deuxième (je rappelle que elem contient l'input avec value égal à 'text') :

newFunc('1', '2');

Rassemblons le tout :

let elem = document.getElementById('elem');

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // affichera 'text12'

Il n'est pas nécessaire de stocker le résultat de bind dans une nouvelle fonction newFunc, on peut simplement écraser func. Après cela, func sera la même fonction qu'avant, mais avec un this rigidement lié :

func = func.bind(elem);

Soit le code suivant :

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

let elem = document.getElementById('elem');

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// écrivez ici la construction avec bind()

func('John', 'Smit'); // doit afficher 'hello, John Smit'
func('Eric', 'Luis'); // doit afficher 'hello, Eric Luis'

Écrivez à l'endroit indiqué la construction avec la méthode bind de sorte que this à l'intérieur de la fonction func pointe toujours vers l'input de la variable elem.