Maîtriser call(), apply() et bind() en JavaScript : contrôler cela

Comprendre les méthodes call(), apply() et bind() en JavaScript

En JavaScript, les méthodes call(), apply() et bind() sont utilisées pour contrôler le contexte (this) d'une fonction, qui détermine l'objet sur lequel la fonction opère. Ces méthodes vous permettent d'invoquer une fonction avec une valeur this spécifique et sont essentielles pour gérer la façon dont les fonctions interagissent avec les objets.

1. Méthode call()

La méthode call() vous permet d'invoquer une fonction avec une valeur this spécifique et des arguments individuels. C'est l'un des moyens de définir explicitement le contexte (this) lors de l'appel d'une fonction.

Syntaxe :

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

• thisArg : La valeur qui doit être utilisée comme ceci à l'intérieur de la fonction.
• arg1, arg2, ... : Les arguments transmis à la fonction.

Exemple d'appel() :

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

Dans cet exemple, nous utilisons call() pour invoquer la fonction greet avec this faisant référence à l'objet personne, donc le résultat est "Bonjour, Alice !".

Cas d'utilisation de call() :

• Invoquer une méthode avec un contexte différent : Vous pouvez utiliser call() pour emprunter des méthodes à un objet et les appliquer à un autre.

2. Méthode apply()

La méthode apply() est très similaire à call(), mais au lieu de transmettre des arguments individuellement, vous les transmettez sous forme de tableau ou d'objet de type tableau. Cette valeur est toujours définie sur l'objet spécifié.

Syntaxe :

functionName.apply(thisArg, [arg1, arg2, ...]);

• thisArg : La valeur qui doit être utilisée comme ceci à l'intérieur de la fonction.
• [arg1, arg2, ...] : Un tableau ou un objet de type tableau qui contient les arguments à transmettre à la fonction.

Exemple de apply() :

function sum(a, b) {
  console.log(this.name, a + b);
}

const person = { name: 'Bob' };

sum.apply(person, [5, 10]);  // Output: Bob 15

Dans cet exemple, apply() est utilisé pour transmettre un tableau d'arguments [5, 10] à la fonction somme, et cette valeur est définie sur l'objet personne, donc la sortie est "Bob 15".

Cas d'utilisation de apply() :

• Passer un tableau d'arguments : Si vous avez des arguments sous la forme d'un tableau et que vous souhaitez les transmettre à une fonction, utilisez apply().

3. Méthode bind()

La méthode bind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a son this défini sur la valeur fournie et vous permet de prédéfinir des arguments pour les appels futurs. Contrairement à call() et apply(), bind() n'invoque pas la fonction immédiatement. Au lieu de cela, il renvoie une nouvelle fonction que vous pourrez appeler plus tard.

Syntaxe :

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

• thisArg : La valeur à laquelle ceci doit être lié.
• arg1, arg2, ... : Les arguments à prédéfinir.

Exemple de bind() :

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

Ici, bind() crée une nouvelle fonction greetCharlie où celle-ci est définie en permanence sur l'objet personne. Lorsque greetCharlie() est invoqué, il affiche "Bonjour Charlie!".

Cas d'utilisation de bind() :

• Création d'une nouvelle fonction avec une valeur this fixe : bind() est utile lorsque vous devez créer une nouvelle fonction qui conserve une valeur this spécifique.

Différences entre call(), apply() et bind()

Fonctionnalité

Feature	call()	apply()	bind()
Execution	Immediately invokes the function	Immediately invokes the function	Returns a new function (does not execute immediately)
Arguments	Pass arguments individually	Pass arguments as an array or array-like object	Pass arguments individually or preset them
Return Value	Returns the result of the function call	Returns the result of the function call	Returns a new function
Use Case	Call a function with a specified this value and arguments	Call a function with a specified this value and an array of arguments	Create a new function with a preset this value and arguments

appel() appliquer() bind() ête> Exécution Invoque immédiatement la fonction Invoque immédiatement la fonction Renvoie une nouvelle fonction (ne s'exécute pas immédiatement) Arguments Transmettre les arguments individuellement Transmettre les arguments sous forme de tableau ou d'objet de type tableau Transmettez les arguments individuellement ou prédéfinissez-les Valeur de retour Renvoie le résultat de l'appel de fonction Renvoie le résultat de l'appel de fonction Renvoie une nouvelle fonction Cas d'utilisation Appeler une fonction avec une valeur et des arguments spécifiés Appeler une fonction avec une valeur this spécifiée et un tableau d'arguments Créer une nouvelle fonction avec une valeur prédéfinie et des arguments

Exemple : combinaison de call(), apply() et bind()

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

Conclusion

• call() et apply() sont utilisés pour appeler des fonctions immédiatement avec une valeur et des arguments spécifiés.
• bind() est utilisé pour créer une nouvelle fonction avec une valeur this spécifiée et éventuellement des arguments prédéfinis, sans l'invoquer immédiatement.
• call() est utile pour les arguments individuels, tandis que apply() est idéal pour transmettre un tableau d'arguments.
• bind() est utile pour créer une fonction qui peut être invoquée ultérieurement avec un contexte fixe (this).

Ces méthodes sont essentielles pour contrôler ce contexte et gérer les fonctions en JavaScript, notamment dans les cas d'emprunt de méthodes ou de mise en place de gestionnaires d'événements.

---

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!