Tutoriel rapide pour utiliser les classes et l’héritage en JavaScript

Aujourd’hui nous verrons ensemble comment peut on créer des classes en Javascript et en suite comment utiliser l’héritage.

Avant tout, il faut savoir qu’en Javascript les classes ne sont pas supportés d’une façon native. Ceci dit, nous utiliserons les fonctions pour simuler les classes et les prototypes pour l’héritage.

Nous commençons d’abord par la création d’une classe qui sera la base pour les prochaines classe. Dans notre exemple la classe de base servira pour définir les fonctionnalités de base d’un laptop. Nous chercherons à connaitre sa marque (Brand) et la taille de son écran ( Screen size). Le constructeur sera utiliser pour initialiser ces valeurs.

function Laptop (brand, screenSize) {
    this.brand = brand;
    this.screenSize = screenSize;
}

 

Pour rendre cette exemple plus lisible pour le développeur, nous rajoutons les deux méthodes suivantes : La première pour récupérer la marque et la deuxième la taille de l’écran.

Laptop.prototype.getBrand = function() {
    console.log('Brand: ' + this.brand);
}
Laptop.prototype.getScreenSize = function() {
    console.log('Screen size: ' + this.screenSize);
}

La Laptop classe est complète à présent.

function Laptop (brand, screenSize) {
    this.brand = brand;
    this.screenSize = screenSize;
}
Laptop.prototype.getBrand = function() {
    console.log('Brand: ' + this.brand);
}
Laptop.prototype.getScreenSize = function() {
    console.log('Screen size: ' + this.screenSize);
}
var laptop = new Laptop('Apple', 15);
laptop.getBrand();
laptop.getScreenSize();

Nous allons utilisé Node.js pour exécuter cet exemple :

$ node app.js

Results:

Brand: Apple
Screen size: 15

Rien de particulier pour le moment ! Une classe avec deux getters. Passons aux choses sérieuses. Disons que nous voulons hériter la classe Laptop par la classe MacBookPro qui aura quelques données spécifique comme le retina screen. La première étape dans ce cas la est de définir une nouvelle classe qui prendra un constructeur booléen :

function MacBookPro (hasRetina) {
    this.hasRetina = hasRetina;
}

Nous rajouterons aussi un getter pour la propriété  hasRetina.

Laptop.prototype.hasRetinaScreen = function() {
    console.log('Has Retina Screen: ' + this.hasRetina);
}

Maintenant la voici la partie la plus interssante de ce tutoriel. Comment la classe MacBookPro peut hériter les fonctionnalités de la classe Laptop class into the MacBookPro ? Voici les lignes de code à utiliser :

MacBookPro.prototype = new Laptop('Apple', 15);

Le code complet correspond :

function Laptop (brand, screenSize) {
    this.brand = brand;
    this.screenSize = screenSize;
}
Laptop.prototype.getBrand = function() {
    console.log('Brand: ' + this.brand);
}
Laptop.prototype.getScreenSize = function() {
    console.log('Screen size: ' + this.screenSize);
}
var laptop = new Laptop('Apple', 15);
laptop.getBrand();
laptop.getScreenSize();
function MacBookPro (hasRetina) {
    this.hasRetina = hasRetina;
}
Laptop.prototype.hasRetinaScreen = function() {
    console.log('Has Retina Screen: ' + this.hasRetina);
}
MacBookPro.prototype = new Laptop('Apple', 15);
var macBookPro = new MacBookPro(true);
macBookPro.getBrand();
macBookPro.getScreenSize();
macBookPro.hasRetinaScreen();

Results:

Brand: Apple
Screen size: 15
Has Retina Screen: true
Une petite Note : Si vous travaillez avec Node.js le lien suivant peut vous êtes utils utils.inherits.

Leave a comment