[Autre] Les fonctions de rappel (callback) ou les utilisations cachées de eval()

[Bovino]

Il existe de nombreux cas en JavaScript qui nécessitent l'utilisation de fonctions de rappel (callback en anglais).
Une fonction de rappel est une fonction passée en paramètre d'une autre fonction. Pour JavaScript, c'est le cas par exemple de setTimeout(), setInterval() ou encore des fonctions appelées par un gestionnaire d'événement.

Cette notion de fonction de rappel est d'autant plus difficile à appréhender pour les débutants qu'il existe différentes façons distinctes de la définir, dont certaines erronées.

Les trois plus fréquentes sont les suivantes :

1. document.onclick = maFonction();
2. document.onclick = "maFonction()";
3. document.onclick = maFonction;

1. setTimeout(maFonction(), délai);
2. setTimeout("maFonction()", délai);
3. setTimeout(maFonction, délai);

Les exemples (1) sont tout simplement faux et ne produiront pas le résultat attendu. Ils sont un mélange entre les deux formes suivantes et dus à la confusion entre une fonction et le résultat de l'exécution de celle-ci.
Lorsque l'interpréteur JavaScript rencontre la notation maFonction() (donc avec les parenthèses), il comprend qu'il faut exécuter la fonction et le fait donc sur le champ. Or ce qu'attendent les méthodes nécessitant une fonction de rappel, c'est une référence à la fonction. Avec la notation des exemples (1), c'est le résultat de l'exécution qui sera affecté au clic ou au timer, sans attendre le moment souhaité par le développeur.
Les exemples (2) sont syntaxiquement corrects, mais fortement marqués d'obsolescence. En fait, dans ces cas ci, il n'y a pas de fonction de rappel de définie mais une portion de code qui sera évaluée au moment de l'appel. En interne, JavaScript va utiliser la méthode eval() pour interpréter le code, comme le montre l'exemple suivant :

Code :

1
2
3
4
5
6
7
function eval(){
    alert('eval() is evil !');
}
function toto(){
    alert('toto');
}
document.onclick = "toto()";

Dans cet exemple, c'est bien le message eval() is evil ! qui sera affiché. Cette façon de procéder, liée à la préhistoire de JavaScript, est fortement déconseillée !

Dans les exemples (3), c'est bien la référence à la fonction qui est utilisée. De ce fait, lorsque le moment sera venu, cette fonction pourra être exécutée sans passer par l'utilisation de eval(), comme le montre l'exemple suivant :

Code :

1
2
3
4
5
6
7
function eval(){ 
    alert('eval() is evil !'); 
} 
function toto(){ 
    alert('toto'); 
} 
document.onclick = toto;

C'est bien le message toto qui est affiché lors du clic sur la page.

Note : si vous utilisez une console (par exemple celle de Firebug) pour tester les codes ci-dessus et que vous faites "Exécuter" deux fois de suite, vous obtiendrez le message eval() is evil, cela est dû au fait que l'injection du code dans le document utilise elle aussi des méthodes utilisant en interne eval() qui vient d'être redéfinie.

Mais alors, comment passer des paramètres à la fonction de rappel ?

Effectivement, le seul moyen de passer des paramètres à la fonction de rappel était celle des exemples (2), qui sont déconseillés.
Pour passer des paramètres, il va falloir utiliser une quatrième technique qui consiste à englober l'appel de la fonction de rappel dans une fonction anonyme. Cette fonction anonyme étant définie au moment de l'affectation, elle correspond donc à une référence à une fonction et non à une exécution de celle-ci :

Code :

1
2
3
4
5
6
7
8
9
function eval(){ 
    alert('eval() is evil !'); 
} 
function toto(texte){ 
    alert(texte); 
} 
document.onclick = function(){ 
    toto('Paramètre !'); 
};

Ce code affiche bien le paramètre passé à la fonction toto, elle-même englobée dans une fonction anonyme.

Billet original publié sur les blogs de developpez.com...
Billet original

[kalimukti]

Envoyé par Bovino

Code :

Ce code affiche bien le paramètre passé à la fonction toto, elle-même englobée dans une fonction anonyme.

Bonjour, et merci pour ce billet instructif.
pour le code en question: une première approche de la closure nan ?
Vous serait-il possible de développer ce sujet dans le futur ? Je croise souvent ce concept en programmation "objets" en javascript et j'ai vraiment du mal à le saisir (le principe comme les avantages m'échappent encore beaucoup)...
1 merci pour ce billet (et 1000 si vous trouvez un des ces 4 le temps de nous éclairer sur la closure... )