Cours JavaScript


Table des matières

    Afficher la table des matières

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 de classe 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 : « nom » et « année ».

Une classe JavaScript n'est pas un objet.

Il s'agit d'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 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

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

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

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

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 :

  • Il doit avoir le nom exact de « constructeur »

  • Il est exécuté automatiquement lorsqu'un nouvel objet est créé

  • Il est utilisé 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().

Ajoutez ensuite un certain nombre de méthodes.

Syntaxe

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

Créez une méthode Class nommée "age", qui renvoie 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 =
"My car is " + myCar.age() + " years old.";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
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 =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

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

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=
"My car is 
  " + myCar.age(year) + " years old."; 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
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=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

Prise en charge du navigateur

Le tableau suivant définit la première version du navigateur avec une prise en charge complète de Cours en JavaScript :

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016

Vous en apprendrez beaucoup plus sur les classes JavaScript plus loin dans ce didacticiel.