JavaScript Objets
Objets, propriétés et méthodes de la vie réelle
Dans la vie réelle, une voiture est un objet.
Une voiture possède des propriétés comme le poids et la couleur, et des méthodes comme le démarrage et l'arrêt :
| Objet | Propriétés | Méthodes |
|---|---|---|
|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
Toutes les voitures ont les mêmes propriétés, mais les valeurs des propriétés diffèrent d'une voiture à l'autre.
Toutes les voitures ont les mêmes méthodes, mais les méthodes sont exécutées à des moments différents.
Objets JavaScript
Vous avez déjà appris que les variables JavaScript sont des conteneurs pour les valeurs de données.
Ce code attribue une valeur simple (Fiat) à une variable nommée car :
let car = "Fiat";
Try it Yourself »
Les objets sont également des variables. Mais les objets peuvent contenir de nombreuses valeurs.
Ce code attribue de nombreuses valeurs (Fiat, 500, blanc) à une variable nommée voiture :
const car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself »
Les valeurs sont écrites sous forme de paires nom:valeur (nom et valeur séparés par deux points).
Il est courant de déclarer des objets avec le mot-clé const.
Pour en savoir plus sur l'utilisation de const avec des objets, consultez le chapitre : JS Const.
Définition d'objet
Vous définissez (et créez) un objet JavaScript avec un littéral d'objet :
Exemple
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself »
Les espaces et les sauts de ligne ne sont pas importants. Une définition d'objet peut s'étendre sur plusieurs lignes :
Exemple
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Try it Yourself »
Propriétés de l'objet
Les paires nom:valeurs dans les objets JavaScript sont appelées propriétés :
| Propriété | Valeur de la propriété |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Accès aux propriétés d'un objet
Vous pouvez accéder aux propriétés d'un objet de deux manières :
objectName.propertyName
or
objectName["propertyName"]
Les objets JavaScript sont des conteneurs pour des valeurs nommées appelées propriétés.
Méthodes d'objet
Les objets peuvent également avoir des méthodes.
Les méthodes sont des actions qui peuvent être effectuées sur des objets.
Les méthodes sont stockées dans des propriétés sous forme de définitions de fonction.
| Propriété | Valeur de la propriété |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
Une méthode est une fonction stockée sous forme de propriété.
Exemple
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Dans l'exemple ci-dessus, this fait référence à l'objet personne.
I.E. this.firstName désigne la propriété firstName de this.
I.E. this.firstName désigne la propriété firstName de personne.
Qu'est-ce que this ?
En JavaScript, le mot-clé this fait référence à un objet.
L'objet dépend de la manière dont this est invoqué (utilisé ou appelé).
Le mot-clé this fait référence à différents objets selon la manière dont il est utilisé :
Dans une méthode objet, this fait référence à l'objet. |
Seul, this fait référence à l'objet global. |
Dans une fonction, this fait référence à l'objet global. |
Dans une fonction, en mode strict, this est undefined. |
Dans un événement, this fait référence à l'élément qui a reçu l'événement. |
Des méthodes telles que call(), apply() et bind() peuvent faire référence à this à n'importe quel objet. |
Note
this n'est pas une variable. C'est un mot-clé. Vous ne pouvez pas modifier la valeur de this.
Voir aussi :
Le didacticiel JavaScript this.
Le mot clé this
Dans une définition de fonction, this fait référence au « propriétaire » de la fonction.
Dans l'exemple ci-dessus, this est l'objet person qui « possède » la fonction fullName.
En d'autres termes, this.firstName désigne la propriété firstName de cet objet.
Pour en savoir plus sur this, consultez le Tutoriel JavaScript this.
Accès aux méthodes d'objet
Vous accédez à une méthode d'objet avec la syntaxe suivante :
objectName.methodName()
Si vous accédez à une méthode sans les parenthèses (), elle renverra la définition de fonction :
Ne déclarez pas les chaînes, les nombres et les booléens comme des objets !
Lorsqu'une variable JavaScript est déclarée avec le mot-clé « new », la variable est créée en tant qu'objet :
x = new String(); // Déclare x comme un objet String
y = new Number(); // Déclare y comme un objet Number
z = new Boolean(); // Déclare z comme un objet booléen
Évitez les objets String, Number et Boolean. Ils compliquent votre code et ralentissent la vitesse d'exécution.
Vous en apprendrez davantage sur les objets plus tard dans ce didacticiel.
