Table des matières

Les objets en JavaScript


Introduction

JavaScript est un langage orienté objet. Cela veut dire que le langage dispose d'objets.

JavaScript met à notre disposition des objet natifs, c’est-à-dire des objets directement utilisables mais il permet aussi de créer nos propres objets.

Un objet en JavaScript est comme un objet de la vie réelle, il a des propriétés et des fonctions (que nous allons appeler méthode en JavaScript).

Exemple : pour l'objet “voiture” :


Dans ce cours, nous verrons deux procédés pour créer des objets :


Comment créer un objet littéral ?

Pour créer un objet littéral, il faut déclarer une nouvelle variable avec le mot-clé var suivi du nom de l’objet puis utiliser une paire d’accolades en définissant les propriétés et méthodes de notre objet à l’intérieur de celles-ci.

Exemple : Nous pouvons créer l'objet voiture et lui attribuer des propriétés avec la syntaxe suivante : 

var voiture = {marque : "Renault" , modele : "Clio" , couleur : "rouge"};

La définition d'un objet peut s'étendre sur plusieurs lignes : 

var voiture = {
    marque : "Renault" , 
    modele : "Clio" , 
    couleur : "rouge"
    };

On accède à la propriété d'un objet de deux manières :

Exemple : 

var voiture = {
    marque : "Renault" , 
    modele : "Clio" , 
    couleur : "rouge"
    };
// affiche la propriété "marque" de l'objet "voiture"
document.write(voiture.marque);


Vous pouvez aussi créer un objet sans connaître ses propriétés au moment de sa création, elles seront ajoutées ultérieurement.
Exemple :

var voiture = {};   // création de l'objet "voiture"



Comment créer un objet par constructeur ?

Cette méthode de création d'un objet utilise le constructeur Object(). La définition débute par new Object, suivi des propriétés de l’objet.
Exemple :

var voiture = new Object();   // création de l'objet "voiture"
voiture.couleur = "rouge";    // ajout d'une propriété à l'objet "voiture"



Comment ajouter une propriété à un objet ?

Il est possible de modifier la propriété d'un objet en utilisant la notation pointée ou à l'aide de crochet.

Exemple : 

voiture.couleur = "bleue";

ou 

voiture["couleur"] = "bleue";


Comment supprimer une propriété à un objet ?

Vous pouvez supprimer une propriété d’un objet en utilisant l’opérateur delete.
Exemple : 

delete voiture.couleur;   // supprime la propriété couleur à l'objet voiture


A faire vous-même 1 Codepen ou JSFiddle

En utilisant l'objet “voiture”, afficher la phrase suivante : “Ma voiture est une [marque] [modèle] de couleur [couleur]”.



Les objets et les méthodes

Les propriétés peuvent contenir des chaines de caractères (string), des nombres (number) ou des booléens. Il est aussi possible d'employer une fonction comme valeur d'une propriété d'un objet.

Lorsqu'une propriété a pour valeur une fonction alors elle est appelée une méthode.

Exemple : 

var voiture = {
    marque : "Renault" , 
    modele : "Clio" , 
    couleur : "rouge" ,
    avance : function() {
        return "La " + this.marque + " " + this.modele + " avance !";
    }
};
 
document.write(voiture.avance());

Pour accéder à la méthode avance() de l'objet voiture, on utilise la notation pointée : 

voiture.avance()


Attention, dans l'exemple précédent :

  • avance est une propriété ;
  • avance() est une méthode, c'est à dire une fonction stockée dans la propriété avance.


Le mot-clé this s'emploi à l'intérieur d'une méthode pour désigner l'objet auquel cette méthode est en train d'être appliquée.
Dans l'exemple précédent, this désigne l'objet voiture.



Comment ajouter une méthode à un objet ?

On utilise le notation pointée pour ajouter une méthode à un objet.
Exemple : 

voiture.recule = function() {
        return "La " + this.marque + " " + this.modele + " recule !";
};