Afinal, o que é o this ? – javascript

Apenas para deixar claro de uma vez por todas.
E tentar diminuir a quantidade de scripts parecidos com isso aqui:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.paragrafo span').hide();
	$('.botao').click(function(){
		$('.botao').val('carregando..');
		window.setTimeout(function(){
			$('.botao').fadeOut();
			
			$('.paragrafo span').show();
		}, 1000 );		
	});
});
</script>

<p class="paragrafo">
	<input type="button" name="botao" value="Click Me" class="botao" />
	<span>Lero Lero</span>
</p>

Bem simples:

No evento onclick do elemento com a class=”botao”, disparo uma function, que vai trocar o atributo .value dos elementos com a class botão, pela string: ‘carregando’, e depois de 1 segundo(por causa do atrazo do setTimeout(), esses elementos sumirão da tela, com um efeito de fadeOut();

Encontrei ótimos textos sobre o this:
http://www.fredericoemidio.com/post/entendendo-javascript-this.aspx

Porém, o meu intuito é escrever algo mais básico, bem mais nível iniciante mesmo.
Já que um texto escrito neste nível: http://imasters.com.br/artigo/20785/javascript/compreendendo-a-palavra-chave-this-do-javascript não elucida muita coisa, se vc já não tiver um nível considerável de conhecimento.

Bom, voltando.
O script apresentado resolve a questão. Faz oque foi escrito para fazer, mas, e se tivéssemos mais botões?

<p class="paragrafo">
	<input type="button" name="botao" value="Click Me" class="botao" />
	<span>Lero Lero</span>
</p>
<p class="paragrafo">
	<input type="button" name="botao" value="Click Me" class="botao" />
	<span>Lero Lero</span>
</p>
<p class="paragrafo">
	<input type="button" name="botao" value="Click Me" class="botao" />
	<span>Lero Lero</span>
</p>

Então, a ação em 1 deles, dispararia o efeito em todos os outros.

Não é oque queremos. E precisamos entender o motivo disso acontecer.
No caso, o seletor jQuery: $(‘.botao’), nos retorna um array de objetos que possuem a class=”botao”.

E como estamos trabalhando diretamente e sempre com esse array, cada trecho do script, está sendo aplicado a todos os elementos do conjunto, e não apenas ao clicado, como queríamos.

Lhes apresento(ou não), o objeto this. Olhe para essa palavra chave como um ‘apontador’, um ‘ponteiro’, que representa o objeto atual, ou seja, o elemento com o qual estamos trabalhando nesse exato momento.

$( this ).val('carregando..');

Maravilha! Agora, o nosso carregando.. só será exibido no botão em que clicarmos.
Continuando..

		var $this = $( this );
		$this.val('carregando..');
		window.setTimeout(function(){
			$this.fadeOut();

Okay, agora só some o botão que clicamos.. porém e o span ?
continua aparecendo todos os 3, mesmo que só cliquemos em 1 botão.

Nesse caso, vamos usar o nosso ponteiro this, para apartir dele, buscarmos o nosso texto:

$this.next('span').show();

E então, uma outra forma, navegando pelo nosso DOM:

$this.parent('p').find('span').show();

Isso é oque todo programador javascript precisa saber de início sobre o this.

7 Comments

  1. Falar sobre o “this” somente para elementos é um pouco vago, na verdade ele existe em todo e qualquer tipo de Objeto no Javascript, referenciando ao próprio objeto.

    Claro que nos elementos é bem mais fácil explicar pois ele seria o próprio elemento em si. Na função click, vc é “transportado” para dentro do elemento, tendo no this tudo o que aquele elemento tem, o que o mesmo faria em qualquer objeto.

    E realmente, ficar selecionando objetos além de causar inconsistência nos efeitos que deseja, torna o código muito mais lento, do mesmo jeito que usando “this” a todo momento. O que vc postou é muito relevante, pois instanciar o this para uma variável local torna o código muito mais ágil, e pode ser usado da mesma maneira que o this em si.

    Exemplo do código bem resumido:

    $this = $(this);
    $this.val('carregando..').delay(1000).fadeOut(function(){
          $this.next('span').show();  
    });
    • Exatamente. O objeto window por exemplo, é inspirador.

      Esse artigo foi bem básico, e escrevi em pouco tempo, para iniciante mesmo, com base em problemas que vejo quase todos os dias no fórum.
      Deixei o código de exemplo, o mais legível possível. O seu resumo é uma ótima dica.

  2. Mto bom W.Bruno.

    Parabéns!

  3. Bom, como os posts do William estão ficando de altíssimo nível, vou dar um “pitaco” aqui.

    Esse pitaco vai de encontro justamente ao seu outro post, belíssimo diga-se de passagem, no iMasters: http://imasters.com.br/artigo/21678/jquery/nao-use-jquery-nao-aprenda-qualquer-framework-antes-de

    Um carinha que muitos desenvolvedores jquery desconhecem (e perceba que usei desenvolvedor jquery e não desenvolvedor javascript) é o with, com ele conseguimos essa mesma referência à this, porém sem ter que criar uma variável para isso.

    Quando criamos uma referência para um objeto qualquer, estamos também separando um espaço na memória para que essa referência fique guardada e possa ser acessada a qualquer momento.

    Contudo, quando temos muitas referências dessas, temos também muito espaço reservado. Em uma aplicação muito grande, caso o desenvolvedor esqueça de desfazer a referência, a aplicação ficará lenta e pesada.

    Para resolver isso, podemos fazer a mesma referência em um bloco with com contexto local, onde a referência será destruída logo após a finalização do bloco permitindo assim que o garbage collector faça seu trabalho.

    O mesmo código apresentado no início do post, utilizando with, ficaria assim:

    $( '.botao' ).click( function() {
    	with ( $(this) ) {
    		val( 'carregando..' );
    
    		window.setTimeout( function() {
    			fadeOut();
    
    			next( 'span' ).show();
    		} , 1000 );
    	}
    } );
    

    Como pode-se ver, não houve em nenhum momento, a criação da variável de referência e, assim, um consumo desnecessário de recursos da máquina do usuário.

    😉

  4. Rafael Guimma

    junho 5, 2013 at 09:49

    Olá, também estou aprendendo JavaScript, bem do começo mesmo, porem este post não me ajudou muito pois assim como os outros que existem na net, o que quero dizer é que você explicou muito bem sobre o “this” porem para o iniciante fica complicado quando você explica uma coisa que já é complicada usando vários outros recursos mais complicados e talvez o iniciante ainda não tenha aprendido como eu ainda não entendo como funciona as “classes”, só pra resumir, acredito que ficaria mais claro se fizesse 2 ou 3 exemplos bem simples focados na aplicação do “this”, entendeu? eu li seu post eu tive que pesquisar sobre o “setTimeout”, “next”,”fadeOut”, “show();”… sendo que o que eu busquei foi sobre o “this” espero que entenda esse meu comentário como uma critica construtiva afinal sei que não é obrigado a postar coisas sobre seu conhecimento e não faz mais que um grande favor a esses caras como eu que buscam conhecimento na internet. Desculpa se falei alguma asneira coisa de iniciante.

  5. Ola, tenho uma pagina com dois inputs, e quero que ao clicar num botão faça consultar em outro site dentro de um iframe os dados do meus dois inputs, mas o site a ser consultado não eh meu, então preciso saber como fazer (colar) os dados do meu site dentro de outro sem sair da minha pagina JavaScript. Sei que é possivel porque ja fiz isto em Delphi através do WebBrowser.

Deixe uma resposta

Your email address will not be published.

*