Ajouter des méthodes aux objets natifs
Une grosse particularité du Javascript est qu'il est orienté objet par prototype ce qui le dote de certaines caractéristiques que d'autres langages orientés objet ne possèdent pas. Avec le Javascript, il est possible de modifier les objets natifs, comme c'est le cas en C# par exemple. En fait, les objets natifs possèdent eux aussi un objet prototype autorisant donc la modification de leurs méthodes !
Ce n'est parfois pas facile de visualiser le contenu d'un tableau avec alert(). Pourquoi ne pas créer une méthode qui afficherait le contenu d'un objet littéral via alert(), mais de façon plus élégante (un peu comme la fonction var_dump() du PHP si vous connaissez) ?
Voici le type d'objet à afficher proprement :
var family = { self: 'Sébastien', sister: 'Laurence', brother: 'Ludovic', cousin_1: 'Pauline', cousin_2: 'Guillaume' };
family.debug(); // Nous allons créer cette méthode debug() |
La méthode debug() affichera ceci :
Notre méthode devra afficher quelque chose de semblable
Comme il s'agit d'un objet, le type natif est Object. Comme vu précédemment, nous allons utiliser son sous-objet prototype pour lui ajouter la méthode voulue :
// Testons si cette méthode n'existe pas déjà ! if (!Object.prototype.debug) {
// Créons la méthode Object.prototype.debug = function() { var text = 'Object {\n';
for (var i in this) { if (i !== 'debug') { text += ' [' + i + '] => ' + this[i] + '\n'; } }
alert(text + '}'); }
} |
Mais pourquoi tester si i est différent de 'debug' ?
Parce qu'en ajoutant la méthode debug() aux objets, elle s'ajoute même aux objets littéraux : autrement dit, debug() va se lister elle-même ce qui n'a pas beaucoup d'intérêt. Regardez donc le résultat en enlevant cette condition :
Le code de la méthode debug() est affiché
Nous avons ajouté une méthode à Object. Nous l'avons fait pour l'exemple, mais ceci ne doit jamais être reproduit dans vos scripts pour une raison très simple : après ajout d'une méthode ou d'une propriété àObject, celle-ci sera listée à chaque fois que vous utiliserez un for in. Par exemple, le code suivant ne devrait même pas afficher une seule alerte :
var myObject = {};
for (var i in myObject) { alert(i); } |
Et pourtant, après l'ajout d'une méthode comme debug(), votre boucle affichera cette méthode pour tout objet parcouru, ce qui n'est clairement pas conseillé. Cependant, notez bien que cette restriction s'applique uniquement à l'objet natif Object, les autres objets comme Array, String, etc. ne sont pas concernés.
Comme vous avez dû le constater, quand nous utilisons prototype, nous affectons une fonction. Cela veut donc dire qu'il est possible de modifier les méthodes natives des objets en leur affectant une nouvelle méthode. Cela peut se révéler très utile dans certains cas, mais nous verrons cela plus tard dans le chapitre qui aborde l'usage des polyfills.
En théorie, chaque objet peut se voir attribuer des méthodes via prototype. Mais en pratique, si cela fonctionne avec les objets natifs génériques comme String, Date, Array, Object, Number, Boolean et de nombreux autres, cela fonctionne moins bien avec les objets natifs liés au DOM comme Node, Elementou encore HTMLElement, en particulier dans Internet Explorer.
Sachez également que si vos scripts sont destinés à être utilisés sous la forme d'extensions pour Firefox et que vous soumettez votre extension sur le site de Mozilla Addons, celle-ci sera refusée car Mozilla trouve qu'il est dangereux de modifier les objets natifs. C'est un peu vrai puisque si vous modifiez une méthode native, elle risque de ne pas fonctionner correctement pour une autre extension…
Créé avec HelpNDoc Personal Edition: Produire des livres Kindle gratuitement