Classe JavaScript

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

Les classes JavaScript sont des modèles d'objets JavaScript.

Classe JavaScript

Syntaxe

Utilisez le mot-clé class Créez une classe.

Ajoutez toujours le nom constructor() des méthodes :

Syntaxe

class NomDeClasse {
  constructor() { ... }
}

une instance

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

Dans cet exemple, une classe nommée "Car" a été créée.

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

Classe JavaScriptCe n'est pasobjet.

C'est juste un objet JavaScript.Modèle.

Utilisation de la classe

Si vous avez une classe, vous pouvez utiliser cette classe pour créer des objets :

une instance

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

Essayez-le vous-même

Dans cet exemple, on utilise Classe Cardeux ont été créés Objet Car.

La méthode constructor est appelée automatiquement lors de la création d'un nouveau objet.

Méthode constructeur

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

  • Elle doit avoir le nom exact de "constructeur"
  • Exécutée automatiquement lors de la création d'un nouveau objet
  • Utilisée pour initialiser les propriétés de l'objet
  • Si la méthode constructeur n'est pas définie, JavaScript ajoutera une méthode constructeur vide.

Méthodes de classe

Création de méthodes de classe

Syntaxe

comme pour les méthodes d'objet.

Utilisez le mot-clé class Créez une classe.

Ajoutez toujours constructor() méthodes.

Ensuite, ajoutez un nombre quelconque de méthodes.

Syntaxe

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

Créez une méthode de classe nommée "age" qui retourne l'âge du véhicule :

une instance

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mon voiture est " + myCar.age() + " ans.";

Essayez-le vous-même

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

une instance

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Mon voiture a " + myCar.age(year) + " ans.";

Essayez-le vous-même

Support du navigateur

Le tableau suivant indique la première version de navigateur qui prend en charge pleinement les classes JavaScript :

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mars 2016 Juillet 2015 Mars 2016 Octobre 2015 Mars 2016

Dans ce tutoriel, vous apprendrez davantage sur les classes JavaScript.