Easy-Micro [ POO JAVASCRIPT - Classes Javascript ] - Formations informatiques pour entreprises

POO JavaScript
Classes Javascript
La programmation orientée objet en Javascript

Manipulez des classes Javascript

La construction d'un objet à la main, par la notation à accolades vue précédemment, convient bien à des objets simples et uniques. Mais vous aurez souvent besoin de beaucoup d'objets du même type. C'est là que les classes sont utiles. Comme expliqué précédemment, une classe est un modèle pour un objet dans le code. Elle permet de construire plusieurs objets du même type (appelés instances de la même classe) plus facilement, rapidement et en toute fiabilité.

class Livre {
    constructor(titre, auteur, pages, dateEdition) {
        this.titre = titre;
        this.auteur = auteur;
        this.pages = pages;
        this.dateEdition = dateEdition;
    }
}

Le constructor d'une classe est la fonction qui est appelée quand on crée une nouvelle instance de cette classe avec le mot clé new.

Maintenant que la classe est terminée, vous pouvez créer des instances par le mot clé new :

monLivre1 = new Livre("Harry Potter", "J. K. Rowling", 200, 2001);
monLivre2 = new Livre("L'Histoire de Tao", "Will Alexander", 250, 1985);
monLivre3 = new Livre("L'Histoire de Tao 2 ", "Will Alexander", 300, 1989);

Avec une classe Livre, vous pouvez créer rapidement de nouveaux objets Livre. L'opérateur new permet donc de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur). > Voir cet exemple Easy-Micro

Méthodes d'instance afficheLivre()

Ajouter cette méthode afficheLivre() à votre classe (un <ul id="listeBouquin"> existe dans la page HTML)

afficheLivre() {
        let getliste = document.getElementById('listeBouquin');
        getliste.innerHTML = "<li>Titre de l'ouvrage : " + this.titre + "</li>";
        getliste.innerHTML += "<li>Auteur de l'ouvrage : " + this.auteur + "</li>";
        getliste.innerHTML += "<li>Nombre de pages : " + this.pages + "</li>";
        getliste.innerHTML += "<li>Date de l'ouvrage : " + this.dateEdition + "</li>";
    }

Pour utiliser cette méthode afficheLivre() :

monLivre1.afficheLivre();

Afficher tous les livres

//fonction qui affiche tous les livres créés
let mesLivres = [];
let nbre = 4; // monLivre.length
    for(let i = 1; i < nbre; i++) {
        mesLivres[i] = eval('monLivre' + i);
        console.log("Titre de l'ouvrage : " + mesLivres[i].titre);
        console.log("Auteur de l'ouvrage : " + mesLivres[i].auteur);
        console.log("Nombre de pages : " + mesLivres[i].pages);
        console.log("Date de l'ouvrage : " + mesLivres[i].dateEdition);
        //console.log("Age de l'ouvrage : " + mesLivres[i].calculDeLAge());
    }

Méthodes d'instance calculDeLAge()

Une méthode d'instance est une fonction faisant partie d'une classe

Ajouter cette méthode calculDeLAge() à votre classe

calculDeLAge() {
        let ladate = new Date();
        this.dateEdition = ladate.getFullYear() - this.dateEdition;
        console.log("Age du livre " + this.titre + " : " + this.dateEdition + " ans");
    }

Pour utiliser cette méthode calculDeLAge() :

monLivre1.calculDeLAge();

Méthodes d'instance afficheTousLesLivres()

Une méthode d'instance est une fonction faisant partie d'une classe

Ajouter cette méthode afficheTousLesLivres() à votre classe

afficheTousLesLivres(nbre) {
        let mesLivres = [];
        for(let i = 1; i < nbre; i++) {
            mesLivres[i] = eval('monLivre' + i);
            console.log("Titre de l'ouvrage : " + mesLivres[i].titre);
        }
    }

Pour utiliser cette méthode afficheTousLesLivres() :

monLivre1.afficheTousLesLivres(4);

Méthodes d'instance BankAccount

Une méthode d'instance est une fonction faisant partie d'une classe

Ajouter une méthode à votre classe

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this.balance = balance;
    }
    showBalance() {
        console.log("Solde: " + this.balance + " EUR");
    }
}

const compteFB = new BankAccount("François Bisch", 500);

compteFB.showBalance(); // imprime "Solde: 500 EUR" à la console

On aurais pu afficher son solde par compteFB.balance mais ici on a en plus la une mise en forme !

Ajouter deux autre méthodes à votre classe (dépôt et retrait)

deposit(amount) {
        console.log("Dépôt de " + amount + " EUR");
        this.balance += amount;
        this.showBalance();
    }
    
    withdraw(amount) {
        if (amount > this.balance) {
            console.log("Retrait refusé !");
        } else {
            console.log("Retrait de " + amount + " EUR");
            this.balance -= amount;
            this.showBalance();
        }
    }

Code à rajouter dans la class BankAccount à la suite de la première méthode. Un compteFB.deposit(600); vous rendra plus riche :-)

< >