JavaScript
◼Les Classes
• Création
✓ Principe
◼ Utiliser le mot clé class pour créer une class
◼ Toujours ajouter une méthode appelée constructor()
✓ Syntaxe
class NomClasse {
◼
constructor(){ …}
…
}
class Voiture{
✓ Exemple :
constructor(nom, annee){
[Link] = nom;
[Link] = annee ;
}
ASSALE Adjé Louis JavaScript 1
JavaScript
◼Les Classes
• Utilisation
✓ Principe
◼ Une classe sert à créer des objets
✓ Exemple :
◼ const maVoiture1 = new Voiture(Ford, 2014);
const maVoiture2 = new Voiture(Audi, 2019);
✓ La méthode constructor()
◼ C’est une méthode spéciale :
◼ Elle est exécutée automatiquement quand un nouvel objet est créé
◼ Elle est utilisée pour initialiser les propriétés des objets
ASSALE Adjé Louis JavaScript 2
JavaScript
◼Les Classes
• Les méthodes de classes
✓ Principe
◼ Elles sont créées avec la même syntaxe que les méthodes des objets
◼ On peut ajouter autant de méthodes
✓ Syntaxe :
◼ class NomClasse {
constructor(){ …}
methode_1(){ …}
methode_2(){ …}
…
}
ASSALE Adjé Louis JavaScript 3
JavaScript
◼Les Classes
• Les méthodes de classes
class Voiture{
✓ Exemple :
constructor(nom, annee){
[Link] = nom;
[Link] = annee ;
}
}
age(x){
return x - [Link];}
const date = new Date();
let an = [Link]();
const maVoiture = new Voiture(Ford, 2014);
[Link](demo).innerHTML =
ASSALE Adjé Louis ma voiture est vielle de + [Link](an) + ans; 4
JavaScript
◼Les Classes
• Héritage de classes
✓ Principe
◼ Pour créer une classe héritière, on utilise le mot clé extends
◼ la classe héritière hérite de toutes les méthodes de l’autre classe
✓ Exemple : class Voiture{
constructor(lenom){
[Link] = lenom;
}
present(){
return je possède une + [Link];
}
}
ASSALE Adjé Louis JavaScript 5
JavaScript
◼Les Classes
• Héritage de classes
✓ Exemple : class Model extends Voiture{
constructor(lenom, lemodel){
super(lenom);
[Link] = lemodel;
La méthode super() se }
réfère à la classe mère
affiche(){
return [Link]() + elle est une + [Link];}
}
let maVoiture = new Model(Ford, Mustang);
[Link](demo).innerHTML =
ASSALE Adjé Louis [Link](); 6
JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Définition et principe :
◼ Les getters et setters sont des méthodes permettant d’accéder aux
propriétés
◼ Pour ajouter des getters et setters, on utilise les mots clés get et set
◼ Le nom du getter/setter ne doit pas être le même que le nom de la
propriété
◼ Certains programmeurs utilisent le caractère « _ » avant le nom de la
propriété pour séparer le getter/setter de la propriété
◼ Bien que le getter/setter soit une méthode, on l’utilise comme une
propriété
ASSALE Adjé Louis JavaScript 7
JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 1 : création de getter/setter pour la propriété « carname »
◼ class Car{
constructor(brand){
this,carname = brand;
}
get cnam(){
return [Link];
} const maVoiture = new Car(Ford);
set cnam(x){ [Link](demo).innerHTML
[Link] = x; = [Link];
}
}
ASSALE Adjé Louis JavaScript 8
JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 2 : utilisation de « _ »
◼ class Car{
constructor(brand){
this,_carname = brand;
}
get carname(){
return this._carname;
}
set carname(x){ const maVoiture = new Car(Ford);
this._carname = x; [Link](demo).innerHTML
} = [Link];
}
ASSALE Adjé Louis JavaScript 9
JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 3 : utilisation du setter
◼ class Car{
constructor(brand){
this,_carname = brand;
}
get carname(){
return this._carname;
} const maVoiture = new Car(Ford);
set carname(x){ [Link] = Volvo;
this._carname = x; [Link](demo).innerHTML
} = [Link];
}
ASSALE Adjé Louis JavaScript 10
JavaScript
◼Les Classes
• Méthodes statiques
✓ Principe :
◼ Les méthodes statiques se définissent dans la classe
◼ On ne peut pas appeler une méthode statique à partir d’une instance,
seulement à partir de la classe objet
◼ class Car{
constructor(name){
this,name = name;
} const maVoiture = new Car(Ford);
static hello(){ //appel de hello correct
return Hello!!; [Link](demo).innerHTML
} = [Link]();
}
ASSALE Adjé Louis JavaScript 11
Javascript
◼Travaux pratiques Nº1
• Exercices du fichier TD_ JavaScript_avancé
ASSALE Adjé Louis JavaScript 12
