Maison  >  Article  >  interface Web  >  La différence entre Function.prototype.apply et Function.prototype.call en JavaScript

La différence entre Function.prototype.apply et Function.prototype.call en JavaScript

WBOY
WBOYavant
2023-08-24 13:05:021489parcourir

JavaScript 中 Function.prototype.apply 和 Function.prototype.call 的区别

Function.prototype.apply ​​​​et Function.prototype.call sont des méthodes qui vous permettent d'appeler une fonction avec une valeur et des paramètres spécifiques. La principale différence entre les deux est que apply vous permet de transmettre un tableau de paramètres, tandis que call vous oblige à lister les paramètres un par un.

Function.prototype.apply

​​>

Function .prototype.apply est une méthode qui vous permet d'appeler une fonction avec un tableau de valeurs et d'arguments spécifique.

Syntaxe

La syntaxe d'utilisation de apply est -

func.apply(thisArg, argsArray)

Ici thisArg est la valeur qui sera utilisée comme this à l'intérieur de la fonction. argsArray est le tableau d'arguments qui sera transmis à la fonction.

Exemple

Voici un exemple d'appel d'une fonction en utilisant apply -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function sayHello(name) {
         return "Hello, " + name + "!";
      }
      document.getElementById("result").innerHTML = sayHello.apply(null, ["John"])
   </script>
</body>
</html>

Output

Le code ci-dessus imprimera la sortie ci-dessous.

Hello, John!

Comme vous pouvez le voir, nous avons passé null pour thisArg car nous ne voulons pas définir cette valeur. Nous avons passé un tableau pour argsArray contenant le paramètre "John". Le résultat est un appel à la fonction sayHello avec "John" comme paramètre de nom.

Function.prototype.call

Function.prototype.call est une fonction qui vous permet d'appeler une méthode avec une liste de valeurs et de paramètres spécifique.

Syntaxe

La syntaxe d'utilisation de call est

func.call(thisArg, arg1, arg2, ...)

thisArg est la valeur qui sera utilisée comme this dans la fonction. arg1, arg2, ... sont les arguments qui seront passés à la fonction.

Exemple

Voici un exemple utilisant call Fonction d'appel -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function sayHello(name) {
         return "Hello, " + name + "!";
      }
      document.getElementById("result").innerHTML = sayHello.call(null, ["John"])
   </script>
</body>
</html>

Output

Le code ci-dessus imprimera la sortie ci-dessous.

Hello, John!

Comme vous pouvez le voir, nous avons passé null pour thisArg car nous ne voulons pas définir cette valeur. Nous prenons « John » comme seul argument. Le résultat est un appel à la fonction sayHello avec "John" comme paramètre de nom.

Différences entre Function.prototype.apply et Function.prototype.call

Le tableau ci-dessous met en évidence les principales différences entre Function.prototype.apply et Function.prototype.call -

Bases de la comparaison Function.prototype. apply Function.prototype.call
Définition Cette méthode nous permet d'appeler une fonction avec une valeur this spécifique et un tableau d'arguments.

Cette méthode nous permet d'appeler une fonction avec une valeur this spécifique et une liste d'arguments.

Paramètres Nous transmettons un tableau de paramètres.

Nous transmettons une liste de paramètres.

Vitesse Parce qu'il ne crée pas de nouvelle fonction, c'est plus rapide que appeler. em>

Parce que chaque appel crée une nouvelle fonction, il est plus lent que apply.

UTILISATION
  • APPENDRE Un tableau pour

  • Écrivez une fonction intégrée sans boucle

  • LIEND LE CONTRÔTEUR D'UN OBJET.

  • Appelez des fonctions anonymes.

  • Appelle une fonction et précise le contexte de "this"

  • Appelle une fonction sans spécifier le premier argument.

Conclusion

Dans ce tutoriel, nous avons discuté de la différence entre les méthodes apply ​​​​et call>. La principale différence entre les deux réside dans la manière dont ils acceptent les arguments. Ces méthodes ont des utilisations différentes. Vous pouvez afficher les lignes d'utilisation dans le tableau ci-dessus.

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer