¿Cuál es la diferencia entre '$ (this)' y 'this'?

Actualmente estoy trabajando en este tutorial: Comenzando con jQuery

Para los dos ejemplos a continuación:

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

Observe que en el primer ejemplo, usamos $(this)para agregar texto dentro de cada lielemento. En el segundo ejemplo usamosthis directamente al restablecer el formulario.

$(this) parece usarse mucho más a menudo que this .

Supongo que en el primer ejemplo, $()está convirtiendo cada lielemento en un objeto jQuery que comprende la append()función, mientras que en el segundo ejemplo reset()se puede llamar directamente en el formulario.

Básicamente necesitamos $()funciones especiales jQuery-only.

¿Es esto correcto?

Sí, solo necesitas $()cuando estás usando jQuery. Si desea la ayuda de jQuery para hacer cosas DOM, solo tenga esto en cuenta.

$(this)[0] === this

Básicamente, cada vez que recuperas un conjunto de elementos, jQuery lo convierte en un objeto jQuery . Si sabe que solo tiene un resultado, estará en el primer elemento.

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

Y así...

$() es la función constructora de jQuery.

this es una referencia al elemento DOM de invocación.

Básicamente, in $(this), solo está pasando el thisin $()como parámetro para que pueda llamar a los métodos y funciones de jQuery.

Sí, necesita $(this)funciones jQuery, pero cuando desee acceder a los métodos básicos de JavaScript del elemento que no usa jQuery, puede usarlo this.

Cuando se usa jQuery, se recomienda usar $(this)generalmente. Pero si conoce (debe aprender y conocer) la diferencia, a veces es más conveniente y más rápido usar solo this. Por ejemplo:

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

es más fácil y puro que

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

thises el elemento, $(this)es el objeto jQuery construido con ese 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);
});

Una mirada más profunda

this^MDN está contenido en un contexto de ejecución

El alcance se refiere al contexto de ejecución actual ^ECMA . Para comprender this, es importante comprender la forma en que funcionan los contextos de ejecución en JavaScript.

contextos de ejecución vinculan esto

Cuando el control ingresa en un contexto de ejecución (el código se está ejecutando en ese ámbito), se configura el entorno para las variables (Entornos léxicos y variables - esencialmente esto establece un área para que ingresen las variables que ya eran accesibles, y un área para que las variables locales sean almacenado), y se thisproduce la unión de .

jQuery une esto

Los contextos de ejecución forman una pila lógica. El resultado es que los contextos más profundos en la pila tienen acceso a las variables anteriores, pero sus enlaces pueden haber sido alterados. Cada vez que jQuery llama a una función de devolución de llamada, altera el enlace mediante apply^MDN .

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

El resultado de la llamada applyes que dentro de las funciones de devolución de llamada jQuery, se thisrefiere al elemento actual que está utilizando la función de devolución de llamada.

Por ejemplo, en .each, la función de devolución de llamada comúnmente utilizada permite .each(function(index,element){/*scope*/}). En ese ámbito, this == elementes cierto.

Las devoluciones de llamada de jQuery utilizan la función de aplicación para vincular la función que se llama con el elemento actual. Este elemento proviene de la matriz de elementos del objeto jQuery. Cada objeto jQuery construido contiene una matriz de elementos que coinciden con la ^{API jQuery} del selector que se utilizó para crear una instancia del objeto jQuery.

$(selector)llama a la función jQuery (recuerde que $es una referencia a jQuery, código:) window.jQuery = window.$ = jQuery;. Internamente, la función jQuery crea una instancia de un objeto de función. Entonces, si bien puede no ser inmediatamente obvio, el uso $()interno lo utiliza new jQuery(). Parte de la construcción de este objeto jQuery es encontrar todas las coincidencias del selector. El constructor también aceptará cadenas y elementos html . Cuando pasa thisal constructor jQuery, está pasando el elemento actual para que se construya un objeto jQuery . El objeto jQuery contiene una estructura tipo matriz de los elementos DOM que coinciden con el selector (o solo el elemento individual en el caso dethis ).

Una vez que se construye el objeto jQuery, la API jQuery ahora está expuesta. Cuando se llama a una función jQuery api, iterará internamente sobre esta estructura tipo matriz. Para cada elemento de la matriz, llama a la función de devolución de llamada para la API, vinculando las devoluciones de llamada thisal elemento actual. Esta llamada se puede ver en el fragmento de código anterior donde objestá la estructura tipo matriz, yi es el iterador utilizado para la posición en la matriz del elemento actual.

Sí, al usar $(this), habilitó la funcionalidad jQuery para el objeto. Con solo usarlo this, solo tiene una funcionalidad genérica de Javascript.

thishace referencia a un objeto javascript y se $(this)utiliza para encapsular con jQuery.

Ejemplo =>

// 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')