Classes

SUCRE SYNTAXIQUE POUR UN CODE PLUS LISIBLE ET PLUS ACCESSIBLE

DÉCLARATION DE CLASSES

Finit les fonctions anonymes, les prototypes, Object.create. La création de classes a été extrèmement simplifiée. Il est maintenant possible d’utiliser des classes pour la création d’objet.

Les de?clarations de classes, contrairement aux déclarations de fonctions, ne sont pas hoisted (« remonte?es »), il faut donc les déclarées avant de les utiliser, sinon on obtiendra une referenceError.

Le corps de la classe est la parti contenu entre accolade, c’est le conteneur de l’objet: on y définit constructeur et méthode. Toutes les méthodes de la classe sont de simples fonctions à l’intérieur de la classe.
Le constructeur (constructor) est une méthode où tous les attributs et méthodes propes à un objet pourront être créé ou instancoer si nécéssaire. Il ne peut y avoir qu’un constructeur

Les classes ajoutés en ES6 sont un « sucre syntaxique » par rapport à l’héritage prototypal: il n’y a pas eu l’introduction d’un nouveau modèle d’héritage en JS mais une simplification de la syntaxe permettant la création et la manipluation d’objet en javascript.
Source

    // class en ES5 

    var Info = function( date, title) {
            this.date = date;
            this.title = title;
    }

    // protoype
    Info.prototype.getInfo = function() {
        return ("La nouvelle du jour est" + this.title " ( " + this.date + " )");
    }

    // instanciation
    var info = new Info('Il fait beau !', '20/05/2017');

    // appel de la méthode getInfo()
    info.getInfo();


    // ES6
    // class
    class Info {

        // méthode constructeur
        constructor(date, title){
            this.date = date;
            this.title = title;
        }

        getInfo(){
            const yolo = `
                La nouvelle du jour est ${this.title} (${this.date});
            `;
            return yolo;
        }

    }

    // instanciation
    const info = new Info('Il fait beau !', '20/05/2017')

    // appel de la méthode getInfo()
    info.getInfo();


Une classe peut avoir un constructeur (constructor), il est appelé à la création d’un nouvel objet avec le mot clé new.
Une classe peut avoir des attributs et des méthodes statiques. Ces méthodes statiques ne peuvent être appelé que sur la classe directement.

    // ES6

    class Carma {
        static defaultMotto() {
            return 'Yolo';
        }
    }

    const motto = Carma.defaultTitle(); // yolo

ACCESSEURS (GETTERS, SETTERS)

Une classe peut avoir des accesseurs (getters, setters).

    // ES6

    class CarmaVox {
        
        // constuctor
        constructor(user, choice) {
            this.user = user;
            this.choice = choice;
        }

        sayMotto() {
            return ` ${this.choice} by ${this.user}`;
        }

        get motto() {
            return this.choice;
        }

        set motto(value) {
            return this.choice = value;
        }

    }

    // création d'un nouvel objet
    const user666 = new CarmaVox('John Constantine', 'L\'enfer est pavé de bonnes intentions');

    // appel de méthode
    user666.sayMotto();

    // getters
    console.log( user666.motto ); // L'enfer est pavé de bonnes intentions

    // setters
    user666.motto = 'Le diable est dans les détails'

    // getters
    console.log( user666.motto ); //  Le diable est dans les détails

HÉRITAGE

L’héritage est bien sur possible en ES6. Pour qu’une sous classe hérite d’une autre classe on utilisera le mot clé extends

Le mot clé super est utilisé comme super contructeur. Il permet d’appeler et d’avoir accès aux méthodes du parent. Mais on peut ausdsi les redéfinir.


    // ES6
    class Animal { 

        constructor(name) {
            this.name = name;
        }

        speed() {
            return 1000; 
        }
    }

    class Unicorn extends Animal {
        constructor(name, swag){
            super(name);
            this.swag = swag;
        }
    }

    const carmaLicorn = new Unicorn('Parrot', 'blue');

    console.log(carmaLicorn.speed()); // 1000

A voir : préférez la composition our (l’héritage multiple) à l’héritage simple : https://www.youtube.com/watch?v=wfMtDGfHWpA

PS: le mode strict est automatiquement activé dans le corps des classes et leurs déclarations. Il n’est donc pas nécessaire de le rajouter manuellement.