5

Gostaria de saber como funciona a passagem de função como parâmetro em JS, estou iniciando na linguagem agora e precisei fazer uma chamada de EventListenner

document.getElementsByClassName("informacao")[0].addEventListener("mouseover", troca(banner2));

Gostaria de saber também porque ele não aceita troca(banner2) na declaração com os parâmetros de minha função, porém aceita se eu passar somente o nome da função ou se declarar como função anônima (function(){}). Obrigado!

1
  • É só um exemplo para aprender a funcionalidade mesmo kkk Commented 26/02/2016 às 21:08

3 Respostas 3

4

O solução seria assim:

document.getElementsByClassName("informacao")[0].addEventListener("mouseover",
 function() { troca(banner2) });

troca(banner2) é uma chamada de função. addEventListener não espera uma chamada de função e sim uma uma função. Esse function() { } que eu coloquei em volta do seu código cria uma função que, por sua vez, fará a chamada que você quer no momento que o evento ocorrer.

Talvez ajude pensar que o corpo de troca poderia vir dentro dessa função anônima (assim, não seria uma função dentro da outra). Desse jeito, há simplesmente uma indireção (e uma passagem de parâmetros)

7
  • Obrigado :) Então o function eu consigo fazer com que ele "entenda" que é uma função e não uma chamada? Não seria de certa forma uma gambiarra? Commented 26/02/2016 às 21:10
  • Pode-se pensar que sim, mas isso é questão ideológica. Algumas linguagens separam o conceito de função do conceito de função anônima. Mas há quem prefira a simplicidade do Javascript. É fato que, comparado à verbosidade do Java pré-8, por exemplo, você provavelmente vai preferir esse jeito aqui. :) Commented 26/02/2016 às 21:12
  • Se você parar pra pensar, a gambiarra seria se o 'ddEventListener("mouseover", troca(banner2)) funcionasse. Em qualquer outra função do Javascript se você fizer foo(troca(banner2))o que o código faz é avaliar o troca(banner2) e passar o valor pra foo. Para que funcionasse da forma da sua pergunta, os eventlisteners teriam que ser tratados de forma especial pela linguagem.
    – hugomg
    Commented 26/02/2016 às 21:13
  • Isso mesmo, Hugo. É o caso do Java, por exemplo. Lá tem uma interface pra cada Listener. Mesmo com o 8, temos funções Lambda que não são a mesma coisa que os métodos. Python tem lambdas, mas são limitados a expressões. Javascript segue essa filosofia de ser o mais genérico possível. Isso pode ser visto como algo bom ou ruim. Commented 26/02/2016 às 21:15
  • Certo, desculpe mas estou um pouco confuso ainda:/ Resumindo, em passagem de funcao por parametro, SEMPRE ou eu passo uma função anônima ou eu passo apenas o nome da função(sem uso de parenteses)? Na hora da criação de uma função que irá receber uma função em seu parâmetro eu trato como se fosse uma variável(sem o uso de parenteses) ? Caso for isso mesmo é bem mais simples que eu pensei :) Mas tem uma explicação, um por que disso? Commented 26/02/2016 às 21:24
3

Em Javascript o valor da expressão troca(banner2) é o valor de retorno de troca. Quando você chama

blah.addEventListener("mouseover", troca(banner2));

é como se você tivesse escrito

var tmp = troca(banner2);
blah.addEventListener("mouseover", tmp);

Como addEventListener espera receber uma função como parâmetro você deve ou passar a função direto (pelo nome, sem parênteses), ou passar uma função anônima ou alguma outra expressão cujo valor no final seja uma função.

1

Primeira coisa a se considerar é que em JavaScript funções são objetos de primeira classe, o que significa que podem ser atribuídas à variáveis e passadas como argumento para outras funções da mesma forma como você faria com uma string ou um número ou um array ou etc...

Sendo assim, é perfeitamente natural fazer algo como isso:

var minhaFuncao = function( mensagem ) {
    console.log( mensagem );
};

// ou...

var minhaOutraFuncao = funcaoQueFazAlgumaCoisa;

function funcaoQueFazAlgumaCoisa( mensagem ) { console.log( mensagem ); }

E depois isso:

minhaFuncao( "Chamando minhaFunção!" );

// ou...

minhaOutraFuncao( "Chamando minhaOutraFuncao" );

// ou...

funcaoQueFazAlgumaCoisa( "Chamando funcaoQueFazAlgumaCoisa" );

Com isso em mente, considere a seguinte função:

function passeMeUmaFuncaoQualquer( mensagem, umaFuncaoQualquer ) {
    umaFuncaoQualquer( mensagem );
}

A função acima espera receber como primeiro argumento uma string e como segundo uma função, então poderíamos invocá-la da seguinte forma:

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", function( msg ) { console.log( msg ) } );

// ou...

function umaFuncaoQualquer( msg ) {
    console.log( msg );
}

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", umaFuncaoQualquer );

E seu eu fizer isso:

passeMeUmaFuncaoQualquer( "Olá", "Mundo" );

Vai gerar um erro, pois seria a mesma coisa que fazer:

"Mundo"();

E não se pode invocar uma string, não é mesmo?

Agora, se eu fizer da forma como você demonstrou:

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", umaFuncaoQualquer() );

O que acontece é que eu invocando umaFuncaoQualquer e passando o valor retornado por ela (seja ele qual for) como segundo argumento de passeMeUmaFuncaoQualquer, o que gera um erro.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .