Skip to main content
3 de 5
ops
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#Respondendo literalmente à sua pergunta "Como funções anônimas funcionam?":

Funções anônimas são muito importantes para entender alguns dos conceitos do funcionamento da linguagem JavaScript, são funções que não dependem de nomes, somente são declaradas e armazenadas em uma variável.

Esta é uma função anônima: function(){alert('foo');

Uma das melhores práticas para usa-la consiste em criar JavaScript Closures, pois:

"Conhecer JavaScript e não conhecer Closures, é a mesma coisa que conhecer Java e não conhecer Classes."

Por isso é de suma importância o entendimento das Closures e de Funções Anônimas.

#Definição de Closures:

Closure em inglês significa encerramento, no sentido de guardar, pôr em um lugar fechado.

Ou seja, seria armazenar em uma variável, uma função que pode ter parâmetros ou não. Ela pode retornar um valor e torna-lo imutável, ou então apenas realizar comandos sem retorno.

#Explicação com Exemplos:

Veja como funcionaria uma função anônima simples com uma função sem argumentos:

var anonima = function(){ alert('executou') };
anonima(); //executa a função anônima

Agora uma com parâmetro:

var anonima = function(n){ alert(n) };
anonima(2);

Podemos também criar uma closure com funções anônimas, como por exemplo uma soma de dois números:

    var anonima = function(number1){
  return function(number2){ alert(number1+number2) };
};
var closure = anonima(2); //salva na variavel closure a funcao que manda o parâmetro number1
closure(3); //manda o parâmetro number2 e executa a função final

Closures se torna ótimo para guardar em variáveis algumas operações que chamam funções diferentes retornando um resultado de operação ou função.

Outra coisa muito boa das Closures seria a criação de classes encapsuladas, como por exemplo, uma classe de uma Empresa:

function Empresa(nome){
    //privates
    var _funcionarios       = [];
    var _ordenaFuncionarios = function(){
        return _funcionarios.sort();
    }
    //public's
    return {
        adicionaFuncionario: function(funcionario) {
            _funcionarios.push(funcionario);
            //return this;
        },
        meusFuncionarios: function(){
            return _ordenaFuncionarios(_funcionarios).join(", ");
        }
    };
}

E veja como se torna facil adicionar funcionários, e imprimir eles ordenados:

var p = new Empresa("Foo Ltda");
p.adicionaFuncionario("João da Silva");
p.adicionaFuncionario("Maria da Rosa");
alert(p.meusFuncionarios()); //João da Silva, Maria da Rosa.

Repare que você tem "return this" comentado, teste descomentar e assim você vai poder utilizar encadeamento de métodos desta forma:

var p = new Empresa("Foo Ltda");
alert(p.adicionaFuncionario("João da Silva")
    .adicionaFuncionario("Maria da Rosa")
    .meusFuncionarios()); //Joao da Silva, Maria da Rosa

Outra coisa, você pode evitar a criação de variáveis globais utilizando Closures, da seguinte forma:

cor = "azul";

(function(){ //função anônima
    var cor = "#FF0000";
    document.body.style.background = cor; //deixa o fundo da pagina vermelho
})();
alert(cor); //azul

Javascript closures são muito bons para muita coisa, funções anônimas também. Como podes ver, vale a pena dar uma estudada nisso :)

Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75