53

Sempre usei o $(this) independente da situação e sempre funcionou. Raras vezes que tive que usar um dos outros e nessas vezes fiz por orientação de alguém e não por saber exatamente o que eu tinha que fazer.

  • Então qual a diferença entre os 3 tipo de this?
  • Quando devo usar um e quando devo usar outro?
  • Muda de alguma forma a performance do código?
2

3 Respostas 3

63

Versão simples:

this - objeto simples. Elemento DOM, window ou global do Nodejs
$this - uma simples variável, pode ter qualquer valor
$(this) - objeto jQuery com métodos que o jQuery disponibiliza

Versão mais alongada:

  • this quando apontando um elemento

Quando usamos this dentro de por exemplo um event handler estamos a referir-nos ao elemento raw, simples, original.

Exemplo:

$('#minhadiv').click(function(){ alert(this.id)}); // dá: "minhadiv" quando clicado
  • this quando no escopo global

Quando usamos o this no espaço global estamos a referir-nos a window ou global se fôr em NodeJS

(function(glob){
    glob.variavelXPTO = '2014!';
})(this);
alert(variavelXPTO); // dá: 2014 - note que está no escopo global
  • $this é uma simples variàvel

O $this é usado como uma simples variável. Muito comum usar $this = $(this); que é uma maneira de guardar a referência ao objeto jQuery em escopos onde o this é outro, como dentro de uma chamada Ajax ou dentro de uma Classe.

var $this = 'that';
alert($this); // dá: "that" - aqui o $this guarda simplesmente uma string
var $this = $('#minhadiv');
alert($this.attr('id')); // dá: "minhadiv", ou seja retorna a id via método .attr() do jQuery
  • $(this) é this mas com poderes jQuery!

Para poder usar métodos jQuery em objetos tem de se passar o objeto como parâmetro da função jQuery $(). Aí a função retorna um novo objeto com os métodos que o jQuery disponibiliza. Pode usar-se em arrays, por exemplo $(['foo', 'bar']).each(minhaFn);

Exemplo usando algo do primeiro exemplo:

$('#minhadiv').click(function(){ alert(this.id)}); // dá: minhadiv
$('#minhadiv').click(function(){ alert($(this).id)}); // dá erro
$('#minhadiv').click(function(){ alert($(this).attr('id'))}); // dá: minhadiv

$('#minhadiv').click(function(){ 
    $(this).closest('.main'); // aqui vai procurar o elemento pai com a classe "main"
}); 

Para fazer o mesmo que o $(this).closest('.main'); faz mas em JavaScript puro, ou seja usando o this tinha de ser algo como:

 var closestByClass = function(el, clz) {
    while(el && el != document) {
      var p = el.parentNode;
      var classes = ((p && p.className) || '').split(/\s+/);
      if (arrayIncludes(classes,clz)) {
        return p;
      }
      else {
        el = p;
      }
    }
    return null;
  };

Que dá mais trabalho a escrever :P

Para se retirar o elemento original de dentro de um objeto jQuery podemos usar index, ou seja var divs = $('div'); dá um objeto parecido a uma array onde divs[0] é a primeira div, raw. seria o mesmo que com o this. Pode também usar-se .get() para ir buscar o objeto raw, simples, do objeto jQuery

5
  • 4
    @Sergio muito bom :D ahh, e o ultimo exemplo expressa bem o por que eu não uso javascript pura :3 Commented 22/10/2014 às 16:34
  • Não entendi foi nada. Acabou me trazendo mais dúvidas, pois não sei o que significa alguns termos, como event handler. Se incomoda em explicar a função do this em poucas palavras? Se o this simplesmente retorna o elemento puro, não é a mesma coisa de chamar tal elemento pelo nome?
    – yoyo
    Commented 7/08/2020 às 18:29
  • @yoyo o this pode ser coisas diferentes em casos diferentes. Depende de muita coisa. Se tens duvidas cria uma pergunta nova que tenho gosto em responder. Procura também outras perguntas com respostas para aprenderes mais.
    – Sergio
    Commented 7/08/2020 às 19:17
  • @yoyo se não compreendes a resposta não a desvalorizes... podes explicar melhor que parte não faz sentido?
    – Sergio
    Commented 8/08/2020 às 4:27
  • Acredito que no fim das contas preciso de mais conhecimento geral em JS pra poder entender isso. Me falta base
    – yoyo
    Commented 8/08/2020 às 11:21
20

$() é a função construtora do jQuery.

this é uma referência ao elemento DOM invocado.

Então, basicamente, em $(this), você está simplesmente passando this para a função $() como parâmetro, assim poderá chamar métodos e funções jQuery.

Interessante:

  • $(this)[0] === this
  • $("#myDiv")[0] === document.getElementById("myDiv")
0
19

Resposta curta

Dentro de um event handler (ex.: a função fn em $(...).click(fn)) o this se refere a um elemento do DOM. Isso significa que a maneira mais direta - e mais performática - de se atuar sobre esse elemento é chamando métodos nele próprio:

var id = this.id;
if ( (" " + this.className + " ").replace(/[\n\t]/g, " ").indexOf("minhaClasse") > -1 ) {
    var p = document.createElement("p");
    p.innerHTML = "Olá, Mundo!";
    this.appendChild(p);
}

O uso de $(this) encasula (wraps) esse elemento em um objeto jQuery, permitindo que você use as diversas funções disponibilizadas por essa biblioteca e seus plugins. É um pouco menos eficiente, porém muitas vezes bem mais conveniente:

var id = $(this).prop("id");
if ( $(this).hasClass("minhaClasse") )
    $(this).append("<p>Olá, Mundo!</p>");

Já o $this é uma variável comum, sem nada de especial. Muitas vezes convenciona-se esse nome para o objeto jQuery contendo o this, e seu principal uso é para se evitar repetir o $(this) diversas vezes (o que traz um certo overhead desnecessário):

var id = this.id;
var $this = $(this); // Poderia ser "var elefante = $(this);" tanto faz...
if ( $this.hasClass("minhaClasse") )
    $this.append("<p>Olá, Mundo!</p>");

Resposta completa

Um "objeto jQuery" é um wrapper ("envelope"?) sobre uma lista de objetos. Foi criado com a intenção de ser usado com elementos do DOM, mas a princípio pode-se encapsular qualquer coisa nele:

$([1,2,3]).each(function() { /* aqui o "this" é um elemento da lista */ });
$(); // Vazio
$(el); // Um elemento
$([el1, el2, el3]); // Vários elementos
$(strSeletor); // zero, um ou vários elementos (depende do que o seletor "pegar")

Dado um objeto jQuery, pode-se descobrir quantos elementos ele possui usando length, e acessar qualquer elemento individual usando [indice]. Ou seja, ele se comporta como se fosse um array (i.e. é um "array-like").

var $els = $([el1, el2, el3]);
$els.length; // 3
$els[1]; // el2

Quando você usa $(...).each(fn), ele chama a função fn usando cada elemento individual a ser percorrido como o contexto da função (i.e. o this). Por isso, se seu objeto jQuery possui uma lista de elementos, a cada iteração do loop o this será um elemento "cru".

E por que isso é relevante? Simples: toda função que atua num objeto jQuery - funções essas que você pode encontrar em $.fn - recebe como contexto o próprio objeto jQuery, e então decide o que fazer com ele:

$.fn.meuPlugin = function() {
    var $this = this; // Aqui this já é um objeto jQuery
};

Em geral, as funções mais comuns que conhecemos fazem das duas uma: ou obtém um valor do primeiro elemento, ou atribuem um valor a todos os elementos:

$.fn.meuPlugin = function(argumentoOpcional) {
    if ( argumentoOpcional === undefined ) { // get
        return this[0].umValor;
    }
    else { // set
        return this.each(function() { // O this aqui fora é um objeto jQuery
            this.umValor = argumentoOpcional; // O this aqui dentro é um elemento individual
        });
    }
};

$(meuSeletor).meuPlugin(); // Obtém o valor do primeiro elemento encontrado
$(meuSeletor).meuPlugin(42); // Atribui o valor 42 a todos os elementos encontrados

Por conta disso - pelo fato dos plugins fazerem uso comum de each ou map - é que as funções que passamos como argumento para esses plugins normalmente recebem o elemento cru como contexto. Essa organização permite que uma mesma função trabalhe sem distinção entre zero, um, ou vários elementos - simplificando o código para o usuário final.

3
  • É, o $this certamente pode ser confuso para o não iniciado. A comparação do elefante merecia um <h1>.
    – brasofilo
    Commented 22/10/2014 às 20:44
  • 1
    @brasofilo hehe eu tive uma professora de matemática que gostava de criar parâmetros de função "elefante" pros alunos não ficarem viciados no "x" (e ela desenhava um elefantezinho no meio das fórmulas, não era simplesmente a palavra "elefante"... :P)
    – mgibsonbr
    Commented 22/10/2014 às 21:14
  • 1
    Também tenho saudade da minha professora lá em Miraí, quanta travessura com JavaScript na hora do recreio :)
    – brasofilo
    Commented 22/10/2014 às 21:22

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 .