Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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??
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.
>
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?
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(){
//..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(function(){
//..sem nomeMuitíssimo obrigado, tópico resolvido
Oi Israel,
Neste link explica-se o porquê do teu script não funcionar como esperado.