Auteur: Ludovic PATEY

Publié le 7 février 2008

Modifié le: 8 février 2008

Page d'accueil

Quelques fonctions intéressantes de Javascript

Vous êtes ici : Accueil / Articles / Formations en Javascript

Javascript dispose de quelques fonctions très puissantes qui gagnent à être connues et pourront vous simplifier la vie dans de nombreuses situations. En voici quelques unes :

La fonction eval()

La fonction eval() permet d’exécuter du javascript se trouvant sous forme d’une chaîne de caractères. Par exemple, le code suivant affichera un message de dialogue contenant "ok" :

eval( "alert('ok');" );

Cette fonction présente par exemple l’avantage de créer du code "à la volée" et donc de faire évoluer le script pendant son exécution.

La méthode call()

call() est une méthode définie au niveau du prototype de l’objet Fonction et est donc disponible pour chaque fonction définie. Elle d’exécuter la fonction en tant que méthode d’un objet externe.

Cette méthode admet un nombre variable de paramètres : si la fonction possède paramètres, elle en acceptera n+1 : le nom de l’objet appelant suivi des paramètres de la fonction.

var User = {

       name : 'John'
}

function sayHello() {
       alert( this.name );
}

sayHello.call( User );

Comme vous pouvez le voir, la variable this pointe vers l’objet User comme si l’on appelait la méthode sayHello() de l’objet User.

Le code suivant est équivalent :

var User = {

       name : 'John',

       sayHello : function() {
               alert( this.name );
       }
}

User.sayHello();

Prenons un exemple concret : les listeners d’événement. Voici la fonction suivante qui gère un événement :

var User = {

       name : 'John',

       sayHelloListeners : new Array(),

       addSayHelloListener : function( f ) {
               this.sayHelloListeners.push( f );
       },

       sayHello : function() {

               for( var i=0; i<this.sayHelloListeners.length; i++ ) {
                       this.sayHelloListeners[i]();
               }
               alert( 'Hello' );
       }


}

// Fonction listener de sayHello
function listener() {
       alert( this.name + ' said Hello' );
}

// Ajoute le listener de sayHello();
User.addSayHelloListener( listener );

// Invoque sayHello() et déclenche les fonctions listener
User.sayHello();

Le code précédent affichera "undefined said Hello", puis "Hello". Le undefined vient du fait que le this ne pointe pas sur l’utilisateur User.

L’utilisation de la fonction call dans la méthode sayHello() de l’objet User va corriger l’erreur :

sayHello : function() {

       for( var i=0; i<this.sayHelloListeners.length; i++ ) {
               this.sayHelloListeners[i].call( this );
       }
       alert( 'Hello' );
}

Cette méthode est donc très utile pour appeler des fonctions externes en tant que méthodes des objets.

La méthode apply()

Cette méthode apply() ressemble à la précédente, à la différence près qu’elle ne prends que 2 paramètres : l’objet appelant, et un tableau de paramètres. Cette méthode est donc encore plus maniable que la précédente car il n’est pas nécessaire de connaître le nombre de paramètres pour appeler la fonction.

function ma_fonction( arg1, arg2, arg3 ) {

}

ma_fonction.apply( null, [ 1, 2, 3 ] );

Le code précédent appellera la fonctin ma_fonction avec arg1=1, arg2=2 et arg3=3. Si l’on précise null à la place de l’objet, la fonction sera appellée par l’objet Window.

La lecture de propriétés

Nous allons maintenant voir comment lister les propriétés et méthodes d’un objet. Depuis l’apparition d’une nouvelle forme de for : le for.. in, il est possible de lister les propriétés et méthodes d’un tableau.

var User = {

       propriete1: 'valeur0',
       propriete2 : 'valeur1',
       methode1 : function() {},
       methode2 : function() {}
}

for( var o in  User ){
       alert( o );
}

Ce script va afficher chacun des nom des propriétés et des méthodes l’un après l’autre.

Il est ensuite possible de récupérer la valeur avec les crochets :

alert( User["propriete1"] );

Le code précédent affichera "valeur0"

Pour savoir si une occurence est une propriété ou une méthode, il suffit d’effectuer le test instanceof Function sur la valeur de l’occurence :

var User = {

       propriete1: 'valeur0',
       propriete2 : 'valeur1',
       methode1 : function() {},
       methode2 : function() {}
}

for( var o in  User ){
       if( User[o] instanceof Function ) {

               alert( o + ' est une fonction' );

       }
       else {
               alert( o + ' est une propriété' );
       }
}

Cette technique est compatible avec Internet Explorer et Mozilla Firefox pour tous les objets. En revanche, sous certains autres navigateurs, cette fonctionnalité n’est possible qu’avec des objets créés par le développeur. Un for..in sur l’objet window par exemple retournera une erreur.

Commentaires

Auteur :

Message :