5.3 Fonction Contructeur

Dans cette vidéo, vous allez découvrir un autre modèle de création d'objets. C'est donc la fonction constructeur, donc, tout comme la factory fonction, nous allons créer une fonction, et le travail de cette fonction est de construire ou de créer un objet. Cependant, le nommage de cette convention que nous utilisons pour les fonctions constructeur est différente. Ainsi, cette convention que nous avons pour les factory fonctions est ce que nous appelons la notation chameau=>camelcase, donc la première lettre du premier mot est en minuscule, mais la première lettre de chaque mot après est en majuscule. Donc, ça ressemble à ça, , camelCase Et ces lettres majuscules ressemblent à des bosses de chameau, c'est pourquoi nous l'appelons notaton de chameau. En revanche, nous avons une autre notation appelée notation Pascalcase, et dans cette notation, la première lettre de chaque mot doit être en majuscule. Donc, PascalCase. Maintenant, lorsque nous nommons des fonctions constructeur, nous devons utiliser la notation Pascal par convention car c'est quelque chose que les autres développeurs JavaScript attendent lorsqu'ils lisent votre code. Nous allons donc appeler cette fonction Cercle avec un grand C. Notez que je n'ai pas appelé cette fonction creerCercle et vous le verrez dans quelques instants. Maintenant, tout comme notre factory fonction, ici nous devons ajouter un paramètre: rayon Cependant, au lieu de renvoyer un objet, nous allons utiliser une approche différente pour initialiser un objet. En JavaScript, nous avons un mot-clé Appelé "This". Et this est une référence à l'objet qui exécute ce morceau de code. Vous allez voir cela dans quelques instant. Pour l'instant, imaginez simplement que cela fait référence à un objet vide. Avec la notation par points, nous pouvons accéder aux propriétés d'un objet, nous pouvons lire une propriété, ou nous pouvons définir une propriété, donc sur ce nouvel objet vide, nous voulons ajouter une propriété appelée rayon donc radius, et nous la définissons sur cet argument de rayon que vous recevez ici. Ainsi, en JavaScript, nos objets sont dynamiques. Une fois que nous les avons créés, nous pouvons toujours leur ajouter des propriétés ou des méthodes supplémentaires. Nous ajoutons donc ici une nouvelle propriété dans un objet vide. De même, nous allons utiliser cette approche pour ajouter une méthode draw à ce nouvel objet vide. Donc on fait un this point draw, mais nous définissons cela sur une fonction et dans le corps de cette fonction, nous faisons simplement un console.log de draw. Enfin, pour créer un objet cercle à l'aide de la fonction constructeur, nous allons définir une constante appelée cercle et ici nous allons utiliser un autre mot-clé, qui est new cercle, et passer 1 comme rayon. Que se passe-t-il ici? Eh bien, lorsque nous utilisons ce nouvel opérateur ici, 3 choses se produisent. Ce nouvel opérateur crée un objet JavaScript vide. Donc Quelque chose comme ça. Constante de x, définie sur un objet vide. Ensuite, il définira this pour pointer vers ce nouvel objet vide. Donc, dans ce code, nous avons accès à cet objet vide, et nous définissons cette propriété radius lorsque nous avons laissé la méthode draw dans ce nouvel objet. Enfin, ce nouvel opérateur retournera ce nouvel objet à partir de cette fonction, donc comme ceci. Return this; Alors permettez-moi de récapituler, lorsque nous utilisons le nouvel opérateur, 3 choses se produisent, cet opérateur crée d'abord un objet vide, puis il le définira pour pointer vers cet objet et enfin il retournera cet objet à partir de cette fonction. Donc, ce que nous obtenons ici est ce nouvel objet, et nous définissons simplement le cercle pour pointer vers cet objet. Voyons maintenant la différence entre les factory fonctions et constructeur. Bien qu'avec les factory fonctions, nous créons un objet comme celui-ci. Constant leCircle ici, nous appelons creerCercle et passons un argument. Donc, avec les factory fonctions, nous appelons simplement une fonction et dans cette fonction, nous retournons un nouvel objet. En revanche, avec les fonctions constructeur, nous avons utilisé le nouvel opérateur, et au lieu de renvoyer un objet, nous utilisons le mot-clé this. Également en termes de nommage de convention avec les fonctions constructeurs, nous utilisons la convention PascalCase, mais dans les factory fonctions, nous utilisons la notation camelCase. Vous vous demandez donc peut-être quelle approche ou quel modèle utiliser pour créer de nouveaux objets. Ces deux modèles sont tout aussi bons pour créer de nouveaux objets, le modèle de fonction constructeur est familier aux développeurs qui ont une certaine expérience de la programmation dans des langages comme C # et Java. Donc, avec ce modèle, vous pouvez voir que nous créons un nouveau cercle. Si vous n'avez aucune expérience dans des langages comme C # ou Java, vous voudrez peut-être opter pour une factory fonction. Voilà pour cette vidéo sur les fonctions constructeur en JS, on se retrouve pour une toute prochaine vidéo.