La méthode call() réalise un appel à une fonction avec une valeur this donnée et des arguments fournis individuellement.

Note : Bien que la syntaxe de cette fonction ressemble à celle de apply(), la différence fondamentale réside dans le fait que call() accepte une liste d'arguments, tandis que la méthode apply() accepte un unique tableau d'arguments.

Syntaxe

fun.call(thisArg[, arg1[, arg2[, ...]]])

Paramètres

thisArg
La valeur this fournie pour l'appel de la fonction fun. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en mode non-strict, null and undefined seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.
arg1, arg2, ...
Les arguments pour la fonction.

Valeur de retour

Le résultat de l'appel de la fonction invoquée avec la valeur this indiquée et les arguments fournis.

Description

La méthode call() permet d'appeler une fonction rattachée à un objet donné sur un autre objet.

Il est possible d'affecter un objet this différent lors de l'appel à une fonction existante. En général, this fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec call, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.

Exemples

Utiliser call() pour chaîner le constructeur d'un objet.

Il est possible d'utiliser call pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet Product est défini avec deux paramètres, name et price. Deux autres fonctions, Food et Toy invoquent Product en passant this, name et price. Product initialise les propriétés name et price, tandis que les fonctions spécialisées définissent la propriété category.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

Utiliser call() pour invoquer une fonction anonyme

Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise call pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction print sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur this n'était pas nécessaire, mais il permet d'expliquer le sujet.

var animaux = [
  {espece: 'Lion', nom: 'Roi'},
  {espece: 'Éléphant', nom: 'Dumbo'}
];

for (var i = 0; i < animaux.length; i++) {
  (function (i) { 
    this.print = function () { 
      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom); 
    } 
    this.print();
  }).call(animaux[i], i);
}

Utiliser call() pour appeler une fonction avec un objet pour this

Dans l'exemple qui suit, on utilise la méthode call() sur la fonction saluer() afin de l'appliquer à l'objet personne1 :

function saluer() {
  var reponse = [this.nom, "est un", this.role, "."].join(" ");
  console.log(reponse);
}

var personne1 = {
  nom: "Sénèque",
  role: "philosophe"
};

saluer.call(personne1); // Sénèque est un philosophe.

Utiliser call() pour appeler une fonction sans indiquer de premier argument

Dans l'exemple qui suit, on appelle la fonction afficher() sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :

var prenom = 'Archibald';

function afficher() {
  console.log('prenom vaut ' + this.prenom);
}

afficher.call(); // prenom est Archibald

Note : La valeur de this sera undefined en mode strict.

'use strict';

var prenom = 'Archibald';

function afficher() {
  console.log('prenom vaut ' + this.prenom);
}

afficher.call(); // Cannot read the property prenom' of undefined

Spécifications

Spécification État Commentaires
ECMAScript 3rd Edition (ECMA-262) Standard Définition initiale. Implémentée avec JavaScript 1.3.
ECMAScript 5.1 (ECMA-262)
La définition de 'Function.prototype.call' dans cette spécification.
Standard  
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Function.prototype.call' dans cette spécification.
Standard  
ECMAScript Latest Draft (ECMA-262)
La définition de 'Function.prototype.call' dans cette spécification.
Projet  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Ouinodejs Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, opii93, ksahin, Yopai, hu9o, darul75, teoli, peb85
Dernière mise à jour par : SphinxKnight,