Ma?triser call , apply et bind en JavaScript: un guide complet

Cet article explore les nuances de call , apply et bind en JavaScript, en se concentrant sur leur utilisation pour contr?ler la valeur de this .

Comment utiliser call , apply et bind pour contr?ler la valeur de "ce" en javascript?

Dans JavaScript, this mot-clé fait référence à l'objet qui possède la fonction en cours d'exécution. Cependant, la valeur de this peut être imprévisible, en particulier dans les fonctions passées comme rappels ou utilisées dans les gestionnaires d'événements. call , apply et bind à fournir un moyen de définir explicitement la valeur de this , vous donnant un contr?le précis sur le contexte de vos fonctions.

• call() : Cette méthode invoque immédiatement une fonction, définissant la valeur de this au premier argument qui lui est transmis. Les arguments ultérieurs sont adoptés sous forme d'arguments individuels à la fonction.

 <code class="javascript">function greet(greeting) { console.log(greeting ", " this.name); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, Alice</code>

• apply() : similaire à call() , apply() invoque également une fonction immédiatement et définit la valeur de this . Cependant, au lieu d'arguments individuels, il accepte un tableau (ou un objet de type tableau) d'arguments.

 <code class="javascript">function sum(a, b) { return ab this.value; } const obj = { value: 10 }; const numbers = [5, 3]; const result = sum.apply(obj, numbers); // Output: 18</code>

• bind() : Contrairement à call() et apply() , bind() n'invoque pas immédiatement la fonction. Au lieu de cela, il crée une nouvelle fonction qui, lorsqu'elle est appelée, aura this valeur définie sur la valeur fournie. Ceci est utile pour créer des fonctions partiellement appliquées ou pour garantir cohérente this valeurs dans les rappels.

 <code class="javascript">function sayHello() { console.log("Hello, " this.name); } const person = { name: "Bob" }; const boundSayHello = sayHello.bind(person); boundSayHello(); // Output: Hello, Bob</code>

Quelles sont les différences pratiques entre call , apply et bind en JavaScript?

La différence clé réside lorsqu'ils exécutent la fonction et comment ils gèrent les arguments:

• call() et apply() : ces méthodes exécutent immédiatement la fonction. call() prend des arguments individuels, tandis que apply() prend un éventail d'arguments. Choisissez call() pour un petit nombre fixe d'arguments et apply() lorsque vous avez un tableau ou un nombre variable d'arguments.
• bind() : Cette méthode renvoie une nouvelle fonction qui, lorsqu'elle est appelée plus tard, aura this à la valeur spécifiée. Il n'exécute pas la fonction immédiatement. Utilisez bind() Lorsque vous devez prédéfinir this contexte pour exécution ultérieure, comme avec les rappels ou les gestionnaires d'événements.

Comment puis-je utiliser call , apply et bind pour résoudre les problèmes communs "de mots clés" en JavaScript?

Des problèmes "ces" courants surviennent dans les rappels (par exemple, setTimeout , addEventListener ) et les méthodes ont été adoptées comme arguments à d'autres fonctions. call , apply et bind les solutions d'offre:

• Rappels: Dans les rappels, this fait souvent référence à l'objet global (fenêtre dans les navigateurs ou non défini en mode strict). bind() est idéal ici:

 <code class="javascript">const myObject = { name: "Charlie", logName: function() { console.log(this.name); } }; setTimeout(myObject.logName.bind(myObject), 1000); // Ensures 'this' refers to myObject</code>

• Méthodes passées comme arguments: lors du passage d'une méthode comme argument à une autre fonction, le contexte de this pourrait changer. call() ou apply() peut maintenir le bon contexte:

 <code class="javascript">function processData(callback) { const data = { value: 20 }; callback.call(data, data.value); //Ensures this refers to the data object } function myCallback(val){ console.log("Value is: " val " and this.value is: " this.value); } processData(myCallback); // Output: Value is: 20 and this.value is: 20</code>

Quand dois-je choisir call , apply ou bind pour manipuler le contexte d'une fonction JavaScript?

Le choix dépend de la situation spécifique:

• Exécution immédiate avec des arguments individuels: utilisez call() .
• Exécution immédiate avec un tableau d'arguments: Utiliser apply() .
• Exécution retardée, prédéfini this : utilisez bind() .

En comprenant ces différences et en les appliquant de manière appropriée, vous pouvez gérer efficacement this contexte dans votre code JavaScript, en évitant un comportement inattendu et en écrivant des fonctions plus robustes et maintenables.

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!