8.1 Méthode call
Les méthodes call, bind et apply en JavaScript jouent un rôle clé dans la gestion du contexte d'exécution des fonctions, permettant de définir la valeur de this lors de l'appel des fonctions. Ces méthodes sont particulièrement utiles lorsque l'on travaille avec des objets et de la programmation fonctionnelle, fournissant des outils puissants pour une gestion flexible du code. Jetons un coup d'œil à chacun d'eux plus en détail et examinons divers exemples de leur utilisation.
La méthode call appelle une fonction avec une valeur de this spécifiée et des arguments passés par virgule. Cela nous permet de spécifier explicitement le contexte dans lequel la fonction doit être exécutée.
Syntaxe:
func.call(thisArg, arg1, arg2 ...);
Exemple :
Dans cet exemple, la fonction greet est appelée avec le contexte person, ce qui lui permet d'utiliser la propriété name de l'objet person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 Méthode apply
La méthode apply est similaire à call, mais elle passe les arguments sous forme de tableau. Cela est pratique lorsque nous avons un tableau d'arguments que nous voulons passer à une fonction.
Syntaxe:
func.apply(thisArg, [argsArray]);
Exemple :
Cet exemple est similaire au précédent, mais les arguments sont passés sous forme de tableau.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 Méthode bind
La méthode bind crée une nouvelle fonction qui, lorsque appelée, fixe une valeur spécifique de this. Les arguments passés à bind sont figés dans la nouvelle fonction. Cela permet de créer des fonctions avec un contexte constant.
Syntaxe:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
Exemple :
Dans cet exemple, une nouvelle fonction boundGreet est créée, qui sera toujours exécutée dans le contexte de l'objet person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 Analyse détaillée de l'utilisation des méthodes
1. Utilisation de call pour l'héritage de méthodes :
La méthode call est souvent utilisée pour hériter des méthodes d'un objet par un autre. Cela permet d'emprunter des méthodes et des propriétés sans nécessiter un héritage explicite.
Dans cet exemple, le constructeur Product est appelé dans le contexte de l'objet Food, ce qui permet d'hériter des propriétés name et price.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. Utilisation de apply pour passer un tableau d'arguments :
La méthode apply est utile lorsque nous voulons passer un tableau d'arguments à une fonction qui prend des paramètres distincts.
Dans ce cas, le tableau numbers est passé à la fonction sum en tant qu'arguments distincts.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. Utilisation de bind pour créer une fonction avec un contexte figé :
La méthode bind permet de créer des fonctions avec un contexte constant, ce qui est particulièrement utile lors de la gestion d'événements et de callbacks.
Ici, la fonction getX est associée à l'objet module à l'aide de bind, permettant d'obtenir correctement la valeur de x lors de l'appel de la fonction.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 Exemples de la vie réelle
Exemple d'utilisation de call pour emprunter une méthode de tableau :
Dans cet exemple, la méthode forEach du tableau est utilisée pour l'objet arguments en utilisant call.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
Exemple d'utilisation de apply pour fusionner des tableaux :
Ici, la méthode push est utilisée pour fusionner deux tableaux à l'aide de apply.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
Exemple d'utilisation de bind pour créer une fonction partielle :
La fonction double est créée avec un premier argument figé à 2 à l'aide de bind.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION