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

WBOYavant: 2023-08-24 13:05:021493parcourir

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, ...)

où 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!

JavaScript NULL 构造函数循环参数数组 function 对象 this prototype td

Déclaration：

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

Article précédent：Comment faire réagir un objet polygone aux événements de redimensionnement à l'aide de FabricJS ?Article suivant：Comment faire réagir un objet polygone aux événements de redimensionnement à l'aide de FabricJS ?

Articles Liés

Voir plus