5.2 Fonction Factory
Dans la dernière vidéo, vous avez appris à utiliser la syntaxe littérale de l'objet pour créer un objet. Mais il y a un petit problème ici. Imaginez que vous vouliez créer deux objets cercle, donc, je vais copier ce code ici, et appeler ce deuxième objet cercle cercle 2. Maintenant, le problème que nous avons ici est que nous avons dupliqué l'implémentation de la méthode draw, donc en ce moment c'est une méthode simple avec une seule ligne de code, mais si nous avions 10 lignes de code ici. Vous ne voudriez pas répéter toutes ces lignes ici, car si vous boguez dans cette méthode, nous devrons le corriger à plusieurs endroits. Et prenez également en compte que notre objet cercle n'a actuellement qu'une seule méthode. Et si nous avions 10 autres méthodes ici? Nous ne voulons pas dupliquer ou répéter toute cette logique, ? Donc, si nos objets ont une logique, nous avons besoin d'une manière différente de créer des objets. C'est alors que nous utilisons des factory fonctions ou fonctions constructeur. Dans cette vidéo, vous allez en apprendre davantage sur les factory fonctions et nous examinerons ensuite les fonctions du constructeur. Je vais donc supprimer ce deuxième cercle et vous montrer comment créer une factory fonction. Donc, la factory fonction , tout comme une usine produisant des produits, ces fonctions produisent des objets. Nous définissons donc une fonction qu'on va appeler créercercle. Maintenant, nous allons déplacer cette définition de l'objet cercle à l'intérieur de nos factory fonctions afin que vous ayez un objet cercle ici, et enfin nous devons le retourner. Nous pouvons le renvoyer de cette facon, mais nous n'avons pas vraiment besoin que cette constante de cercle soit définie car nous n'allons la référencer nulle part, nous voulons seulement la renvoyer. Nous pouvons donc raccourcir ce code en supprimant la constante du cercle et en renvoyant simplement cet objet. Donc, chaque fois que nous appelons la fonction de créercercle, nous obtenons un objet cercle. Cependant, nous avons codé en dur ces valeurs ici, donc chaque cercle créé par cette fonction, son rayon sera égal à 1 . Ce n'est pas ce que nous voulons, nous voulons avoir un cercle avec un plus grand rayon. Nous voulons donc passer le rayon comme paramètre ici. Donc, rayon, puis au lieu de coder 1 en dur , nous voulons définir la valeur de cet argument de rayon que nous fournissons lors de l'appel de cette fonction. De même, nous pouvons ajouter un autre paramètre ici comme location, et au lieu de coder en dur cet objet ici, nous définissons simplement location sur cet argument de location. Cependant, pour plus de simplicité, je vais supprimer ces deux propriétés. Location et visible, afin que nous puissions nous concentrer sur le cœur des factory fonctions. Supprimons donc ces propriétés, nous n'avons pas non plus besoin du paramètre location. Mous pouvons maintenant raccourcir ce code. Ainsi, en JavaScript moderne, si notre clé et la valeur sont identiques, nous pouvons raccourcir notre code en supprimant une valeur et en ajoutant simplement la clé. C'est donc exactement l'équivalent de ce code. , ensuite nous avons notre méthode draw, il y a aussi une syntaxe plus courte pour définir cette méthode, donc au lieu de la définir comme une paire de valeurs clés, nous pouvons la définir comme ceci. Donc on fait un draw entre parenthèses et un bloc de code. Ceci est similaire à la façon dont nous avons défini une fonction en dehors d'un objet, Donc, si vous voulez définir une fonction, voici comment nous la définissons. Nous avons donc le mot clé de fonction, puis le nom de la fonction, les parenthèses et le bloc de code. Maintenant, lorsque nous mettons cela à l'intérieur d'un objet, nous supprimons le mot-clé function et nous ajoutons simplement cela à l'intérieur de l'objet. Vous pouvez voir que cette syntaxe est un peu plus courte qu'ici. On va donc supprimer ceci. Et déplacez cette console. log dans notre méthode draw. Alors maintenant, nous avons une factory fonction, nous pouvons simplement l'appeler pour créer un objet cercle. Je vais donc définir cette constante circle1, et appeler la fonction creercercle, et ensuite nous passons la valeur 1 comme rayon. Maintenant, enregistrons cet objet cercle sur la console. afin que vous puissiez voir que le rayon est défini sur 1, nous avons également cette méthode draw, donc nous Pouvons appeler cercle1 point draw et voici notre message Draw sur la console. Maintenant, l'avantage de cette Factory fonction, c'est que vous avez défini la logique dans un seul endroit. Nous pouvons donc appeler cette fonction avec différentes valeurs ou différents arguments, nous obtenons différents objets de cercle mais nous avons défini la méthode draw uniquement à 1 seul endroit. Donc, s'il y a un bug dans cette méthode que nous devons corriger à l'avenir, il y a un seul endroit que nous devons modifier. Je vais donc créer un autre objet cercle, circle2, donc meme chose creercercle je vais passer 2 comme rayon, enregistrons ceci sur la console. Consle.log('Cercle2') on enregistre, et regardez, nous avons 2 objets cercle différents et une seule définition de la méthode draw. Il s'agit donc uniquement de factory fonctions. Mais ces fonctions ne sont pas le seul moyen de créer des objets, nous pouvons également utiliser des fonctions constructeurs, et c'est ce que vous allez apprendre dans la prochaine vidéo.