Héritage et construction en JavaScript /
DRY (don't repeat yourself) restez au sec !

29/02/2016

Dans cet article / bloc note nous allons explorer un peu plus profondément la création d'objet grace à l'héritage des prototypes. Nous allons voir comment créer des constructeurs d'objet en intégrant la notion d'héritage.

Créer un objet / avec Object.create();

var shoe = {size: 6, gender: "women",construction: "slipper"};
var magicShoe = Object.create(shoe);

La particularité de Object.create() est que l’argument qui lui est passé (dans notre cas shoe) devient le prototype de notre nouvel objet.
Si vous affichez le contenu de l’objet magic Shoe, vous verrez qu’il ne contient aucune propriété native, toutes les propriétés qu’il contient sont sous forme de prototype hérité de l’objet shoe.

Examinons la chaine d'héritage / le processus...

Rappelez-vous (si vous avez lu les articles précédents) que nous avons une méthode pour savoir si une propriété est native ou héritée d’un prototype grâce à isPrototypeOf();

Object.prototype.isPrototypeOf(shoe);
// retourne true

Cette instruction retourne true car shoe hérite des propriétés de l’objet Object (qui est l’objet par défaut, le parent de tous les objets).

shoe.isPrototypeOf(magicShoe);
// retourne true

Cette instruction retourne true car magicShoe à hérité dans son prototype de toutes les propriétés de shoe.

magicShoe.isPrototypeOf(shoe);
// retourne false

Très logiquement cette instruction retourne false car c’est l’objet shoe qui est est le prototype de magicSHoe et pas l’inverse.

Utilisez les constructions / d'objets

Un constructeur en javascript est en fait une function qui déclare des propriétés d’un objet.

function Shoe (shoeSize, shoeColor, forGender, styleOfShoe){
  this.size = shoeSize;
  this.color = shoeColor;
  this.gender = forGender;
  this.styleOfShoe = styleOfShoe;
  this.putOn = function(){ alert("Shoe's on, dood !")};
  this.takeOff = function(){ alert("Uj, what's that smell?")};
}

var beachShoe = new Shoe(10,"blue","women","flipflop");
beachShoe.putOn();

Le mot-clé new permet d’instancier (de créer une image) l’objet dans une variable pour créer un objet. Mais notre objet à un petit problème… Si par exemple nous voulons créer un objet magicShoe nous allons devoir répéter des éléments de notre constructeur. Et les répétitions dans notre code sont à éviter.

Utiliser le concept d'héritage / pour créer un objet ??

Il suffit de créer un prototype à notre function de construction. nous avions l’habitude de créer des prototype pour des Array, String , Object. Là c’est la même chose

Shoe.prototype = {
  putOn: function (){alert ("Shoe's on, dood !");},
  takeOff: function (){ alert("Uh, what's that smell?");}
}

Grace à notre prototype on force tous les objets de type Shoe à avoir ces propriétés (stockés dans leur prototype !).

Ce qui nous donne au final une function de construction, le prototype de cette function de construction ainsi que l’instance qui a été créer gràce à notre constructeur.

// Notre prototype défini les propriétés partagées par les objets Shoe
Shoe.prototype = {
  putOn: function (){alert ("Shoe's on, dood !");},
  takeOff: function (){ alert("Uh, what's that smell?");}
}

// Notre function de construction
function Shoe (shoeSize, shoeColor, forGender, styleOfShoe){
  this.size = shoeSize;
  this.color = shoeColor;
  this.gender = forGender;
  this.styleOfShoe = styleOfShoe;
}

// Notre instanciation
var beachShoe = new Shoe(10,"blue","women","flipflop");


// On appel une function du prototype
beachShoe.putOn(); // retourne "Shoe's on, dood !"

Faire référence à l'instance / dans les prototypes

Les prototypes peuvent faire référence à l’instance an utilisant le mot-clé this qui représentera l’objet instancié.

Exemple en modifiant légèrement le prototype du constructeur.

// Notre prototype défini les propriétés partagées par les objets Shoe
Shoe.prototype = {
  putOn: function (){alert ("Your "+this.styleOfShoe+" 's on, dood !");},
  takeOff: function (){ alert("Uh, what's that smell?");}
}

beachShoe.putOn();
// retourne Your flipflop 's on, dood !