Classes JavaScript

ECMAScript 2015, également connu sous le nom d'ES6, a introduit les classes JavaScript.

Les classes JavaScript sont des modèles pour les objets JavaScript.

Syntaxe des classes JavaScript

Utilisez le mot-clé class pour créer une classe.

Ajoutez toujours une méthode nommée constructor() :

Syntaxe

class ClassName {
constructor() { ... }
}

Exemple

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}

L'exemple ci-dessus crée une classe nommée "Car".

La classe a deux propriétés initiales : "name" et "year".

Une classe JavaScript n'est pas un objet.

C'est un modèle pour les objets JavaScript.


Utiliser une classe

Lorsque vous avez une classe, vous pouvez l'utiliser pour créer des objets :

Exemple

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Essayez-le vous-même »

L'exemple ci-dessus utilise la classe Car pour créer deux objets Car .

La méthode constructeur est appelée automatiquement lorsqu'un nouvel objet est créé.


La méthode constructeur

La méthode constructeur est une méthode spéciale :

  • Elle doit avoir le nom exact "constructor"
  • Elle est exécutée automatiquement lorsqu'un nouvel objet est créé
  • Elle est utilisée pour initialiser les propriétés de l'objet

Si vous ne définissez pas de méthode constructeur, JavaScript ajoutera une méthode constructeur vide.



Méthodes de classe

Les méthodes de classe sont créées avec la même syntaxe que les méthodes d'objet.

Utilisez le mot-clé class pour créer une classe.

Ajoutez toujours une méthode constructor() .

Ensuite, ajoutez n'importe quel nombre de méthodes.

Syntaxe

class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}

Créez une méthode de classe nommée "age", qui retourne l'âge de la voiture :

Exemple

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Ma voiture a " + myCar.age() + " ans.";

Essayez-le vous-même »

Vous pouvez envoyer des paramètres aux méthodes de classe :

Exemple

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Ma voiture a " + myCar.age(year) + " ans.";

Essayez-le vous-même »


"use strict"

La syntaxe des classes doit être écrite en suivant La Directive "use strict" .

Vous obtiendrez une erreur si vous ne suivez pas les règles du "mode strict".

Exemple

En "mode strict", vous obtiendrez une erreur si vous utilisez une variable sans la déclarer :

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // Cela ne fonctionnera pas
const date = new Date(); // Cela fonctionnera
return date.getFullYear() - this.year;
}
}
Essayez-le vous-même »