La méthode call() réalise un appel à une fonction avec une valeur this et les arguments fournis individuellement.
apply(), la différence fondamentale réside dans le fait que call() accepte une liste d'arguments, tandis que la méthde apply() accepte un unique tableau d'arguments.Syntaxe
fun.call(thisArg[, arg1[, arg2[, ...]]])
Paramètres
thisArg- La valeur
thisfournie pour l'appel de la fonctionfun. 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,nullandundefinedseront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets. arg1, arg2, ...- Les arguments pour l'objet.
Valeur de retour
Le résultat de l'appel de la fonction invoquée avec la valeur this et les arguments fournis.
Description
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é 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;
if (price < 0)
throw RangeError('Impossible de créer "' + name + '" avec un prix négatif');
return this;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
Food.prototype = Object.create(Product.prototype);
Food.prototype.constructor = Food;
// On réinitialise le constructeur qui passe de Product à Food
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
Toy.prototype = Object.create(Product.prototype);
Toy.prototype.constructor = Toy;
// On réinitialise le constructeur qui passe de Product à 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.
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 2017 Draft (ECMA-262) La définition de 'Function.prototype.call' dans cette spécification. |
Projet |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |