Catégories: JavaScript, ExtJs

Petit article rapide pour donner un exemple d'introspection, c'est-à-dire la faculté de récupérer la valeur d'un attribut, ou d'exécuter une fonction en connaissant le nom de l'attribut ou de la fonction.

Vite fait :

 
alert(myObject['attributeName']); 

affiche la valeur de l'attribut attributeName de l'objet myObject.

 
alert ( (myObject['functionName'])() ); 

affiche ce que renvoie la fonction functionName() de myObject.

A quoi ca sert ?

L'introspection est courante en Java lorsque l'on travaille sur les Annotations. En Groovy, c'est la base du metaprogramming et autre 'magie' du langage.

En Javascript, je l'utilise surtout pour créer des composants ExtJs :

 
/* Au passage, voici une façon de créer une Class en Javascript */ 
function ComboObject(id, name){ 
  this.id=id; 
  this.name=name; 
} 
 
/* Et d'ajouter dynamiquement une fonction */ 
ComboObject.prototype.toString = function(){ 
  return this.name+" ("+this.id+"); "; 
}; 
 
 
var o1 = new ComboObject(1, "Jo"); 
var o2 = new ComboObject(2, "Jo2"); 
var o3 = new ComboObject(3, "Jo3"); 
var o4 = new ComboObject(4, "Jo4"); 
 
var array = [o1, o2, o3, o4]; 
 
new SimpleCombo( 
{ 
  xtype : 'simple-combo', 
  model : array, 
  valueField: 'id', 
  displayField: 'name' 
} 
); 
 


La machinerie interne de mon SimpleCombo utilise assez simplement l'introspection et l'on peut déclarer 'à droite' l'attribut sur lequel on travail. Le combo affichera l'attribut name et le formulaire enverra la valeur id. Si displayField n'est pas renseigné, on peut alors exécuter la fonction toString().