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

 

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

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.
Il faut garder en tête que si une méthode du prototype est modifiée par une instance, 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 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 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.

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.

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.

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