Object

Un objet est une entité indépendante qui est composée de membres

un membre d'un objet est toujours composé d'un nom et d'une valeur qui sont séparés par " : " qui sont séparés les uns des autres par une " , "

Types de membres :

Un objet peut être construit de quatre façons différentes:

Façon littéral:

See the Pen literary object - JS by Deblandero (@deblandero) on CodePen.

On parle ici d’objet « littéral » car nous avons défini chacune de ses propriétés et de ses méthodes lors de la création, c’est-à-dire littéralement.

Utiliser le point pour accéder aux membres d'un objet, les modifier ou en définir de nouveaux

pour accéder aux propriétés et aux méthodes d'un objet on utilise le " . " appelé un accesseur.

Un accesseur va nous permettre d'accéder aux valeurs de nos différents membres mais également de les modifier et d'en ajouter

See the Pen Objet - accesseur | js by Deblandero (@deblandero) on CodePen.

Utiliser les crochets pour accéder aux propriétés d'un objet, les modifier ou en définir de nouvelles

Idem que précédemment pour accéder aux propriétés, nous pouvons utiliser les " [ ] ".

Il y a cependant une petite particularité.

Si le nom d'une propriété contient des ' - ' seul les crochets pourront être utilisables.

See the Pen Object - asseceur [ ] | JS by Deblandero (@deblandero) on CodePen.

L'utilisation du mot clef This

Le mot clef this est un mot-clef généralement utilisé dans les languages orientés objets.

Ici il sera utilisé pour faire référence à l'objet qui est couramment manipulé.

Pour le dire très simplement, c’est un prête-nom qui va être remplacé par le nom de l’objet actuellement utilisé lorsqu’on souhaite accéder à des membres de cet objet.

L'utilité d'un constructor

Les grand enjeux et avantages de la POO sont de permettre de mieux organisés, d'être plus claire, plus lisible, plus maintenable, et plus performant en regroupant des ensembles de données et d'opérations qui auront entre elles au sein d'objets qu'on va pouvoir manipuler plutôt que de réécrire sans cesse les mêmes opérations

Imaginons par exemple que l’on souhaite créer un objet à chaque fois qu’un utilisateur enregistré se connecte sur notre site. Chaque objet « utilisateur » va posséder des propriétés (un pseudonyme, une date d’inscription, etc.) et des méthodes similaires (possibilité de mettre à jour ses informations, etc.).

Dans ces cas-là, plutôt que de créer les objets un à un de manière littérale, il serait pratique de créer une sorte de plan ou de schéma à partir duquel on pourrait créer des objets similaires à la chaine.

Nous allons pouvoir faire cela en JavaScript en utilisant ce qu’on appelle un constructeur d’objets qui n’est autre qu’une fonction constructeur.

La fonction construction d’objets : définition et création d’un constructeur

Une fonction construceur va nous permettre de créer des objets semblables. A savoir que n'importe quelles fonctions vont pouvoir faire office de constructeur.

Le mot clef new sera utilisé pour appeler un constructeur et de là, créer un nouvel object sur une base similaire.

Une fonction, en Javascript est en fait un type particulier d'objet. Elle peut donc contenir des propriétés et des méthodes.

See the Pen Object - function constructor | JS by Deblandero (@deblandero) on CodePen.

Par convention on va utilise une majuscule à la première lettre du titre de la function, cela permet de bien différencier les fonctions constructor et les fonctions normales dans un script.

On va utiliser le mot clef this afin de définir et d'initialiser les propriétés et les méthodes de chaque objet créé.

Utilisation des functions construtor pour créer des objets

See the Pen Object - function constructor -> new objet | JS by Deblandero (@deblandero) on CodePen.

Comme notre constructeur est une function, nous allons pouvoir l'appeler autant de fois que l'on veut. Et donc créer autant d'objets que désirer sur la même base.

La fonction constructeur doit vraiment être vue en JavaScript comme un plan de base pour la création d’objets similaires et comme un moyen de gagner du temps et de la clarté dans son code. On ne va définir dans cette fonction que les caractéristiques communes de nos objets et on pourra ensuite rajouter à la main les propriétés particulières à un objet.

Prototype

Lorsque qu'on crée une function constructor, une propriété "prototype" est automatiquement créé.

Le contenu de ce constructor sera automatiquement (lors de la création d'un nouvel objet à partir de l'objet de base grâce au mot-clef 'new') disponible dans le nouvel objet.

Les membres (contenant les propriétés de valeur) seront stockés dans le constructor et donc disponible dans les propriétés du futur objet.

les membres (contenant les méthodes) seront quant à eux stockés dans la propriété (créée par défault) 'prototype'. Pour être finalement disponible dans la propriété '__proto__' de l'objet créé.

Rappelons que '__proto__' récupéré dans l'objet crée, est une "copie" du prototype de l'objet de base. Il y a donc toutes les méthodes créé à la base.

Je pense que ça mérite un exemple ...

On peut bien entendu intégrer des objets perso dans des prototypes d'objets perso.. Utiliser dès la function call () de l'objet function () Natif à JS pour ramener une fonction rattachée à un objet donné sur un autre objet.

See the Pen Object - Prototype | JS by Deblandero (@deblandero) on CodePen.

Class/Object

Javascript a intégré un mot clef class ce qui permet de créer des object/classe.

Object/classe car Javascipt est toujours un langage orienté objet à prototypes et, en tâche de fond, il va convertir nos « classes » selon son modèle prototypes.

On va donc pouvoir imiter la forme des langages basés sur les classes mais dans le fond le JavaScript reste un langage prototypé.

See the Pen Object - Class | JS by Deblandero (@deblandero) on CodePen.

Utilisation de extends

Il est possible d'étendre une classe parente à la class enfant

Si une classe enfant n'a pas de constructeur.. défini, il utilise quand même celui du parent par défaut

See the Pen Object - Class extends | JS by Deblandero (@deblandero) on CodePen.