Qual é o propósito de uma auto função de execução em javascript?

Question

Em javascript, quando você quiser usar este:

(function(){
    //Bunch of code...
})();

sobre isto:

//Bunch of code...

Answer 1

Seu tudo sobre escopo de variáveis. Variáveis ??declaradas na função de auto execução são, por padrão, disponível apenas para o código dentro da função de auto-execução. Isso permite que o código a ser escrito sem a preocupação de como as variáveis ??são nomeados em outros blocos de código javascript.

Por exemplo:

(function(){ 
    var foo = 3; 
    alert(foo); 
})(); 

alert(foo); 

Isto irá primeiro alerta "3" e, em seguida, lançar um erro na próxima alerta porque foo não está definido.

Answer 2

simplista. Então, muito normal olhando, é quase reconfortante:

var userName = "Sean";

console.log(name());

function name() {
  return userName;
}

No entanto. E se eu incluir uma biblioteca javascript realmente útil para a minha página que converte caracteres avançados em suas representações de nível de base?

Wait ... o quê?

quero dizer. Se alguém digitar um personagem com algum tipo de acento sobre ele (como um personagem francês ou espanhol), mas eu só quero caracteres 'Inglês'? A-z no meu programa? Bem ... O spanish 'n ~' e francês 'e /' caracteres (eu usei dois caracteres cada para aqueles, mas provavelmente você pode fazer o salto mental para o personagem que representa os acentos), esses caracteres podem ser traduzidos em caracteres de base de 'n' e 'e'.

Então, alguém agradável pessoa tem escrito um conversor de caráter abrangente lá fora que eu posso incluir no meu site ... Eu incluí-lo.

Um problema:. Ele tem uma função no que chamou de 'nome' mesmo que minha função

Este é o que é chamado de colisão. Temos duas funções declarou no mesmo escopo com o mesmo nome. Queremos evitar isso.

Então, precisamos âmbito nosso código de alguma forma.

A única maneira de código de escopo 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 da nossa abertura e fechamento de chaves.

Nós temos uma função em uma função ... o que é estranho para olhar, mas totalmente legal.

Apenas um problema. Nosso código não funciona. Nosso nome de usuário variável nunca é ecoado no console!

Podemos resolver esse problema adicionando uma chamada para nossa função depois do nosso 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;
  }
}

A preocupação secundária: Quais são as chances de que o nome 'main' ainda não foi usado? ... muito, muito magro.

Precisamos de mais escopo. E de alguma forma para automaticamente executar a nossa função main ().

Agora chegamos às funções auto-execução (ou auto-executável, auto-execução, qualquer que seja).

(() {}) ();

A sintaxe é estranho como pecado. No entanto, ele funciona.

Quando você envolve a definição de função entre parênteses, e incluem uma lista de parâmetros (outro conjunto ou parênteses!) Que atua como uma função Chamada .

Então, vamos olhar para o nosso código de novo, com alguma sintaxe auto-executável:

(function main() {
  var userName = "Sean";

    console.log(name());

    function name() {
      return userName;
    }
  }
)();

Assim, na maioria dos tutoriais que você lê, você vai agora ser bombardear com o termo 'anonymous auto-executável' ou algo similar.

Depois de muitos anos de desenvolvimento profissional, eu fortemente exortá-lo a nome todas as funções que você escreve para fins de depuração.

Quando algo dá errado (e vai), você estará verificando o registo de chamadas no seu browser. É sempre mais fácil para limitar seus problemas de código quando as entradas no rastreamento de pilha têm nomes!

Hugely prolixo e espero que ajude!

Answer 3

Auto-invocação (também conhecido como auto-invocação) é quando uma função executa imediatamente após a sua definição. Este é um padrão do núcleo e serve como a base para muitos outros padrões de JavaScript desenvolvimento.

Eu sou um grande fã :) dele porque:

• Mantém código para um mínimo
• Obriga separação do comportamento da apresentação
• Ele fornece um fecho que evita conflitos de nomes

enormemente - (? Por que você deve dizer o seu bom)

• Trata-se de definir e executar uma função de tudo de uma vez.
• Você pode ter essa função de auto-execução de retornar um valor e passar a função como um parâmetro para outra função.
• É bom para encapsulamento.
• Também é bom para o bloco de definição do âmbito.
• Sim, você pode colocar todos os seus arquivos .js em uma função de auto-execução e pode prevenir a poluição namespace global. ;)

aqui .

Answer 4

Namespace. escopos JavaScript são função de nível.

Answer 5

Eu não posso acreditar que nenhuma das respostas mencionam globals implícita.

A construção (function(){})() não protege contra globals implícitas, que para mim é a maior preocupação, consulte http://yuiblog.com/blog/2006/06/01/global-domination/

Basicamente, o bloco de função faz com que todos os "vars globais" dependentes definidas estão confinadas ao seu programa, não protegê-lo contra a definição de globals implícitas. JSHint ou similares pode fornecer recomendações sobre como se defender contra esse comportamento.

A sintaxe var App = {} mais conciso fornece um nível de protecção semelhante, e pode ser envolvido no bloco de função quando em páginas 'público'. (Veja Ember.js ou SproutCore por exemplos do mundo real de bibliotecas que usam esta construção)

Quanto propriedades private ir, eles são uma espécie de superestimado a menos que você está criando uma estrutura pública ou biblioteca, mas se você precisa para implementá-las, Douglas Crockford tem algumas boas ideias.

Answer 6

Existe um parâmetro e o "Grupo de código" retorna uma função?

var a = function(x) { return function() { document.write(x); } }(something);

Encerramento. O valor da something é usado pela função atribuída a a. something poderia ter algum valor variando (loop) e cada vez que um tem uma nova função.

Answer 7

Eu li todas as respostas, algo muito importante está faltando aqui , eu vou beijar. Há 2 razões principais, porque eu preciso de auto-execução de funções anônimas, ou melhor, " Imediatamente-Chamado Função Expression (IIFE) ":

1. Melhor gerenciamento de namespace (Evitando Namespace Poluição -> Módulo JS)
2. Closures (simulando Privada Classe Membros, como é conhecido a partir OOP)

O primeiro foi explicado muito bem. Para o segundo, por favor estudar seguinte exemplo:

var MyClosureObject = (function (){
  var MyName = 'Michael Jackson RIP';
  return {
    getMyName: function () { return MyName;},
    setMyName: function (name) { MyName = name}
  }
}());

Atenção 1: Não estamos atribuindo uma função para MyClosureObject, ainda mais o resultado de invocar essa função . Esteja ciente de () na última linha.

Atenção 2: O que você também tem que saber sobre as funções em Javascript é que as funções internas get acesso aos parâmetros e variáveis ?? das funções, eles são definidos dentro.

Vamos tentar algumas experiências:

posso obter MyName usando getMyName e ele funciona:

 console.log(MyClosureObject.getMyName()); 
 // Michael Jackson RIP

A seguinte abordagem ingênua não iria funcionar:

console.log(MyClosureObject.MyName); 
// undefined

Mas eu posso definir um outro nome e obter o resultado esperado:

MyClosureObject.setMyName('George Michael RIP');
console.log(MyClosureObject.getMyName()); 
// George Michael RIP

Editar: No exemplo acima MyClosureObject está concebido para ser usado sem o newprefix, portanto, por convenção, ele não deve ser capitalizada.

Answer 8

isolamento Scope, talvez. Assim que as variáveis ??dentro da declaração da função não polui o namespace externo.

É claro que, em metade das implementações JS lá fora, eles vão de qualquer maneira.

Answer 9

Aqui está um exemplo sólido de como uma auto invocando função anônima poderia ser útil.

for( var i = 0; i < 10; i++ ) {
  setTimeout(function(){
    console.log(i)
  })
}

Saída: 10, 10, 10, 10, 10...

for( var i = 0; i < 10; i++ ) {
  (function(num){
    setTimeout(function(){
      console.log(num)
    })
  })(i)
}

Saída: 0, 1, 2, 3, 4...

Answer 10

Uma diferença é que as variáveis ??que você declara na função são locais, de modo que vai embora quando você sair da função e da não entram em conflito com outras variáveis ??em outro código.

Answer 11

Auto invocado função em javascript:

A expressão auto-invocando é invocado (iniciado) automaticamente, sem ser chamado. A expressão auto-invocando é invocado logo após o seu criado. Este é basicamente usado para evitar conflito de nomes, bem como para a obtenção de encapsulamento. As variáveis ??ou objetos declarados não são acessíveis fora desta função. Para evitar os problemas de minimização (filename.min) sempre usar função executada self.

Answer 12

Desde funções no Javascript são objeto de primeira classe, definindo-lo dessa maneira, ele efetivamente define uma "classe" muito parecido com C ++ ou C #.

Essa função pode definir variáveis ??locais, e têm funções dentro dele. As funções internas (efetivamente métodos de instância) terão acesso às variáveis ??locais (efetivamente variáveis ??de instância), mas eles vão ser isolado do resto do script.

Answer 13

função de executar Auto são usados ??para gerenciar o escopo de uma variável.

O escopo de uma variável é a região do seu programa no qual ele está definido.

Uma variável global tem escopo global; ela é definida em todos os lugares em seu código JavaScript e pode ser acessado de qualquer lugar dentro do script, mesmo em suas funções. Por outro lado, as variáveis ??declaradas dentro de uma função são definidas apenas dentro do corpo da função. Eles são variáveis ??locais, têm escopo local e só pode ser acessado dentro dessa função. parâmetros de função também contam como variáveis ??locais e são definidos apenas dentro do corpo da função.

Como mostrado abaixo, você pode acessar a variável GLOBALVarißvel dentro de sua função e também que dentro do corpo de uma função, uma variável local tem precedência sobre uma variável global com o mesmo nome.

var globalvar = "globalvar"; // this var can be accessed anywhere within the script

function scope() {
    alert(globalvar);
    localvar = "localvar" //can only be accessed within the function scope
}

scope(); 

Função Então, basicamente a execução de auto permite que o código a ser escrito sem a preocupação de como as variáveis ??são nomeados em outros blocos de código javascript.

Answer 14

Parece que esta pergunta foi respondida tudo pronto, mas eu vou postar a minha entrada de qualquer maneira.

Eu sei que quando eu gosto de usar funções de auto-execução.

var myObject = {
    childObject: new function(){
        // bunch of code
    },
    objVar1: <value>,
    objVar2: <value>
}

A função me permite usar algum código extra para definir os atributos childObjects e propriedades para um código mais limpo, como a definição de variáveis ??comumente usadas ou executar equações matemáticas; Oh! ou verificação de erros. em vez de ser limitado a aninhada sintaxe objeto instanciação de ...

object: {
    childObject: {
        childObject: {<value>, <value>, <value>}
    }, 
    objVar1: <value>,
    objVar2: <value>
}

Coding, em geral, tem um monte de caminhos obscuros de fazer um monte das mesmas coisas, fazendo com que você se perguntar: "Por que se preocupar?" Mas novas situações continuam surgindo, onde você não pode confiar em princípios básicos / núcleo sozinho.

Answer 15

(function(){
    var foo = {
        name: 'bob'
    };
    console.log(foo.name); // bob
})();
console.log(foo.name); // Reference error

Na verdade, a função acima irá ser tratada como função expressão sem um nome.

O objetivo principal de envolver uma função com parênteses próximo e aberto é para evitar poluir o espaço global.

As variáveis ??e funções dentro da expressão da função tornou-se privada (i) não estará disponível fora da função.

Answer 16

IIRC ele permite que você criar propriedades privadas e métodos.