Objets et Classes Javascript pour débutants / Programmation orientée objet en Javascript (Public/Private/Static)

Voici une traduction d'un article fort intéressant publié sur le blog de Komodo Média.

Cet article prend pour acquis que vous connaissez les bases de javascript et savez ce qu'est la programmation orientée objet.

Principe de base des classes en Javascript

Voici comment déclarer une classe et création d'une instance de celle-ci :

//Déclaration de la classe
function MaClasse() {
//...
}

//Création d'une instance de la classe
var classe = new MaClasse();

//Création d'une deuxième instance de la classe
var classe2 = new MaClasse();

//...

Variables(propriétés) et Fonctions(méthodes) publiques

Une variable ou une fonction publique est accessible à l'intérieur d'une classe et lorsque vous créez une instance de votre classe.

function MaClasse() {
//...
}

//Déclaration d'une variable publique
MaClasse.prototype.variablePublique = "Ceci est une variable publique";


//Déclaration d'une fonction publique
MaClasse.prototype.fonctionPublique = function() {
alert(this.variablePublique);
};

//Création d'une instance de la classe
var classe = new MaClasse();

//Utilisation d'une fonction publique
classe.fonctionPublique(); //Renvoie le texte contenu dans classe.variablePublique

//Vous pouvez aussi modifier la valeur d'une variable publique
classe.variablePublique = "Nouveau message";

classe.fonctionPublique(); //Renvoie "Nouveau message"

Variables(propriétés) et Fonctions(méthodes) privées

Les variables et fonctions privées sont accessibles seulement à l'intérieur de la classe et ne sont pas accessibles par l'instance de votre classe.

//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une variable publique
 this.variablePublique = "Ceci est une variable publique";

 //Déclaration d'une fonction privée
 var fonctionPrivee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivee(); //retourne une erreur car la fonction est privée

alert(classe.variablePrivee); //retourne une ereur car la variable est privée

alert(classe.variablePublique); //renvoie "Ceci est une variable publique"

Variables(propriétés) et Fonctions(méthodes) statiques

Les variables et fonctions statiques n'ont pas accès au variables/fonctions privées et publiques.

//Déclaration de la classe
function MaClasse() {

 //...

}

MaClasse.variableStatique = "Ceci est une variable statique";


MaClasse.fonctionStatique = function () {
  
  alert(MaClasse.variableStatique);

};

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionStatique(); //retourne une erreur car la fonction est statique est invisible par une instance de la classe

//Une fonction statique est accessible directement à partir de la classe
MaClasse.fonctionStatique(); // Renvoie "Ceci est une variable statique"; 

Variables(propriétés) et Fonctions(méthodes) privilégiées

Les variables et fonctions privilégiées ont accès aux variables/fonctions privées et publiques.

//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une fonction privée
 this.fonctionPrivilegiee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivilegiee(); //Renvoie la valeur de la variable privée

Voilà, vous savez maintenant comment utiliser tout le pouvoir de la programmation orientée objet avec Javascript.