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

 

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.

 

Créer un objet de manière littérale (sans classe)

Cette syntaxe permet de créer directement un objet sans passer par une classe : il est d’emblée instancié.

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

 

Créer un objet de manière littérale (sans classe) 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;
  }
}

 

Construire un objet à partir d’un autre objet

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 à usage unique 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 semble 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….

 

Posté dans html5Taggé classe javascript, javascript class, javascript namespace, javascript object, objet javascript  |  7 commentaires

7 réponses à "5 manières de créer des objets en javascript"

Répondre