JavaScript ES6 – Classes et Modules

Introduction

Avant de commencer ce nouvel article, nous vous invitons à consulter ce tutoriel dans lequel nous avons parlé de quelques fonctionnalités apportées par la nouvelle version JavaScriptES6, maintenant nous allons toucher un peu d’avantage à cette nouvelle version qui a introduit une nouvelle forme pour l’utilisation des classes, ainsi, nous allons voir la notion de Modules.
Comme le sait tout le monde, JavaScript est bien un langage orienté objet, mais en avant, on ne pouvait pas vraiment parler de Classes mais plutôt de Type d’objets déclarés à l’aide du mot-clé function. A partir de 2015 (lancement de JavaScript ES6) il est désormais possible d’utiliser le mot-clé class pour créer une classe et le mot-clé extends pour faire l’héritage.

Déclaration d’une classe

Oubliez les fonctions anonymes et les prototypes, la sémantique a pris le relais, la définition simple d’une classe est réalisé à l’aide du mot-clé class suivis du nom de la classe (Point3D dans notre exemple) :

class Point3D {
 constructor(x, y,z) {
 this.x = x;
 this.y = y;
 this.z = z;
 }
toString(){
return 'Point[${this.x},${ this.y},${ this.z}] ';
}
}
// instantiation 
let point = new point(1,2,-3);
// appel de la méthode toString
console.log(point.toString); // -> Point[1,2,-3]

Remontée des déclarations (hoisting)

Les déclarations de fonctions (anciennes classes) et remontés dans le code. En revanche, ce n’est pas le cas pour la déclaration des classes, il est nécessaire de déclarer une classe avant de l’instancier, sinon vous obtenez une ReferenceError.

Version ES5 :

var point = new Point3D(1,2,-3) ; // -> possible
 function Point3D (x, y,z) {
 this.x = x;
 this.y = y;
 this.z = z;
}

Version ES6 :

var point = new Point3D(1,2,-3) ; // -> ReferenceError 
class Point3D {
 constructor(x, y,z) {
 this.x = x;
 this.y = y;
 this.z = z;
 }
}

Les expressions de classes

Comme pour les fonctions, il existe deux types de définitions de classe ou bien deux façons de définir une classe: les déclarations de classe et les expressions de classe.
Il est possible d’utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l’expression, ce nom ne sera accessible que depuis le corps de la classe.

// anonyme
var Point3D = class {
 constructor(x, y,z) {
 this.x = x;
 this.y = y;
 this.z = z;
 }
};
// nommée
var MonPoint = class Point3D {
 constructor(x, y,z) {
 this.x = x;
 this.y = y;
 this.z = z;
 }
};
// let point = new Point3D(1,2,-3) -> ReferenceError : Me is not defined.
// Il faut utiliser MonPoint.

Corps d’une classe et définition des méthodes

Le corps d’une classe est la partie contenue entre les accolades. Un corps de classe ne peut contenir que des méthodes, mais pas des propriétés de données. Les prototypes ayant des propriétés de données sont généralement considérés comme un anti-modèle, donc cela impose une meilleure pratique.

La méthode constructor() est une méthode spéciale (pseudo-méthode) qui permet d’initialiser et de créer les objets, elle a des caractéristiques que le constructeur d’une fonction normale n’a pas (par exp : la possibilité d’appeler le super constructeur à l’aide de super()). Le constructeur n’est invoqué qu’à l’aide de l’opérateur new (chose qui n’est pas obligatoire avec l’ancienne notion).

Le mot-clé static permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une instance donnée (ces méthodes ne peuvent être appelées « depuis » une instance).

class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
static distance(a, b) {
 const dx = a.x - b.x;
 const dy = a.y - b.y;
 return Math.hypot(dx, dy);
// Math.hypot(3,5) = sqrt(3^2,5^2);
 }
}
let p1 = new Point(5, 5);
let p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));

L’héritage :

La nouvelle version ES6 a introduit aussi la notion de l’héritage simple, au lieu de l’héritage prototypage. L’héritage est réalisé à l’aide du mot-clé extends, la classe qui étend la classe de base (classe mère) est appelée sous-classs ou bien classe fille :

class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
 toString() {
console.log(“classe mère”);
 return '${this.x} , ${this.y}';
 }
}
class Point3D extends Point{
 constructor(x, y,z) {
super(x,y);
 this.z = z; }
 toString() {
console.log(“classe fille”);
 return '(${super.toString} , ${this.z})';
 }
}
// let point = new Point3D(1,2,-3);
// console.log(point.toString()); ->classe fille, classe mère, (1,2,-3)

Les Modules

Les modules est une nouveauté génial apportée par le standard ES6. La syntaxe est simple à utiliser et simple à lire. En utilisant cette syntaxe, vous pouvez exporter d’un fichier à l’autre des variables, des classes, des fonctions ou des objets. Voici un exemple du fonctionnement :

//----------export.js-----------
 var accessible = 1 ;
var notAccessible = 2 ;
export var accessible ;

//---------- imort.js-----------
import * as otherfile from “export.js”
console.log(otherfile.accessible); // 1 
console.log(otherfile.notAccessible); // undefined

Il existe deux types d’exportations: les exportations nommées (plusieurs par module) et les exportations par défaut (une par module) :

Exportations nommées (plusieurs par module)

Un module peut exporter plusieurs choses en préfixant leurs déclarations avec le mot-clé export. Ces exportations se distinguent par leur nom et s’appellent des exportations nommées

//------ myLib.js ------
export var sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}
//------ main.js ------
import * as myLib from 'lib.js';
console.log(myLib.square(11)); // 121
console.log(myLib.diag(4, 3)); // 5

vous pouvez également importer le module entier et référencer les exportations par les noms des propriétés :

 //------ main.js ------
import { square, diag } from 'lib.js';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Il est possible de ne pas spécifier l’extension ‘.js’ et se restreindre au nom du fichier :

import { square, diag } from 'lib';

Les exportations par défaut (une par module)

Ce type est utilisé pour exporté une seule valeur. Le module suivant est une fonction unique, l’exportation s’effectue comme suit :

 //------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

Un module peuvent être aussi une classe :

 
//------ MyClass.js ------
export default class { ... };
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

Remarques :
– L’opérande de la déclaration d’exportation par défaut est une expression, il n’a souvent pas de nom. Au lieu de cela, il doit être identifié par le nom de son module.
– Il est possible do combiner les deux types d’exportations, nommée et par défaut .

Voir plus sur Ici et Ici