Programmation orientée objet en Javascript
La programmation orientée objet est possible sans utilisation de framework particulier, on peut très bien créer des classes et les instancier directement et nativement.
Création d'une Classe Javascript
Pour faire un exemple parlant nous allons créer la même Classe dans un langage très connu de tous : PHP
Exemple PHP :
Il s'agira d'une classe tout simple qui bonjour aux utilisateurs, en PHP cela donnerait :
<?php
class Exemple
{
var $utilisateur;
/**
* Constructeur : initialise l'attribut utilisateur
*/
function Exemple()
{
$this->utilisateur = "Stéphane";
}
function DitBonjour()
{
echo "Bonjour ".$this->utilisateur;
}
}
?>
Le mot clé Class existe en PHP donc pas de soucis particulier; pour instancier et utiliser cette classe, on fera simplement :
$oExemple = new Exemple(); $oExemple->DitBonjour(); //affiche "Bonjour Stéphane"
En Javascript :
C'est différent car le mot clé class n'existe pas, on peut obtenir la même chose de la manière suivante :
function Exemple()
{
var utilisateur;
this.DitBonjour = function()
{
document.write( "Bonjour "+ this.utilisateur);
}
/* initialisation de l'attribut à la fin
* (Constructeur)
*/
this.utilisateur = "Stéphane";
}
Notez qu'il n'y a pas de Méthode constructeur explicite : la Méthode Exemple, qui est notre classe, construit ses propres instances grâce au mot clé new, comme dans les autres langages orientés objet. Le code se lisant de haut en bas, on initialise l'attribut à la fin de la Méthode exemple; cela n'a aucune importance ici, mais cela peut en avoir si vous utilisez des méthodes de la classe Exemple pour l'initialiser vos objets. Il est important que les méthodes aient été déclarées au moment ou elles sont appelées.
Exemple est donc à la fois une méthode, et une classe, on peut l'instancier si l'on souhaite, voici l'utilisation :
var oExemple = new Exemple(); oExemple.DitBonjour(); // affichera "Bonjour Stéphane"
On peut donc développer tout à fait "normalement" et facilement Objet en javascript.
Commentaires 
Ajouter un commentaire
Flux RSS
Je voudrais créer une classe Infobulle.
Comment faire en sorte que toutes ses instances soient des éléments Html ?
Comment faire en sorte que toutes ses instances soient des éléments Html ayant un tagName déterminé ?
Merci de votre aide !
Un autre petit bout de code pour donner un exemple concret de constructeur :
function Human(username)
{
var username;
this.sayHello = function(){
alert( "Hello, I am "+ this.username);
}
this.username = username;
}
var e = new Human("Charles");
e.sayHello();
Cela dit, les technos objets nous ont changé la vie grâce à des mécanismes beaucoup plus puissants que de la simple encapsulation : héritage, polymorphisme, design patterns, etc.
Dommage, que Javascript ne permettent pas tout cela...
Juste pour info il me semble que dans la déclaration de te class en Javascript il faut mettre les paranthèse sinon t'a une erreur :
function Exemple() /* correction */
{
var utilisateur;
this.DitBonjour = function()
{
document.write( "Bonjour "+ this.utilisateur);
}
/* initialisation de l'attribut à la fin
* (Constructeur)
*/
this.utilisateur = "Stéphane";
}