Comment utiliser les méthodes apply (?), Call (?) Et bind (➰) en JavaScript

Dans cet article, nous parlerons des méthodes apply, call et bind de la chaîne de prototypes de fonctions. Ils font partie des concepts les plus importants et les plus souvent utilisés en JavaScript et sont très étroitement liés au mot - clé this .

Donc, pour comprendre les informations contenues dans cet article, vous devez d'abord vous familiariser avec le concept et l'utilisation du mot - clé this . Si vous le connaissez déjà, vous pouvez continuer - sinon, vous pouvez consulter cet article ici, puis revenir ici.

Pour en savoir plus sur apply | call | bind, nous devons également connaître les fonctions en JavaScript, en supposant que vous soyez familier avec cela .

Les fonctions

Le constructeur Function crée un nouvel objet Function. L'appel direct du constructeur peut créer des fonctions dynamiquement, qui peuvent être exécutées dans la portée globale.

Les fonctions étant des objets en JavaScript, leur appel est contrôlé par les méthodes apply, call et bind .

Pour vérifier si une fonction est un objet Function, nous pouvons utiliser le code de l'extrait de code suivant, qui renvoie true.

L'objet Function global n'a pas de méthodes ou de propriétés propres. Cependant, comme il s'agit d'une fonction elle-même, elle hérite de certaines méthodes et propriétés via la chaîne de prototypes de Function.prototype. - MDN

Voici les méthodes de la chaîne de prototypes de fonctions:

  • Function.prototype.apply ()
  • Function.prototype.bind ()
  • Function.prototype.call ()
  • Function.prototype.isGenerator ()
  • Function.prototype.toSource ()
  • Object.prototype.toSource
  • Function.prototype.toString ()
  • Object.prototype.toString

Nous sommes concernés par les trois premiers, alors commençons.

Appliquer ?

La méthode apply () est une méthode importante du prototype de fonction et est utilisée pour appeler d'autres fonctions avec une valeur de mot - clé et des arguments fournis sous la forme d'un tableau ou d'un tableau comme un objet.

Les objets de type tableau peuvent faire référence à NodeList ou à l'objet arguments à l'intérieur d'une fonction.

Cela signifie que nous pouvons appeler n'importe quelle fonction et spécifier explicitement ce à quoi elle doit faire référence dans la fonction appelante.

Syntaxe

Revenir

Il renvoie le résultat de la fonction qui est invoquée par this.

La description

La méthode apply permet d'appeler et d'affecter une fonction / un objet appartenant à un objet x à un objet y.

Exemples

1.

Comme on le voit dans l'extrait de code donné, nous voyons que lorsque nous poussons un tableau dans un autre, le tableau entier est traité comme un élément et poussé à l'intérieur de la variable du tableau.

Mais que se passe-t-il si nous voulons que les éléments soient poussés individuellement à la place sous forme de tableau? Bien sûr, il existe littéralement n nombre de façons de le faire, mais au fur et à mesure que nous apprenons, utilisons-le:

Dans l'exemple donné, nous pouvons voir l'utilisation de apply pour joindre deux tableaux donnés. Le tableau des arguments est le tableau des éléments et cet argument pointe vers la variable du tableau. Les éléments du tableau d'éléments sont poussés vers l'objet ( tableau ) auquel le this estpointant . Nous obtenons le résultat lorsque les éléments individuels du deuxième tableau sont poussés vers le tableau vers lequel le this est pointé.

2.

La fonction max dans JS est utilisée pour trouver l'élément avec la valeur maximale à partir d'un pool d'éléments donné. Mais comme nous pouvons le voir dans l'extrait de code, si les valeurs sont sous la forme d'un tableau, nous obtenons le résultat sous forme de NaN. Nous parlons sûrement de JavaScript, donc encore une fois, il y a n nombre de façons de le faire, mais utilisons apply.

Maintenant, lorsque nous utilisons apply et utilisons la fonction Math.max (), nous obtenons le résultat. Comme nous le savons, le apply prendra toutes les valeurs à l'intérieur du tableau en tant qu'arguments individuels, puis la fonction max leur sera appliquée. Cela nous donnera la valeur maximale du tableau.

Une chose intéressante à souligner ici est qu'à la place de cela, nous avons utilisé null. Comme l'argument fourni est le tableau de nombres, même si cela est introduit , il pointera vers le même tableau et nous allons obtenir le même résultat. Par conséquent, dans de tels cas, nous pouvons utiliser null à la place de this. Cela nous montre que l' argument this dans la fonction apply est un argument facultatif.

Appel

La méthode call () est utilisée pour appeler une fonction avec un this donné et des arguments qui lui sont fournis individuellement.

Cela signifie que nous pouvons appeler n'importe quelle fonction, en spécifiant explicitement la référence à laquelle elle doit faire référence dans la fonction appelante.

Ceci est très similaire à apply, la seule différence étant que apply prend des arguments sous la forme d'un tableau ou d'objets de type tableau, et ici les arguments sont fournis individuellement.

Syntaxe

Revenir

Résultat de l'appel de la fonction avec la thisvaleur et les arguments spécifiés .

La description

La méthode call permet d' appeler et d'affecter une fonction / un objet appartenant à un objet x à un objet y.

Exemples

1.

Ceci est un exemple de chaînage de constructeur. Comme nous pouvons le voir, dans chaque fonction, le constructeur du Product est appelé, et en utilisant call les propriétés de l'objet Product sont enchaînées avec les objets Pizza et Toy, respectivement.

Lorsque de nouvelles instances des objets Pizza et Toy sont créées, les paramètres sont fournis sous forme de nom, prix et catégorie. La catégorie est appliquée uniquement dans la définition, mais le nom et le prix sont appliqués à l'aide du constructeur chaîné de l'objet Product, tels qu'ils sont définis et appliqués dans l'objet Product. Avec un peu plus d'ajustement, nous pouvons obtenir l'héritage.

2.

Dans l'extrait de code ci-dessus, nous avons défini une fonction appelée sleep. Il se compose d'une réponse de tableau qui se compose d'éléments qui adressent les propriétés à l'aide du mot - clé this . Ils sont définis dans un objet séparé en dehors de la fonction.

La fonction sleep est appelée avec l'objet obj comme argument. Comme nous pouvons le voir, les propriétés de l'objet obj sont définies respectivement dans this.animal et this.sleepDuration , et nous obtenons la phrase complète en sortie.

Lier➰

La méthode bind () crée une nouvelle fonction qui, lorsqu'elle est appelée, a son thismot-clé défini sur la valeur fournie, avec une séquence donnée d'arguments précédant tout fourni lorsque la nouvelle fonction est appelée. - MDN

Syntaxe

Revenir

Bind renvoie une copie de la fonction avec le this fourni et les arguments.

La description

La fonction bind ressemble beaucoup à la fonction call , la principale différence étant que bind renvoie une nouvelle fonction alors que call ne le fait pas.

Selon les spécifications ECMAScript 5, la fonction renvoyée par bind est un type spécial d'objet fonction exotique (comme ils l'appellent) appelé la fonction Bound (BF) . Le BF encapsule l'objet de fonction d'origine. L'appel d'un BF exécute la fonction encapsulée qu'il contient.

Exemples

1.

Dans l'extrait de code ci-dessus, nous avons défini une variable x et un objet appelé module. Il contient également une propriété appelée x et une autre propriété dont la valeur correspondante est une fonction qui renvoie la valeur de x .

Lorsque la fonction getX est appelée, elle renvoie les valeurs de x qui sont définies à l'intérieur de l'objet et non le x dans la portée globale.

Une autre variable est déclarée dans la portée globale qui appelle la fonction getX à partir de l' objet module . Mais comme la variable est dans la portée globale, le this dans le getX pointe vers le x global et donc 9 est retourné.

Une autre variable est définie qui appelle la fonction précédente mais cette fois lie ladite fonction à l' objet module . Cette liaison renvoie la valeur de x à l'intérieur de l'objet. En raison de la liaison, le this dans la fonction pointe vers la valeur de x dans l'objet et non vers le x global . Par conséquent, nous obtenons 81 comme sortie

Conclusion

Maintenant que nous avons appris les bases des méthodes, vous ne savez peut-être pas pourquoi il y a 3 fonctions différentes qui font presque la même chose. Pour clarifier ce concept, vous devez vous entraîner avec différentes situations et scénarios afin de pouvoir apprendre plus en détail où et comment ils peuvent être utilisés. Ils rendront votre code plus propre et plus puissant.

Si vous avez aimé cet article, applaudissez? et suivre? pour plus.