Simpliste. Donc très normal, c'est presque réconfortant:
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
Cependant, que se passe-t-il si j'inclus une bibliothèque javascript très pratique dans ma page qui traduit les caractères avancés dans leurs représentations de niveau de base?
Attends quoi?
Je veux dire, si quelqu'un tape un caractère avec une sorte d'accent dessus, mais je veux seulement des caractères 'anglais' AZ dans mon programme? Eh bien ... les caractères espagnol «ñ» et français «é» peuvent être traduits en caractères de base «n» et «e».
Donc, quelqu'un de gentil a écrit un convertisseur de caractères complet que je peux inclure dans mon site ... Je l'inclus.
Un problème: il contient une fonction appelée 'nom' identique à ma fonction.
C'est ce qu'on appelle une collision. Nous avons deux fonctions déclarées dans la même portée avec le même nom. Nous voulons éviter cela.
Nous devons donc en quelque sorte étendre notre code.
La seule façon d'étendre le code en javascript est de l'envelopper dans une fonction:
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
Cela pourrait résoudre notre problème. Tout est désormais fermé et n'est accessible qu'à partir de nos accolades d'ouverture et de fermeture.
Nous avons une fonction dans une fonction ... ce qui est bizarre à regarder, mais totalement légal.
Un seul problème. Notre code ne fonctionne pas. Notre variable userName n'est jamais répercutée dans la console!
Nous pouvons résoudre ce problème en ajoutant un appel à notre fonction après notre bloc de code existant ...
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
main();
Ou avant!
main();
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
Une préoccupation secondaire: quelles sont les chances que le nom «principal» n'ait pas encore été utilisé? ... donc très, très mince.
Nous avons besoin de PLUS de portée. Et un moyen d'exécuter automatiquement notre fonction main ().
Nous arrivons maintenant aux fonctions d'auto-exécution (ou auto-exécutables, auto-exécutables, peu importe).
((){})();
La syntaxe est maladroite comme péché. Mais ça marche.
Lorsque vous enveloppez une définition de fonction entre parenthèses et incluez une liste de paramètres (un autre ensemble ou des parenthèses!), Elle agit comme un appel de fonction .
Regardons donc à nouveau notre code, avec une syntaxe auto-exécutable:
(function main() {
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
)();
Ainsi, dans la plupart des didacticiels que vous lisez, vous serez désormais bombardé par le terme «auto-exécution anonyme» ou quelque chose de similaire.
Après de nombreuses années de développement professionnel, je vous invite fortement à nommer chaque fonction que vous écrivez à des fins de débogage.
Quand quelque chose ne va pas (et ça arrivera), vous vérifierez la trace dans votre navigateur. Il est toujours plus facile d'affiner vos problèmes de code lorsque les entrées de la trace de pile ont des noms!
Énorme longue haleine et j'espère que ça aide!