Classe JavaScript

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

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

Grammaire des classes JavaScript

Utilisez toujours lakeyword class Créez une classe.

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

Syntaxe

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

Instance

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

L'exemple suivant crée une classe nommée "Car".

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

Classe JavaScriptPasObjet.

C'est un objet JavaScriptModèle.

Utilisation de la classe

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

Instance

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

Essayer vous-même

L'exemple suivant utilise Classe Carpour en créer deux Objet Car.

Le constructeur est appelé automatiquement lors de la création d'un nouveau objet (constructeur de méthode).

Constructeur

Le constructeur est une méthode spéciale :

  • Il doit avoir le nom précis de "constructor"
  • Exécuté automatiquement lors de la création d'un nouveau objet
  • Utilisé pour initialiser les propriétés de l'objet
  • Si vous n'avez pas défini de constructeur, JavaScript ajoutera un constructeur vide.

Méthodes de classe

La syntaxe de la méthode de classe est la même que celle de la méthode d'objet.

Utilisez toujours lakeyword class pour créer une classe.

Ajoutez toujours la méthode constructor().

Ensuite, ajoutez un nombre quelconque 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'année du véhicule :

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.";

Essayer vous-même

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

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 est " + myCar.age(year) + " ans.";

Essayer vous-même

Support du navigateur

Le tableau suivant indique la première version de navigateur complètement supportant 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

"use strict"

La syntaxe dans une classe doit être écrite en 'mode strict'.

Si vous ne suivez pas les règles du 'mode strict', vous recevrez un message d'erreur.

Instance

Sous le 'mode strict', si vous utilisez une variable sans la déclarer, vous obtiendrez une erreur :

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Cela ne fonctionnera pas
    let date = new Date(); // Cela fonctionnera
    return date.getFullYear() - this.year;
  }
}

Essayer vous-même

Dans Mode strict JS En apprendre davantage sur le 'mode strict' ici.