Qual é a diferença entre '$ (this)' e 'this'?

567

No momento, estou trabalhando neste tutorial: Introdução ao jQuery

Para os dois exemplos abaixo:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

Observe que no primeiro exemplo, usamos $(this)para acrescentar algum texto dentro de cada lielemento. No segundo exemplo, usamos thisdiretamente ao redefinir o formulário.

$(this)parece ser usado com muito mais frequência do que this.

Meu palpite é que no primeiro exemplo, $()está convertendo cada lielemento em um objeto jQuery que entende a append()função, enquanto que no segundo exemplo reset()pode ser chamado diretamente no formulário.

Basicamente, precisamos $()de funções especiais apenas para jQuery.

Isso está correto?

Kevin Wu
fonte
2
@Reigel, por que isso foi protegido? O OP questionou e adivinhou a resposta correta.
vol7ron
21
@Reigel: Eu acho que eu deveria perguntar isso na meta, mas se isso é tudo o que é necessário para a proteção, não deve a todas as perguntas ser protegidos
vol7ron

Respostas:

516

Sim, você só precisa $()quando estiver usando o jQuery. Se você quiser a ajuda do jQuery para fazer as coisas do DOM, lembre-se disso.

$(this)[0] === this

Basicamente, toda vez que você recupera um conjunto de elementos, o jQuery o transforma em um objeto jQuery . Se você sabe que possui apenas um resultado, ele estará no primeiro elemento.

$("#myDiv")[0] === document.getElementById("myDiv");

E assim por diante...

Spencer Ruport
fonte
3
Existe uma razão para usar de $(this)[0]novo thisse eles sempre são os mesmos?
314 Jay
2
@ Jay Se você preferir digitar muito do que simplesmente usar 'this', então sim. $ () é a função do construtor jQuery. "'this' é uma referência ao elemento DOM de chamada. então, basicamente, em $ (this), você está passando isso em $ () como um parâmetro para poder chamar métodos e funções jQuery".
Juliver Galleto 31/07
2
@ jay - Não há uma boa razão para usar, $(this)[0]eu estava apenas usando-o para ilustrar o conceito. :) Eu uso $("#myDiv")[0]mais document.getElementById("myDiv")embora.
Spencer Ruport 29/09/19
369

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

this é uma referência ao elemento de chamada DOM.

Então, basicamente, $(this)você está apenas passando o thisin $()como um parâmetro para poder chamar métodos e funções do jQuery.

Reigel
fonte
92

Sim, você precisa $(this)das funções do jQuery, mas quando quiser acessar os métodos javascript básicos do elemento que não usa o jQuery, basta usar this.

Alex King
fonte
74

Ao usar jQuery, é recomendável usar $(this)normalmente. Mas se você sabe (deve aprender e saber) a diferença, às vezes é mais conveniente e mais rápido usar apenas this. Por exemplo:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

é mais fácil e mais puro do que

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});
Fredrick Gauss
fonte
9
Eu gostei do exemplo. Obrigado !
Ammar
46

thisé o elemento, $(this)é o objeto jQuery construído com esse elemento

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

Um olhar mais profundo

thisMDN está contido em um contexto de execução

O escopo refere-se ao atual ECMA do contexto de execução . Para entender this, é importante entender como os contextos de execução operam em JavaScript.

contextos de execução vinculam isso

Quando o controle entra em um contexto de execução (o código está sendo executado nesse escopo), o ambiente para variáveis ​​é configurado (ambientes lexicais e variáveis ​​- essencialmente, isso configura uma área para entrada de variáveis ​​que já estavam acessíveis e uma área para variáveis ​​locais a serem armazenada) e a ligação de thisocorre.

O jQuery liga isso

Os contextos de execução formam uma pilha lógica. O resultado é que contextos mais profundos na pilha têm acesso a variáveis ​​anteriores, mas suas ligações podem ter sido alteradas. Toda vez que o jQuery chama uma função de retorno de chamada, ele altera essa ligação usando o applyMDN .

callback.apply( obj[ i ] )//where obj[i] is the current element

O resultado da chamada applyé que, dentro das funções de retorno de chamada do jQuery, thisrefere-se ao elemento atual que está sendo usado pela função de retorno de chamada.

Por exemplo, em .each, a função de retorno de chamada normalmente usada permite .each(function(index,element){/*scope*/}). Nesse escopo, this == elementé verdade.

Os retornos de chamada do jQuery usam a função apply para vincular a função que está sendo chamada com o elemento atual. Este elemento vem da matriz de elementos do objeto jQuery. Cada objeto jQuery construído contém uma matriz de elementos que correspondem à API jQuery do seletor usada para instanciar o objeto jQuery.

$(selector)chama a função jQuery (lembre-se de que $é uma referência a jQuery, code window.jQuery = window.$ = jQuery;:). Internamente, a função jQuery instancia um objeto de função. Portanto, embora possa não ser imediatamente óbvio, use $()internamente new jQuery(). Parte da construção desse objeto jQuery é encontrar todas as correspondências do seletor. O construtor também aceitará strings e elementos html . Quando você passa thispara o construtor jQuery, está passando o elemento atual para um objeto jQuery a ser construído . O objeto jQuery então contém uma estrutura de matriz dos elementos DOM que correspondem ao seletor (ou apenas o elemento único no caso de this).

Depois que o objeto jQuery é construído, a API do jQuery agora é exposta. Quando uma função API jQuery é chamada, ela itera internamente sobre essa estrutura semelhante a uma matriz. Para cada item da matriz, ele chama a função de retorno de chamada para a API, vinculando os retornos de chamada thisao elemento atual. Essa chamada pode ser vista no snippet de código acima, onde objestá a estrutura semelhante à matriz e ié o iterador usado para a posição na matriz do elemento atual.

Travis J
fonte
39

Sim, usando $(this), você ativou a funcionalidade jQuery para o objeto. Apenas usando this, ele possui apenas funcionalidade Javascript genérica.

Ray Lu
fonte
-1

thisreferencie um objeto javascript e $(this)usado para encapsular com jQuery.

Exemplo =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')
Lalit Kumar Maurya
fonte