La programmation orientée objet avec Javascript

Même si ce n'est pas un langage 100% objet, le javascript permet beaucoup de choses !

Cet article n'a pas pour but de résumer les principes de la programmation orientée objet, d'autres s'en sont déjà chargé avec talent. Il a pour objectif de permettre un démarrage rapide aux développeurs qui ont déjà des notions en POO et qui souhaitent les appliquer au JS.

Créer un objet

Créer un objet est vraiment facile. Voici comment créer un objet "vehicule" contenant un propriété "name" et une fonction "avancer" :

const vehicule={
  name:"Voiture blanche",
  avancer : function(distance){
    alert(this.name + " avance de " + distance+" km") 
  }
}

vehicule.avancer(45)
//la console affiche "Voiture blanche avance de 45 km"

Autre méthode pour créer un objet avec le mot Object()

vehicule= new Object()
vehicule.name="Voiture blanche"
vehicule.avancer = function(distance){
    console.log(this.name + " avance de " + distance+" km") 
  }

vehicule.avancer(45)
//la console affiche "Voiture blanche avance de 45 km"

Créer un objet à partir d'un autre (qui sera identique au premier) avec Object.create() :

vehicule= new Object()
vehicule.name="Voiture blanche"
vehicule.avancer = function(distance){
    console.log(this.name + " avance de " + distance+" km") 
  }

vehicule2=Object.create(vehicule)
console.log(vehicule.name + " et "+vehicule2.name )
//affiche Voiture blanche et Voiture blanche

vehicule2.name="Moto noire"
console.log(vehicule.name + " et "+vehicule2.name )
//affiche Voiture blanche et Moto noire

Définir une classe

La façon "constructeur"

En Javascript, les constructeurs sont des fonctions.

Définition de ma classe :

function Vehicule(name){
  this.name = name
  this.avancer=function(distanceKm){
    alert(this.name + " avance de "+distanceKm+" km")
  }
}

Instanciation de ma classe et exécution d'un fonction :

const voiture=new Vehicule("Voiture blanche")
voiture.avancer(45) 
//la console affiche "Voiture blanche avance de 45 km"

La façon "class"

Il est possible d'avoir une approche plus "traditionnelle" de la création de classe en utilisant le mot "class". Attention il s'agit là de "sucre synthaxique" visant à aider les développeurs venant d'autres langages. En effet il s'agit de la même chose que dans le point précédent.

class Vehicule{
  constructor(name){
     this.name = name
  }
 
  avancer(distanceKm){
    console.log(this.name + " avance de "+distanceKm+" km")
  }
}

const voiture=new Vehicule("Voiture blanche")
voiture.avancer(45) 
//la console affiche "Voiture blanche avance de 45 km"

L'héritage (où créer une sous classe)

On utilise pour cela le mot "extends". Un exemple vaut mieux qu'un long discours :

//Ma classe parente
class Vehicule{
  constructor(name){
     this.name = name
  }
 
  avancer(distanceKm){
    console.log(this.name + " avance de "+distanceKm+" km")
  }
}

//Ma sous-classe Camion qui est aussi un véhicule
class Camion extends Vehicule{

  klaxonner(){
    console.log("TUUUUUTUUUUUUUUT !!!!")
  }
}

//Ma deuxième sous-classe Avion qui est aussi un véhicule
class Avion extends Vehicule{
  decoller(){
    console.log(this.name + " vient de décoller !" )
  }
}

Avion.prototype.atterrir=function(){
  console.log(this.name + " vient d'atterrir." )
}

const camionMercedes=new Camion("Camion Mercedes")
camionMercedes.avancer(45)
camionMercedes.klaxonner()
//la console affiche "Camion Mercedes avance de 45 km avance de 45 km"
//la console affiche "TUUUUUTUUUUUUUUT !!!!"

const avionAirBus=new Avion("Avion Airbus")
avionAirBus.decoller()
avionAirBus.avancer(600)
avionAirBus.atterrir()
//"Avion Airbus vient de décoller !"
//"Avion Airbus avance de 600 km"
//"Avion Airbus vient d'atterrir."

Une classe parent "Vehicule" possède deux sous-classes qui ont leur propres méthodes : Un camion peut klaxonner et un avion peut décoller et atterrir.

On voit aussi l'utilisation de "Avion.prototype.atterrir = ... " qui permet d'ajouter une méthode à la sous-classe Avion.

C'est la fin de ce guide non exhaustif sur la programmation objet en Javascript. Il s'agit de la base, nous verrons quelques finesses plus tard avec les concepts SOLID appliqués à Javascript.