Classes en es6

Les classes en es6 sont du sucre syntaxique au-dessus des prototypes.

syntaxe

/* pour créer une classe :
mot-clé réservé class suivi du nom voulu de classe
lui même suivi d'un bloc de code délimité
par des accolades ouvrantes et fermantes */
class Ma_classe {
   /* la classe doit contenir une méthode constructor */
   constructor () {
      /* le constructeur est appelé
      lors de la création d'une occurence avec new */
      this.valeur = 'bonjour';
   }

   imprimer_valeur () {
      console.log( this.valeur );
   }

   changer_valeur( valeur ) {
      this.valeur = valeur;
   }
}

var a = new Ma_classe();
a.imprimer_valeur(); // bonjour
a.changer_valeur( 'au revoir' );
a.imprimer_valeur(); // au revoir

Exemple

class Emoji {
   constructor ( si_texte = false ) {
      if ( si_texte ) {
         this.emojis = [ ':)', ':D', ':p', '^^' ]
      } else {
         this.emojis = [ '🙂', '😀', '🤤', '😄' ];
      }
      this.element = document.createElement('p');
      this.changer_emoji();
      document.body.appendChild( this.element );
   }
   changer_emoji () {
      this.element.innerHTML = this.emojis[ Math.min( Math.floor( Math.random() * this.emojis.length ), this.emojis.length - 1) ];
   }
}

var emoji = new Emoji();
emoji.changer_emoji();

Exercice

Dans l’éditeur de code de votre choix, créer un script en suivant les instructions ci-dessous, et l’exécuter soit dans la console du navigateur sur un onglet vide, soit dans un éditeur de code en ligne avec prévisualisation :

// Créez une class Emoji

// créez un constructeur qui prend deux paramètres : // un paramètre nommé emoji dont la valeur par défaut est 🙂, un autre appelé taille dont la valeur par défaut est 16

// enregistrez les paramètres dans les propriétés this.emoji et this.taille

// Dans ce constructeur, créez un élément de type p

// assignez-lui un style in-line indiquant que la propriété font-size (fontSize) est égale à this.taille (+ “px”);

// assignez-lui comme contenu this.emoji

// ajoutez-le au DOM

// ajouter à la classe une méthode stop qui modifie le contenu de l’élément pour le remplacer par l’emoji 🛑

// créez une occurrence d’Emoji avec aucun paramètre

// créez une occurrence d’Emoji avec comme paramètres undefined et 30

// créez une occurrence d’Emoji avec comme paramètre 🐈

// appelez la méthode stop sur le première émoji créé