mar.
2009
Suite du quiz JavaScript précédent.
Soit le bloc JavaScript suivant :
function Personne(nom, age) { this.nom = nom; this.age = age; this.isMajeur = function() { alert("1"); return (this.age >= 18); } } Personne.prototype.isMajeur = function() { alert("2"); return (this.age >= 18); }
On crée ensuite l'objet Personne
suivant :
var jean = new Personne("Jean", 43);
Une alerte va alors s'afficher. A votre avis, qu'affichera-t-elle ? 1
ou 2
? Et pourquoi ?
Réponse : 1
.
Pourquoi ? Reprenons ce que j'écrivais dans la solution du quiz précédent :
Avec la définition directe dans la classe, une nouvelle opération isMajeur
est définie (et compilée) pour chaque nouvel objet. Avec la définition par prototype
, l'opération isMajeur
est définie une fois pour toutes, et cette définition est la même pour tous les objets Personne
.
Ici, on définit l'opération deux fois, par l'une, puis l'autre manière de définir l'opération. L'ordre d'exécution a donc une importance cruciale.
Pour le trouver, il ne faut pas oublier que JavaScript est fondamentalement un langage interprété (même si le navigateur peut, en interne, le compiler en pseudo-code assembleur pour l'exécuter plus rapidement).
L'instruction Personne.prototype.isMajeur = function() { ...
est exécutée lorsque l'interpréteur JavaScript la rencontre, c'est-à-dire juste après avoir défini une classe Personne
. Par contre, l'instruction this.isMajeur = function() { ...
n'est exécutée que lorsque l'on crée un nouvel objet Personne
, autrement dit, lorsqu'on exécute jean = new Personne("jean", 43);
.
Par conséquent, l'instruction this.isMajeur = function() { ...
est toujours exécutée après l'instruction Personne.prototype.isMajeur = function() { ...
. Tous les objets Personne
disposeront donc de leur propre implémentation de isMajeur
, et toutes ces implémentations afficheront l'alerte 1
.