Méthodes apply vs call en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Méthodes apply vs call en JavaScript
Muhammad Muzammil Hussain 12 octobre 2023
JavaScript JavaScript Method JavaScript Apply JavaScript Call
  1. La méthode call() en JavaScript
  2. La méthode apply() en JavaScript
  3. l’exemple de méthode call() en JavaScript
  4. Méthode alternative en utilisant la méthode apply()
Méthodes apply vs call en JavaScript

Cet article explique comment utiliser les méthodes call() et apply() en JavaScript. La différence entre les deux fonctions est expliquée à l’aide de quelques exemples simples.

Jetons un coup d’œil aux méthodes suivantes et à leur fonctionnement.

La méthode call() en JavaScript

Prendre l’objet propriétaire comme argument est la méthode call(). Le mot-clé this fait référence au propriétaire de la fonction ou de l’objet auquel elle appartient.

Nous pouvons également appeler une méthode pour l’utiliser sur différents objets. Cela nous permettra d’invoquer les méthodes avec des arguments séparés par des virgules.

Syntaxe de la méthode call() en JavaScript

abc_object.object_method.call(object_instance, arguments, ...)

Comme mentionné ci-dessus, la méthode call() accepte deux paramètres, que nous décrirons ci-dessous.

  • Dans le premier paramètre, object_instance contiendra l’instance d’un objet.
  • Les arguments séparés par des virgules sont dans le deuxième paramètre.

La méthode apply() en JavaScript

apply() est utilisé pour écrire sur un objet différent. Il prend les valeurs sous la forme d’un tableau.

Syntaxe de la méthode apply() en JavaScript

abc_object.object_method.apply(object_instance, [arguments_array...])

La méthode apply() accepte deux paramètres comme indiqué ci-dessus.

  • Dans le premier paramètre, object_instance contiendra l’instance d’un objet.
  • Dans le deuxième paramètre, les arguments sont sous la forme d’un tableau.

l’exemple de méthode call() en JavaScript

Nous allons créer un bouton simple, Click to display, qui déclenchera une fonction sur l’événement de clic.

La fonction utilisera la méthode call() et nous afficherons un résultat de texte combiné en utilisant des objets contenant plusieurs valeurs de chaîne en tant que paires clé-valeur. Il combinera simplement les chaînes de l’objet donné en passant un paramètre à l’aide de la méthode call().

Le résultat sera affiché sous forme de paragraphe.

<!DOCTYPE html>  
<html>
    <head>
        <title>
call() method Example
</title>
    </head>
    <body style = "text-align:center;">
        <h1 >  
            Click on "Click to display" for display combined Text using call()
        </h1>
        <button onClick="fun()">
          Click to display
        </button>  
        <p id="mypara"></p>  
        <!-- Script tags to use call() method to call
            function -->
        <script>
            function fun() {
              let object_b = {
                combinedText: function(text1, text2) {
                  return this.firstName + " " + this.lastName 
                        + " " + text1 + " " + text2;
                }
              }   
              let object_a = {
                firstName:"DelftStack",
                lastName: "Technology",
              }
              let x = object_b.combinedText.call(object_a, "is", "Best"); 
              document.getElementById("mypara").innerHTML = x;
              }
        </script> 
    </body>
</html>

Dans la page source HTML ci-dessus, vous pouvez voir un simple bouton Click to display qui appelle la fonction fun().

Dans le corps fun() est initialisé avec une autre méthode combinedText dans object_b. Il renvoie une chaîne concaténée de paramètres passés.

Un autre objet initialisé object_a qui contient plusieurs chaînes comme valeur-clé en utilisant les paramètres call() (object_a,"is","best"). Les deux se concatènent dans la chaîne et renvoient le résultat.

Le résultat est affiché par le getElementById().

Méthode alternative en utilisant la méthode apply()

Les mêmes résultats sont réalisables par la méthode apply(). Vous pouvez utiliser la méthode apply() en passant un tableau d’arguments au lieu d’arguments séparés par des virgules object_b.combinedText.apply(object_a, ["is", "Best"]).

<script>
    function fun() {
        let p = {
        combinedText: function(text1, text2) {
            return this.firstName + " " + this.lastName 
                    + ", " + text1 + ", " + text2;
        }
    }
    let object_a = {
        firstName:"DelftStack",
        lastName: "Technology",
    }
        let x = p.combinedText.apply(object_a, ["Is", "Best"]); 
        document.getElementById("mypara").innerHTML = x;
    }
</script>

Dans l’exemple ci-dessus, la méthode x = object_b.combinedText.apply() est utilisée avec les paramètres (object_a,[array_arguments]).

Dans l’étape suivante, nous devons ajouter la variable de résultat dans l’identifiant de paragraphe mypara pour afficher la valeur sur la page HTML.

Article connexe - JavaScript Method