Le prototypage…

Lors de la formation AJAX, on aborde cette facette du Javascript peu connue.

Une définition du Prototypage est :  »un prototype est une instance d’une classe qui possède des attributs et des méthodes par défaut qui sont utilisés si les instances de la classe ne les redéfinissent pas ». En Javascript, on peut tout prototyper.

Pour faire ces exemples, vous pouvez utiliser le shell qui  vous permet de faire de la ligne de commande en Javascript dans le contexte de la page en cours.

La syntaxe du prototypage est la suivante :

//Définition d’une classe
Voiture = function(marque, modele) {
  this.marque= marque;
  this.modele= modele;
}

//Exemple :
voiture1 = new Voiture(‘BMW’, ‘Classe 1’);

//On rajoute une méthode qui s’ajoute à tous les objets Voiture en prototypant la classe Voiture 
Voiture.prototype.demarre = function() {
  return ‘Vrooom’;
}

//essai
voiture1.demarre()
>>Vrooom

Si une méthode demarre() avait été définie dans la classe Voiture, elle n’aurait pas été écrasée par la méthode ajouté par prototype.

Nous allons maintenant prototyper l’objet natif Array du Javascript

Array.prototype.compte = function(){
  return this.length;
}

//définition d’un tableau
tableau = [‘choux’,’carotte’,’poireau’]
>>choux,carotte,poireau

//Appel de  la methode ajoutée
tableau.compte()
>>3

//Appel de la proprieté length
tableau.length
>>3
 
Prenons un cas un peu plus tordu (c’est au final l’objet de ce post…)
 
coll = document.getElementsByTagName(‘*’)
>>[object HTMLCollection]
 
coll.length
>>90

coll.compte()
>>TypeError on line 1: coll.compte is not a function
 
En effet, getElementsByTagName ne retourne pas un tableau, contrairement à ce qu’indique Aptana dans sa documentation contextuelle, mais un Dom Collection
 
//on demande le type de coll
coll.constructor.name
>>Object
 
//on demande le type de tableau
tableau.constructor.name
>>Array
 
Les deux sont différents. Nous allons donc essayer de prototyper les Object :
 
Object.prototype.compte = function(){ return this.length;}
>>function () { return this.length; }
 
coll.compte()
>>90
 
Mais sous Internet Explorer, ça ne fonctionnera pas car le script n’a pas accès à ces objets là.
Et comme dirait Nico : « Les types des DOM ne sont pas dans l’arbre d’héritage du JS »…
 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *