Simplista. Tão muito normal, é quase reconfortante:
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
No entanto, e se eu incluir uma biblioteca javascript realmente útil na minha página que traduza caracteres avançados em suas representações no nível base?
Espere o que?
Quero dizer, se alguém digitar um personagem com algum tipo de sotaque, mas eu só quero caracteres em 'inglês' AZ no meu programa? Bem ... os caracteres espanhol 'ñ' e francês 'é' podem ser traduzidos para caracteres base de 'n' e 'e'.
Então, alguém legal escreveu um abrangente conversor de caracteres que eu posso incluir no meu site ... eu o incluo.
Um problema: ele tem uma função chamada 'name' igual à minha função.
Isso é chamado de colisão. Temos duas funções declaradas no mesmo escopo com o mesmo nome. Queremos evitar isso.
Então, precisamos escopo nosso código de alguma forma.
A única maneira de escopo do código em javascript é envolvê-lo em uma função:
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;
}
}
Isso pode resolver o nosso problema. Agora tudo está fechado e só pode ser acessado de dentro de nossas chaves de abertura e fechamento.
Temos uma função em uma função ... que é estranha de se ver, mas totalmente legal.
Apenas um problema. Nosso código não funciona. Nossa variável userName nunca é ecoada no console!
Podemos resolver esse problema adicionando uma chamada à nossa função após o bloco de código existente ...
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 antes!
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;
}
}
Uma preocupação secundária: quais são as chances de o nome 'principal' ainda não ter sido usado? ... muito, muito magro.
Precisamos de mais escopo. E alguma maneira de executar automaticamente nossa função main ().
Agora chegamos às funções de execução automática (ou auto-executáveis, auto-executáveis, qualquer que seja).
((){})();
A sintaxe é estranha como o pecado. No entanto, funciona.
Quando você coloca uma definição de função entre parênteses e inclui uma lista de parâmetros (outro conjunto ou parênteses!), Ela atua como uma chamada de função .
Então, vejamos nosso código novamente, com alguma sintaxe auto-executável:
(function main() {
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
)();
Portanto, na maioria dos tutoriais que você lê, agora você será bombardeado com o termo 'auto-execução anônima' ou algo semelhante.
Depois de muitos anos de desenvolvimento profissional, eu fortemente exortá-lo a nomear todas as funções que você escreve para fins de depuração.
Quando algo der errado (e ocorrerá), você verificará o backtrace no seu navegador. É sempre mais fácil restringir os problemas de código quando as entradas no rastreamento da pilha têm nomes!
Muito longo e espero que ajude!