Développement web indépendant à Montpellier

Publié le lundi 16 mars 2009 10:02:26

Programmation orientée objet en Javascript

La programmation orientée objet est possible sans utilisation de 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 :

Exemple

Il s'agira d'une classe tout simple qui bonjour aux utilisateurs, en 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 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.

Notez cet article !

  • Actuellement 4 sur 5 étoiles
  • 1
  • 2
  • 3
  • 4
  • 5

Note : 3.9/5 (19 notes attribuées)

Merci d'avoir participé !

Vous avez déjà noté cette page, vous ne pouvez la noter qu'une fois !

Votre note a été changée, merci de votre participation !

Bonne résolution ! j'arrête d'alourdir mes pages avec des boutons de partage, mais vous pouvez continuer de partager :-)

Commentaires

  1. Thank you for sharing this article.
    http://...ch-online/
    https:/...ellonline/
    http://...ch-online/
    http://...ge-online/
    http://...le-online/
    http://...ll-online/
    http://...ie-online/
    http://...rs-online/
    http://...us-online/
    http://...le-online/
    http://...ck-online/
    http://...rs-online/
    http://...nd-online/
    https:/...litonline/
    http://...er-online/
    http://...us-online/
    http://...nd-online/
    http://...by-online/
    https:/...oseonline/
    http://...rd-online/
    https:/...andercage/
    http://...an-online/
    http://...er-online/
    http://...an-online/
    https:/...ganonline/
    https:/...veronline/
    http://...fe-online/
    https:/...hegalaxy2/
    http://...-2-online/
    http://...-2-online/
    https:/...keronline/
    https:/...cleonline/
    https:/...ireonline/
    http://...ck-online/
    http://...re-online/
    http://...om-online/
    http://...om-online/
    http://...st-online/
    http://...rs-online/
    http://...es-online/
    http://...rd-online/
    http://...er-online/
    http://...by-online/
    http://...er-online/
    http://...rs-online/
    https:/...ersonline/
    http://...-2-online/
    http://...ch-online/
    http://...ss-online/
    http://...-2-online/
    http://...ie-online/
    http://...ge-online/
    https:/...alchapter/
    http://...ll-online/
    http://...by-online/
    https:/...aribbean5/
    http://...ll-online/
    http://...ge-online/
    http://...it-online/
    http://...ll-online/
    https:/...ifeonline/
    http://...nt-online/
    http://...ck-online/
    http://...an-online/
    https:/...astonline/
    http://...er-online/
    https:/...abyonline/
    http://...ed-online/
    http://...re-online/
    http://...fe-online/
    http://...ge-online/
    https:/...er2online/
    http://...nt-online/
    http://...-2-online/
    http://...st-online/
    http://...it-online/
    http://...fe-online/
    http://...le-online/
    https:/...fthesword/
    http://...-2-online/
    http://...st-online/
    http://...ge-online/
    https:/...andonline/
    https:/...allonline/
    https:/...ackonline/
    https:/...tchonline/
    http://...er-online/
    http://...se-online/
    https:/...vieonline/
    http://...er-online/
    https:/...arsonline/
    http://...er-online/
    http://...nd-online/
    https:/...domonline/
    http://...rd-online/
    http://...rs-online/
    http://...ll-online/
    http://...ss-online/
    http://...es-online/
    http://...ed-online/
    http://...ge-online/
    http://...es-online/
    https:/...stvillage/
    http://...ie-online/
    http://...rs-online/
    https:/...ousonline/
    http://...ss-online/
    http://...se-online/
    https:/...antonline/
    http://...ll-online/
    http://...it-online/
    http://...re-online/
    https:/...essonline/
    https:/...tedonline/
    http://...er-online/
    http://...se-online/
    http://...ed-online/
    http://...nt-online/
    http://...om-online/
    http://...us-online/
    Website is very nice and informative content

  2. Excellent site. Plenty of useful information here. I am sending it to some buddies ans additionally sharing in delicious. And naturally, thanks in your effort!

  3. Brian | appel de méthode |

    bonjour,

    j'utilise les librairies Paperjs.js et une classe que je créé moi-meme : Creergraphique.js, en espérant pouvoir utiliser les méthodes de Paperjs.js dans Creergraphique.js. Malheureusement, bien que je fasse charger Paperjs.js avant Creergraphique.js, il semble que Creergraphique.js n'ai pas connaissance des méthodes Paperjs.js.

    Je me demande comment faire....

  4. C'est la première fois que je découvre que Javascript permet de bénéficier de l'orienté objet. En plus de sa légèreté, Javascript peut être bien utile en tirant profit de la POO. Donc, on peut faire pas mal de chose côté client sans besoin de nous débrouiller côté serveur.

  5. Il y a-t-il des destructeurs pour le classes JavaScript ?

  6. jstux | Besoin d'exemple pour l'héritage |

    Bonjour

    "on peut faire de l'héritage en javascript. Il suffit d'utiliser un objet déjà créé dans le constructeur d'un autre :), et il héritera de toutes ses variables membresµ/fonctions, sans empêcher la surcharge."

    => Peux-tu donner un exemple stp ?

    Merci d'avance

  7. @Nicolas : on peut faire de l'héritage en javascript. Il suffit d'utiliser un objet déjà créé dans le constructeur d'un autre :), et il héritera de toutes ses variables membresµ/fonctions, sans empêcher la surcharge.

  8. Olve | Initialiser un objet via une méthode de classe ? |

    Alors que signifie cette phrase :
    " mais cela peut en avoir si vous utilisez des méthodes de la classe Exemple pour l'initialiser vos objets "

    Utiliser une méthode de class pour initialiser un objet ? Cette phrase me semble tjrs un peu flou...

    Après, j'ai comprit qu'en effet, les "methodes" de ces "class" Javascript n'en étant pas vraiment, on ne peut les appeler dans le contexte de cette classe dans un constructeur déclarer au début car le Javascript ne connaitrait pas l'existence des différents méthodes pouvant être appelé (un moyen de se rapprocher d'un langage objet + typé peut d'ailleurs être de déclarer une méthode constructeur au tout début qu'on l'on appelle à la fin de "la classe").

  9. En fait, ce n'est pas réellement un contexte objet tel qu'on en a l'habitude : les méthodes de votre class Exemple ne sont pas disponibles directement, il n'y pas pas de mot clé class ni de constructeur à proprement parlé. Aussi, vous ne pouvez pas appeller la méthode DitBonjour() avant de l'avoir déclaré.

    Si vous faites de cette manière, vous pouvez considérer le bas de la class exemple (après avoir déclaré toutes vos méthodes) comme un constructeur classique.

    Concernant :

    var oExemple = new Exemple.methode(param);

    En fait surtout pas, vous créeriez un objet de la classe "Exemple.methode" (une manière de faire du namespace au passage ;) ). Si vous avez compris ça, je me suis certainement mal exprimé :)

  10. Olve | Methode ? Class ? (Correction) |

    " ce que signifie l'initialisation d'objet PAR une méthode ? "
    Je critique je critique et au final je m'exprime mal ! :P Dsl !

  11. Bonjour,

    Tout d'abord merci pour l'article qui m'a permit de me plonger dans le sujet.

    J'ai néanmoins une incompréhension quand à votre vocabulaire : " 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. "

    à la fin de la METHODE exemple ? pour L'INItialiser vos objets ?
    Et puis je ne suis pas sûr de comprendre ce que signifie l'initialisation d'objet une méthode ? Un objet ne s'initialise pas automatiquement via son constructeur ? ( var oExemple = new Exemple(); ).

    Ce que vous dîtes sous-entends t'il qu'on peut écrire :
    var oExemple = new Exemple.methode(param);

    A ce compte là je comprends d'avantage le tout et l'intérêt de déclarer les attribut à la fin de la classe !
    Bref, peut-être qu'un exemple après le paragraphe en question pourrait guider certaines lanterne.


    Olivier

  12. marrant ce code, c'est exactement du code flash d'il y a 10 ans (actionscript 1)...

  13. Olivier | Je voudrais créer une classe Infobulle. |

    Bonsoir...

    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 !

  14. Merci Aurélien pour l'exemple et Romain pour la correction. Il existe néanmoins une manière plus propre de coder ces classes en Javascript natif en utilisant l'attribut prototype. Cela dit, je me tourne de plus en plus vers des frameworks, par flemme d'une part, mais aussi par souci de lisibilité : http://...ototype-JS

  15. Hello,

    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();

  16. Tout d'abord merci pour cette astuce qui permet de structurer un peu les choses.

    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...

  17. | class javascript erreur |

    je confirme

  18. DE BRITO... | class Javascript Erreur |

    Salut,

    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";
    }