Introduction aux classes et objets en JavaScript

Nous allons maintenant étudier la POO en JavaScript. Prenons un exemple de la vie réelle, puis transposons-le en JavaScript.

Prenons une voiture comme exemple. Elle a des roues, une couleur, un type de carrosserie, une cylindrée et ainsi de suite. De plus, le conducteur peut lui donner des commandes : avancer, s'arrêter, tourner à droite, à gauche, etc.

On peut dire qu'il existe une certaine classe de voitures, possédant des propriétés communes (toutes ont des roues et on peut leur donner des commandes).

Une voiture spécifique, garée dans la rue - est un représentant de cette classe, ou, en d'autres mots, un objet de cette classe. Tous les objets de cette classe ont des propriétés : nombre de roues, couleur, type de carrosserie et des méthodes : avancer, s'arrêter, tourner à droite, à gauche.

En d'autres termes, la classe elle-même est un plan, selon lequel les voitures sont fabriquées à l'usine. L'objet est la voiture elle-même, fabriquée selon ces plans.

En JavaScript, une classe est créée avec le mot-clé class, suivi du nom de cette classe. Créons la classe Car :

class Car {
	// ici le code, c'est-à-dire le plan JavaScript de la voiture
}

Spécifions maintenant dans notre plan que toute voiture, créée selon ce plan, aura une propriété pour la couleur et une propriété pour la quantité de carburant.

Pour cela, écrivons à l'intérieur de la classe la propriété color et la propriété fuel :

class Car {
	color; // couleur de la voiture
	fuel;  // quantité de carburant
}

Créons maintenant les méthodes de notre classe. En JavaScript, les méthodes sont similaires aux fonctions ordinaires, mais sont déclarées sans le mot-clé function.

Comme mentionné ci-dessus, notre voiture peut avancer, peut tourner, peut s'arrêter. Créons les méthodes correspondantes dans notre classe :

class Car {
	color; // couleur de la voiture
	fuel;  // quantité de carburant
	
	// Commande avancer :
	go() {
		// du code JavaScript
	}
	
	// Commande tourner :
	turn() {
		// du code JavaScript
	}
	
	// Commande s'arrêter :
	stop() {
		// du code JavaScript
	}
}

Nous avons créé le plan de notre voiture. Maintenant, il faut aller à l'usine et créer un objet de cette classe (c'est-à-dire une voiture spécifique).

En JavaScript, cela se fait avec le mot-clé new, après lequel on écrit le nom de la classe :

new Car; // commandons à l'usine de fabriquer une voiture

Cependant, simplement créer un objet de la classe - ne mènera à rien (c'est comme, par exemple, déclarer un tableau et ne le stocker nulle part). Nous avons besoin d'une variable pour stocker cet objet.

Que cette variable s'appelle myCar - enregistrons-y l'objet que nous avons créé :

let myCar = new Car;

Après la création de la voiture, on peut accéder à ses propriétés. L'accès à celles-ci se fait par un point. Définissons les propriétés de notre objet :

let myCar = new Car; // commandons à l'usine de fabriquer une voiture

myCar.color = 'red'; // peindre en rouge
myCar.fuel = 50;     // faire le plein

Voilà, notre voiture est créée, peinte et ravitaillée. Maintenant, nous pouvons lui donner des commandes via les méthodes de cette voiture.

L'accès aux méthodes se fait également par un point, mais, contrairement à une propriété, après le nom de la méthode, il faut mettre des parenthèses. Commandons notre objet :

myCar.go();
myCar.turn();
myCar.stop();