Cuál es la razón de var $ this = this

Question

No soy el mejor en jquery y me encontré con una inicialización var que no sé por qué la persona que escribió el código lo hizo de esta manera.

En el inicio de un plugin, tenemos

this.init = function(settings) { 
    var $this = this; 
    this.s = { 
     initialSlide: 0, 
     firstSlide: true, 
    }; 
    ... more code, some uses $this, some uses "this" 
} 

Entonces, ¿cuál es la diferencia aquí entre "$ this" y "esto" y por qué no usar uno u otro todo el tiempo?

Answer 1

general, esto significa una copia de this. Lo que pasa con this es que cambia dentro de cada función. Sin embargo, al guardarlo de esta manera, se impide que $this cambie, mientras que this cambia.

jQuery utiliza en gran medida el valor mágico this.

consideran este código, donde es posible que tenga algo así como que está viendo:

$.fn.doSomethingWithElements = function() { 
    var $this = this; 

    this.each(function() { 
     // `this` refers to each element and differs each time this function 
     // is called 
     // 
     // `$this` refers to old `this`, i.e. the set of elements, and will be 
     // the same each time this function is called 
    }); 
}; 

Answer 2

En este caso, nada. $this es simplemente otra declaración de variable que tiene asignado this.

Normalmente, he visto este acceso directo utilizado por personas que usan bibliotecas de JavaScript al ajustar this. Por ejemplo, el uso típico en jQuery sería:

// rather than writing $(this) everywhere 
var $this = $(this); 

$this.each(function(){ 
    // Do Something 
}); 

Answer 3

No significa nada en este caso (sin doble sentido). Sería más lógico que la declaración fuera var $this = $(this), ya que eso permitiría utilizar toda la funcionalidad agradable de jQuery.

Answer 4

Lo que todos los demás dijeron, también hay un modismo en el código jquery para prefijar los objetos jquery con $. No sé qué tan popular es, pero solía ver mucho de eso.

Answer 5

Hago $ this = $ (esto) porque parece que guardará el procesamiento real de esa llamada cada vez que quiera usarla.

Además, para la función 'mágica' esta '' que alguien más mencionó. Es útil para mantener la copia original.

Answer 6

En realidad jQuery es un envoltorio alrededor del DOM de JavaScript, que lo mejora y simplifica. muy brevemente los selectores de jQuery vuelven jQuery objeto/s, es decir

var jQueryResults = $("article"); //Contains all article elements in the DOM as JQuery objects 

Sin embargo, la selección de elementos con Javascript Devuelve los elementos de HTML DOM es decir

var normalResults = document.getElementsByTagName("article");//Contains all article elements in the DOM as HTML objects 

Los problemas surgen en el que los objetos DOM no proporcionan la misma funcionalidad que Los objetos JQuery proporcionan.

Aquí es un ejemplo suceso que ilustra la diferencia:

$('.changeColorHover').hover(function() { 
    this.attr("style", "color:red"); 
}); //Will not work as we are trying to call a JQuery method on a DOM object 

Con lo anterior en mente el 'esto' palabra clave es un objeto DOM y por lo tanto se le requiere para convertirlo en un objeto jQuery con el fin para utilizar los métodos jQuery.

$('.changeColorHover').hover(function() { 
     $(this).attr("style", "color:red"); 
}); //Will work since we have first converted the DOM object to a JQuery object 

En resumen, la palabra clave this, le permite acceder al objeto que llama el evento ya que esto le dará una referencia al objeto que ha producido el evento. Pero, este es un objeto DOM, no un objeto jQuery. Como resultado, ninguno de los métodos jQuery que quiera utilizar no estará disponible, a menos que lo convierta en un objeto jQuery.