Javascript (20) - Objet littéral et fonction constructeur

Bonjour à tous et bienvenue dans cette nouvelle leçon sur le langage JavaScript. Aujourd'hui, nous allons voir les objets. Depuis le début de cette série, nous n'avons guère cessé d'invoquer des objets, comme l'objet window, l'objet document, l'objet array, etc. Et même certains types primitifs comme les nombres ou les chaînes de caractères peuvent être appréhendés en tant qu'objets à certains égards. En effet, le langage JavaScript s'articule autour des objets et la plupart de ces objets-là sont natifs au langage et sont créés à partir de prototypes prédéfinis. D'ailleurs, et comme vous le savez déjà, JavaScript est un langage de programmation orienté prototype, mais à partir de l'implémentation ECMAScript 6, il est devenu un langage de programmation orienté objet. Cela veut dire que désormais nous pouvons créer nos propres objets de manière personnalisée. Pour créer un objet personnalisé, il existe plusieurs façons de faire. À savoir la syntaxe littérale, l'invocation du constructeur Object, l'utilisation de fonctions constructeurs et l'instanciation de classes personnalisées. Dans cette leçon nous allons voir les 3 premières méthodes. Quant à la création de classes, ça sera l'objet d'une vidéo à part vu qu'il y aura beaucoup de notions à survoler. Commençons par la syntaxe littérale. Supposons que l'on veut créer un objet, on mettra let On va nommer objet, on mettra égal, puis on met des accolades. C'est entre les accolades que l'on va définir les membres de l'objet, et quand je dis membres, ça sous-entend les attributs ou les méthodes. Les attributs sont des variables et les méthodes sont des fonctions. On mettra par exemple l'attribut nom, on met deux points, puis la valeur. On parle dans ce cas de clé et de valeur. Le deuxième attribut c'est âge. On mettra la valeur 30. On peut aussi ajouter un autre attribut, loisirs, et puisqu'il peut y avoir plusieurs loisirs, alors on va opter pour un tableau. Par exemple, natation, surf et plongée. Maintenant c'est bon, notre objet a été créé. N'oubliez pas de mettre virgule en guise de séparateur. Pour le dernier élément par contre, il ne faut pas mettre de virgule. On ferme directement l'accolade. Affichons cet objet dans la console. Ça affiche l'objet avec les différents éléments qu'il contient qui sont dans ce cas des attributs. Bien sûr on peut dérouler pour avoir plus de détails. Là il a classé les attributs par ordre alphabétique, il a commencé par âge puis loisirs et enfin le nom. Et après il y a d'autres détails mais on verra ça après, principalement dans la vidéo dédiée aux classes. Maintenant, si je veux accéder à un membre en particulier, il suffit de mettre .nom par exemple. Dans ce cas, vous mettez l'objet .nom pour dire que je vais accéder à la valeur de l'attribut nom. Il s'affiche Tom. Même chose pour l'âge. Il existe une autre façon de faire, c'est utiliser des tableaux associatifs. C'est un tableau, mais au lieu de mettre l'index, on met une clé. Dans ce cas, la clé n'est rien d'autre que l'attribut cherché. Exécutons et ça affiche le même résultat. Pour le dernier élément, par exemple loisirs, il affiche un tableau et pour accéder à une entrée, il suffit de mettre son indice. Par exemple, 0 pour accéder à la première valeur qui est natation. Sinon on peut faire ceci. Dans ce cas c'est un tableau à 2 dimensions. La première dimension contient une clé et la deuxième dimension c'est un indice. Voilà. On peut créer un objet dans un autre. Dans ce cas on va ajouter un autre objet qu'on appellera par exemple expérience. Je mettrai exp pour simplifier et je mets des accolades pour dire c'est un nouvel objet. Je mettrai par exemple la clé profession Et comme valeur je mettrai ingénieur par exemple. Et la clé spécialité, vous avez constaté que j'ai pas mis d'accent alors qu'en réalité vous pouvez toujours vous en servir mais vaut mieux les éviter dans ce cas surtout pour les clés. D'ailleurs il faut noter que les clés on peut les mettre entre des doubles quotes comme étant des chaînes de caractères, c'est-à-dire on peut se permettre des accents si vous souhaitez. Mais vaut mieux se tenir à cette syntaxe. Et là on mettra informatique. Et puisque c'est le dernier élément de notre objet, dans ce cas pas la peine de mettre la virgule, on ferme directement par accolades. Pour accéder à cet objet, alors l'objet principal c'est objet suivi de exp, c'est notre objet souhaité. Dans ce cas quand j'exécute, il m'affiche les valeurs de l'objet et quand je voudrais accéder à une valeur en particulier, je mettrai profession par exemple. Et ça affiche la profession souhaitée. On peut aussi créer des méthodes, c'est-à-dire des fonctions. Les méthodes généralement servent à décrire le comportement de notre objet. On va ajouter une méthode qui s'appelle par exemple renommer. On met la virgule de séparateur, ensuite la fonction renommer à laquelle on passera un argument arg par exemple. On ouvre les accolades. Dans ce cas, c'est une fonction ou bien une méthode et non pas un objet. Imaginez que je veux changer la valeur de nom. Dans ce cas, je mettrai pas nom comme ça, mais il faut mettre objet.nom, c'est-à-dire il faut accéder à cet attribut à partir de son parent qui n'est rien d'autre que l'objet. Mais il est préférable de mettre ici this parce que this fait référence à objet qu'on a vu avant. Et là, on va lui affecter la valeur de Arc. Maintenant, ici, on va afficher le nom avant l'application de la méthode renommer. Ça nous affiche Tom. Maintenant on appelle la méthode renommer toujours à travers l'objet et on lui passe la nouvelle valeur par exemple Ben et on réaffiche le nom. Réexécutons. Alors la première valeur c'est Tom et après ça a été renommé, c'est devenu Ben. Il faut faire attention à une chose, il faut éviter d'utiliser les fonctions fléchées si vous voulez accéder à l'objet this parce que this n'est pas comprise dans les fonctions fléchées. Par contre, vous pouvez mettre le nom de l'objet directement, c'est-à-dire au lieu de this vous mettez objet, bien sûr si vous préférez utiliser une fonction fléchée. On peut ajouter une autre méthode que j'appellerai par exemple liste_loisirs. N'oublions pas la virgule. Et cette fonction va juste lister les loisirs en tant que chaîne de caractères parce que préalablement c'est un tableau. Alors je mettrai little_s.loisirs et j'appelle la méthode join que nous avons vue avant. Et comme séparateur, je vais utiliser une virgule, bon avec un espace si vous voulez. Maintenant on appelle cette méthode objet.join. Liste_loisirs. On exécute et ça nous affiche les loisirs en tant que chaîne de caractères. Alors là, c'est ce qui concerne la syntaxe littérale. La deuxième méthode, c'est l'utilisation du constructeur Object. On va commenter ça. On mettra toujours l'objet avec le même nom et on mettra dans ce cas le mot-clé new on fait appel au constructeur Object prédéfini en JavaScript. Et de la même manière, on va définir les attributs, par exemple le nom. Alors on mettra objet.nom et on met la valeur souhaitée, par exemple Tom. Et objet renommer en tant que fonction, dans ce cas je préfère utiliser une fonction anonyme à laquelle on passe l'argument Et là encore on mettra this parce que là je suis dans l'objet, alors this fait référence à objet. Nom égal à Arc. Alors affichons le nom, c'est-à-dire avant de le renommer. C'est presque la même syntaxe, ça nous affiche Tom. Maintenant on applique la fonction renommer avec la valeur souhaitée. Et on réaffiche. Alors ça affiche maintenant les deux. Bref, on peut faire la même chose qu'avec la syntaxe littérale. La troisième méthode maintenant, on va encore commenter. C'est la fonction constructeur. Alors on va créer une fonction que j'appellerai par exemple f. Et je mets function. Comme d'habitude, essayons d'éviter au maximum les fonctions fléchées parce qu'on pourrait se servir du mot-clé this qui sera pas compris dans la fonction fléchée. Et là on va initialiser des attributs, par exemple this.name= Tom. La même chose, on va créer la méthode renommer. Là aussi c'est une fonction à laquelle on va passer l'argument arg. C'est-à-dire le nouveau nom, this.name= arc. Alors là, c'est une fonction constructeur, c'est-à-dire que si on l'affecte à quelque chose, donc forcément ça deviendra un objet, et cet objet contiendra des attributs, et ces attributs-là sont préfixés par this. Même chose pour les méthodes. Maintenant, on va créer un objet à partir de la fonction constructeur, on l'appellera g, et on utilise le mot-clé new. F. Notez bien que f, c'est l'objet qu'on a créé, et g, ce n'est rien d'autre qu'un objet qu'on a créé à partir de cet objet-là. Et pour être plus précis, c'est un constructeur. Ensuite, on va afficher le nom à partir de l'objet créé, c'est-à-dire de g, et ça nous donne Tom. On renomme de la même manière Ensuite on réaffiche le nom et on obtient le même résultat qu'avant. Ce qu'il faut retenir c'est que vous avez plusieurs façons de faire mais en général la méthode la plus utilisée c'est celle-ci, c'est-à-dire celle de l'objet littéral. D'ailleurs c'est cette méthode qui a inspiré le format de fichier JSON et qui est très utilisé en JavaScript surtout pour échanger des informations avec des entités externes comme des serveurs ou bien des API. Alors, on se contente de ça pour cette séance. La prochaine fois, nous allons voir la création des classes et l'instanciation de celles-ci pour créer des objets, avec bien sûr toutes les notions que cela implique. Merci pour votre attention et à la vidéo prochaine.