Utilisez apply et bind dans JS pour transmettre un nombre dynamique de paramètres à une fonction ou à des compétences class_javascript

Pour commémorer 10 ans sans bloguer, commençons mon premier article de blog avec une astuce si intéressante -___-

Dans ES5, lorsque nous appelons une fonction, si les paramètres à transmettre sont générés en fonction d'autres fonctions ou conditions, c'est-à-dire lorsqu'on ne sait pas combien de paramètres seront transmis, la fonction d'origine sera ne soit pas modifié. Que devrions-nous faire ensuite ?

(Bien sûr, si vous pouvez éviter la situation décrite dans cet article, essayez de l'éviter, comme changer les paramètres en objet ou en tableau, etc.)

La plupart des gens savent peut-être que postuler peut parfaitement résoudre ce problème :

Apply, comme call, utilisera le premier paramètre comme objet appelant de la fonction, c'est-à-dire que le pointeur this dans la fonction appelante est réécrit comme premier paramètre. S'il ne s'agit pas d'une méthode objet, vous pouvez l'ignorer. et passer un null Can.

La différence réside dans les paramètres suivants. apply place tous les paramètres à transmettre dans la fonction appelante dans un tableau, et call les ajoute dans l'ordre comme la fonction d'origine.

Comme il s'agit d'un tableau, il est contrôlable. La génération d'un tableau basé sur d'autres fonctions ou jugements logiques peut atteindre l'objectif de transmettre un nombre dynamique de paramètres.

Mais j'ai rencontré un casse-tête. Je dois passer des paramètres dynamiques lors de la création d'un objet avec new. C'est un problème que je ne rencontre qu'une fois toutes les quelques années :

Si vous utilisez ES6 et disposez du paramètre rest, aucun des problèmes ci-dessus ne sera un problème. Notez que l'ajout de trois points devant le tableau args n'est pas une erreur de syntaxe, mais la méthode d'écriture des paramètres restants fournie par ES6. Vous pouvez la comprendre comme le remplacement de...args par les caractères après avoir supprimé les crochets dans le tableau args.

Mais n’y a-t-il vraiment aucun moyen d’y parvenir dans ES5 ? Après tout, la majeure partie d'ES6 est du sucre syntaxique et peut être compilée dans ES5 à l'aide d'outils comme babel. Si vous avez des questions, compilons-le avec babel et voyons ce que nous obtenons :

.

Vous avez été choqué en voyant la dernière ligne, n'ayez pas peur, analysons ce code. Tout d’abord, disséquons-le et regardons-le en trois étapes :

1. Il ne fait aucun doute qu'en utilisant concat pour connecter null et nos paramètres dans un tableau, comme deuxième paramètre d'apply, nous obtenons [null, 1, 2, 3] ;

2. Calculons apply. Le premier paramètre Foo remplacera Function pour appeler la méthode de liaison native. Le contenu du deuxième tableau de paramètres sera transmis comme paramètre de bind, c'est-à-dire Foo.bind(null, 1 , 2, 3);

3. Le premier paramètre de la méthode bind est similaire à apply et call, en modifiant le pointeur this, et les paramètres suivants peuvent implanter la valeur d'argument principal prédéfinie par défaut pour la fonction, c'est-à-dire après l'exécution de bind. le premier ensemble de parenthèses, nous obtenons une classe Foo dans laquelle trois valeurs de paramètres sont injectées, appelons-la FooWithArgs

;

Enfin, lorsque nous ajoutons FooWithArgs();, nous n'avons pas besoin de transmettre de paramètres. Équivalent à new Foo(1, 2, 3);