atribuir funções em eventos?

[Israel Elias 8]

Fala pessoal

To estudando javascript, e me deparei com uma dúvida, e queria muito entender o por que disso está acontecendo, espero que me ajudem esclarecer, vamos lá:

<div class="poltronas">
    <div class="poltrona_disponiveis"></div>
    <div class="poltrona_indisponiveis"></div>
    <div class="poltrona_indisponiveis"></div>
</div>

<script>
    var divs = document.querySelectorAll(".poltronas div");

    /**
     * Teste 01
     */
    function getClass(key) {
        alert(divs[key].className);

        // Por que esse 'this' não é o elemento atual e sim um objeto window?
        alert(this);
    }
    for (i = 0; i < divs.length; i++) {
        divs[i].onclick = getClass(i);
    }
</script>

No teste de cima, o evento onclick recebe(é atribuído) uma função chamada getClass(i), só que quando a pagina é carregada estas funções "getClass(i)", já é chamada automaticamente, sem que eu clique no elemento, por que isso? E na função "getClass(i)" coloquei um "alert(this)", pensei que ia retorna o próprio elemento, só que retornou o objeto "window", não entendi isso também?

/**
 * Teste 02
 */
for (i = 0; i < divs.length; i++) {
    divs[i].onclick = function() {

        // Esse 'this' é o elemento atual clicado! 
        alert(this.className);
    };
}

Já neste teste 02, o evento onclick recebe(é atribuído) uma função construtora, neste 2° exemplo, a função só é disparado quando clico no elemento e não é chamado automaticamente como no teste 01, e o alert(this) é o elemento atual ao contrario do teste 01 que era um objeto window.

Qual a diferenças do teste 01 para o teste 02??

[Maujor 144]

Oi Israel,

 

Neste link explica-se o porquê do teu script não funcionar como esperado.

[William Bruno 1501]

No exemplo 2 vc não tem uma função construtora, vc tem uma função anônima.

 

E a diferença entre 01 e 02 é:

 

Basicamente vc está executando a função getClass(i) no momento da atribuição ao onclick, dando a propriedade apenas o retorno da função,

 

E no 02 vc não está executando, e sim atribuindo a função inteira a propriedade onclick.

 

 

Como vc "executou" no 01, o this é window, pois esse é o escopo dela.

A função anônima do 02, faz com que o escopo seja o cara que vai disparar ela, e como o disparo foi feito pelo onclick, o this virou o objeto.

[Israel Elias 8]

Basicamente você está executando a função getClass(i) no momento da atribuição ao onclick, dando a propriedade apenas o retorno da função,

 

E no 02 você não está executando, e sim atribuindo a função inteira a propriedade onclick.

 

Ah sim, agora entendi William Bruno explicação perfeita!

 

 

Fiz outro teste aqui e tive outra surpresa! retirei o parenteses da função getClass(i) na hora da atribuição do evento onclick,veja

function getClass() {
    // Agora esse 'this' é o elemento atual clicado!
    alert(this.className);
}
for (i = 0; i < divs.length; i++) {
    divs[i].onclick = getClass;
}

Esse teste de cima, parece se comportar como no teste 2! só por que retirei os parenteses, ele agora retorna o elemento clicado. por que isso? as funções com parenteses faz a chamada e sem parenteses não faz a chamada??

 

 

 

No exemplo 2 você não tem uma função construtora, você tem uma função anônima.

 

Não sabia disso, pensava que era a mesma coisa! Obrigado pela correção, se possível poderia me explicar?

[William Bruno 1501]

as funções com parenteses faz a chamada e sem parenteses não faz a chamada??

exato.

Os parênteses executam a função. Não colocar eles, faz com que ela não seja executada naquela hora.

 

 

 

Não sabia disso, pensava que era a mesma coisa! Obrigado pela correção, se possível poderia me explicar?

Função anônima é uma função sem nome.

function(){}

que é o que vc tem ali.

 

Função construtora é:

function T(){
 //..
}

e para usar:

var t = new T();

ou seja, uma construtura tem nome, e serve para instanciar um objeto. Uma anônima é uma clousure, serve para definir um escopo, e atribuir algo sem executar.

 

Mas também poderia existir uma anônima autoexecutável:

(function(){
 //..sem nome e os parênteses no final executam ela
})();

note os parênteses no final, eles fazem com que ela seja autoexecutável (ela chamando ela mesma). Se eu não tivesse colocado:

 

(function(){
 //..sem nome
});

ela nunca seria executada.

[Israel Elias 8]

Muitíssimo obrigado, tópico resolvido