5 manières de créer des objets en javascript

javascript_logo1

 

Dans cet article, je vous montre différentes manières de créer des classes et des objets en javascript. Les exemples ci-dessous sont préfixés par le mot application qui est le namespace javascript auxquels appartiennent les classes et objets créés. Pour résumer, un namespace permet d’isoler votre code javascript dans un espace dédié et nommé pour éviter toute interaction avec un code existant dans une même page web. Bien entendu, il faut éviter d’utiliser un nom de namespace exitant.


 

Objet statique

Cette syntaxe permet de créer un objet statique : il ne peut être instancié puisqu’il l’est d’emblée.

application = {};
application.notepad  = {};
application.notepad.writeable = true;
application.notepad.font  = 'helvetica';
application.notepad.setFont = function(theFont) {
    application.notepad.font = theFont;
}

 

Objet statique en notation Json

C’est la même chose que dans le paragraphe précédent : seule la notation change.

application = {};
application.notepad  = {
    writeable: true,
    font: 'helvetica',
    setFont: function(theFont) {
        this.font = theFont;
    }
}

 

Constructeur et instanciation sans opérateur new

application = {};
application.Notepad = function(defaultFont) {
    var  that = {};
    that.writeable = true;
    that.font = defaultFont;
    that.setFont = function(theFont) {
        that.font = theFont;
    }
    return that;
}
application.notepad1 =  application.Notepad('helvetica');

 

Constructeur et instanciation avec l’opérateur new

Lorsqu’un objet est instancié, toutes les instances partagent les même méthodes.
Il faut garder en tête que si une méthode est modifiée par une instance, elle est modifiée pour toutes les instances.

application = {};
application.Notepad = function(defaultFont) {
    this.writeable = true;
    this.font = defaultFont;
    this.setFont = function(theFont) {
        this.font = theFont;
    }
}
 
application.notepad1  = new application.Notepad('helvetica');

 

Constructeur, instanciation avec new et prototype

L’utilisation de prototype évite l’écueil suivant : si une instance modifie une méthode m, elle la modifie pour elle-même, les autres instances n’ont pas leur méthode m modifiée.

application = {};
application.Notepad = function(defaultFont) {
    this.font = defaultFont;
}
application.Notepad.prototype.writeable  = true;
application.Notepad.prototype.setFont  = function(theFont) {
    this.font = theFont;
}
application.notepad1  = new application.Notepad('helvetica');

 
Les deux premiers exemples décrivent comment créer des objets statiques à utiliser uniquement que si vous n’avez besoin que d’une seule instance.
Les trois derniers exemples permettent de créer de multiples instances d’une même classe. A utiliser si votre besoin nécessite la création de multiples instances.

Par exemple, dans le cadre d’un jeu vidéo, il est probable que vous ayez besoin des deux types d’objets :
- le jeu avec ses méthodes propres de gestion de l’initialisation, de gestion du clavier, de la souris ou du joystick : un seul objet peut sembler suffisant;
- les sprites html5, les canvas layers html5, les scrolling jhtml5 etc….. : plusieurs instances seront probablement nécessaires.

Bien entendu, tout ça n’engage que moi et je ne pense pas détenir la vérité sur le sujet : tout est discutable puisque dépendant du besoin.
Des approches différentes peuvent être toutes valides à partir du moment où le code créé est maintenable en ne fabriquant pas une usine à gaz.

Aucun de ces exemples n’est critiquable, selon les cas certains seront plus adaptés que d’autres.

Vous en verrez une utilisation concrète dans le jeu Pong qui, je pense, aujourd’hui nécessite une refonte pour continuer de le faire évoluer.

Des remarques, des améliorations, des idées, des coquilles : faites le savoir. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.

Source : Five ways to create objects….

 

3 commentaires pour 5 manières de créer des objets en javascript

  • Galliez Bruno  dit:

    Moi qui débute avec la POO javascript, j’avoue que ce résumé va bien me servir :)

    Je me suis crée mon premier objet qui affiche mon image sur le canvas, permet de changer sa position ou encore changer sa position source pour créer une animation.

    Malheureusement, ma structure n’étant pas bonne ( ben oui je débute ^^ ), lorsque j’ai ajouté la méthode permettant de changer son orientation, c’est tout mon canvas qui tourne :) Comme quoi, la POO c’est bien, mais faut bien prévoir sa structure avant.

    Je commence à me développer ma propre librairie pour mes jeux HTML5. Évidemment c’est bordélique, et surement pas optimisé. Mais cela permet d’apprendre pas mal, puis je le recommencerai lorsque je serai plus expérimenté.

    J’ai juste une remarque sur l’article. That n’est pas utilisable dans la POO javascript ? On peut l’utiliser sans soucis comme dans la partie Constructeur et instanciation sans opérateur new ?

    • Franck Dubois  dit:

      Le that donné dans l’exemple est l’objet/structure de données renvoyé par la fonction/constructeur par le biais du return. Le new est donc inutile : il suffit d’appeler la fonction pour obtenir un objet.

      En javascript, objet et structure de données sont en réalité la même chose.

      Le that utilisé n’est pas un mot clé au même titre que le mot clé this.

  • namespace javascript  dit:

    […] 5 manières de créer des objets en javascript […]

Laisser une réponse

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>