5 manières de coder des objets en javascript

Dans cet article, je vous montre différentes manières de coder des objets en javascript, ainsi que des classes. Les exemples ci-dessous sont préfixés par le mot application. Ce qui correspond au namespace javascript auquel appartiennent les classes et objets créés. Un namespace isole votre code javascript dans un espace dédié et nommé pour éviter toute interaction avec un code existant. Bien entendu, il faut éviter d’utiliser un nom de namespace existant.

Coder des objets en javascript 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

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.writeable = true;
  this.font = defaultFont;
  this.setFont = function(theFont) {
    this.font = theFont;
  }
}
application.notepad1  = new application.Notepad('helvetica');

Constructeur, instanciation avec new et prototype

Lorsqu’un objet est instancié, toutes les instances partagent le même prototype.
Si une méthode du prototype est modifiée par une instance, alors elle est modifiée pour toutes les instances.

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 coder des objets an javascript à usage unique. seulement 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 sera nécessaire et dans ce cas inutile de passer par une classe;
– les sprites html5, les canvas layers html5, les scrolling jhtml5 etc….. Plusieurs objets (instances) seront probablement nécessaires et dans ce cas l’usage d’une classe apparait pertinente.

Des approches différentes peuvent être toutes valides à partir du moment où le code créé est maintenable et ne fabrique pas une usine à gaz.

Retenez qu’en javascript tout est objet. Il n’y a pas de différences fondamentales entre des objets créés, quelque soit la manière utilisée pour créer ces objets.

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.

5 manières de coder des objets en javascript