Comprendre la méthode call() et apprendre à l’utiliser

Vous allez apprendre à connaître la maîtriser en JavaScript la fonction call() et à l’utiliser plus efficacement.

Introduction à la méthode JavaScript call()

En JavaScript, une fonction est une instance du type Function. Par exemple :

function add(x, y) {
  return x + y;
}

console.log(add instanceof Function); // true

Le type Function.prototype possède la méthode call() avec la syntaxe suivante :

functionName.call(thisArg, arg1, arg2, ...);

Dans cette syntaxe, la méthode call() appelle une fonction functionName avec les arguments (arg1, arg2, …) et l’objet this défini sur l’objet thisArg à l’intérieur de la fonction.

• L’objet thisArg est l’objet auquel l’objet this fait référence dans la fonction functionName.
• Les arguments arg1, arg2, … sont les arguments de fonction passés dans la fonction functionName.
• La méthode call() renvoie le résultat de l’appel de la fonction functionName().

L’exemple suivant définit la fonction add() et l’appelle normalement :

function add(x, y) {
  return x + y;
}

let result = add(1, 0);
console.log(result); // 3

L’exemple suivant appelle la fonction add() mais utilise la méthode call() à la place :

function add(x, y) {
  return x + y;
}

let result = add.call(this, 1, 2);
console.log(result); // 3

Par défaut, l’objet this à l’intérieur de la fonction est défini comme l’objet global, c’est-à-dire window dans les navigateurs web et global dans Node.js.

Voyons plus en détail cet exemple :

var message = 'Hi';

var messenger = {
    message : 'Hello'
}

function say(nom) {
    console.log(this.message + ' ' + nom);
}

À l’intérieur de la fonction say(), nous faisons référence à la salutation via la valeur this. Si vous invoquez simplement la fonction say() via la méthode call() comme suit :

say.call(this,'John');

Il affichera la sortie suivante dans la console :

"Hi John"

Cependant, lorsque vous invoquez la méthode call() de l’objet fonction say et que vous passez l’objet messager comme valeur :

say.call(messenger,'John');

résultat

"Hello John"

Dans ce cas, la valeur this dans la fonction say() fait référence à l’objet messager, et non à l’objet global.