5.1 Déclaration de classe
Avec l'introduction d'ECMAScript 6 (ES6), JavaScript a intégré une nouvelle structure pour créer des objets et gérer l'héritage — le mot-clé class. Les classes offrent une syntaxe plus pratique et compréhensible pour créer des objets et travailler avec les prototypes.
Les classes en JavaScript — c'est du sucre syntaxique au-dessus du système d'héritage prototype existant. Elles rendent la création et la gestion des objets plus claire et structurée.
Déclaration de classe
Une classe en JavaScript est déclarée en utilisant le mot-clé class, suivi du nom de la classe. Le corps de la classe est entouré d'accolades {}.
Exemple :
class Person {
// Méthode de classe
greet() {
console.log('Hello!');
}
}
// Création d'une instance de la classe
const person = new Person();
person.greet(); // Affichera : Hello!
Expression de classe
Les classes peuvent être déclarées soit par déclaration, soit par expression. Les expressions de classe peuvent être nommées ou anonymes.
Exemple de classe nommée :
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Affichera : Hello!
Exemple de classe anonyme :
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Affichera : Hello!
5.2 Champs et méthodes de classes
Propriétés de classe
Les propriétés de classe dans ES6 ne peuvent être déclarées qu'à l'intérieur du constructeur. Cependant, dans les versions plus récentes de JavaScript (ES2022), les champs de classe ont été introduits, permettant de déclarer des propriétés en dehors du constructeur.
Exemple d'utilisation des propriétés dans le constructeur :
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Exemple d'utilisation des champs de classe (ES2022) :
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Explication :
- Dans le premier exemple, les propriétés
usernameetemailsont déclarées et initialisées à l'intérieur du constructeur - Dans le deuxième exemple, les propriétés
usernameetemailsont déclarées en dehors du constructeur comme champs de classe
Méthodes de classe
Une classe peut contenir des méthodes définies à l'intérieur du corps de la classe. Celles-ci sont automatiquement ajoutées au prototype des objets créés.
Exemple de méthodes de classe :
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // Affichera : Animal speaks
animal.eat(); // Affichera : Animal eats
3.3 Exemples d'utilisation des classes
Création d'objets complexes
Les classes permettent de créer des objets complexes avec différentes méthodes et propriétés.
Exemple :
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // Affichera : Toyota Camry engine started.
myCar.stopEngine(); // Affichera : Toyota Camry engine stopped.
GO TO FULL VERSION