Usando el contexto de la 'presente' palabra clave con jQuery

Question

Como neófito jQuery Estoy un poco confundido por los diferentes contextos en los que se utiliza el este palabra clave. A veces se refiere a un elemento DOM, p. Ej. this.id y, a veces, se refiere a un objeto jQuery, p. $ (this) .val().

Remy Sharp's blog post es útil pero me gustaría saber cómo explicaría la diferencia a un novato. ¿La diferencia es estrictamente un problema jQuery o común a todos los Javascript?

Gracias por todas las respuestas hasta el momento - gran cosa, voy a elegir una respuesta mañana. Aquí hay otra publicación de blog que posteriormente encontré que también me resultó útil: What is this? by Mike Alsup.

Answer 1

La publicación de Remy Sharp es confusa si no la lees detenidamente, en mi opinión. El significado de this nunca cambia. En el ejemplo que dio, hubo 2 usos de this. Como un elemento DOM en un evento:

$('a').click(function() { 
    alert(this.tagName); 
}); 

y envuelto como un objeto jQuery en un evento:

$('a').click(function() { 
    alert($(this).val()); 
}); 

Si usted lee los 2 fragmentos anteriores con mucho cuidado se dará cuenta de que nunca cambia this significado . Siempre se refiere al elemento DOM. La diferencia viene en cómo se usa.

En jQuery, de forma predeterminada, this se refiere al elemento DOM (no un objeto jQuery) que desencadenó un evento. En el segundo fragmento de código anterior, es todavía el mismo elemento DOM, sólo que es envuelto en un elemento de jQuery envolviendo $() alrededor de ella. Al igual que con cualquier argumento para el constructor jQuery, pasar this al constructor lo transforma en un objeto jQuery.

Creo que la confusión aparece cuando Remy comienza a hablar sobre los complementos jQuery en el mismo artículo que los eventos de jQuery. Los complementos de jQuery son algo que las personas rara vez escriben y usan con frecuencia. Al escribir un plugin jQuery, estás trabajando en el contexto del prototipo de objeto jQuery.En este caso, está usando la palabra this para referirse al complemento que está escribiendo. En casos de uso normales, no escribirás complementos a menudo, por lo que este es un escenario mucho menos común. Cuando no está dentro del alcance del complemento, no puede usar this para referirse al objeto jQuery.

---

En el lenguaje JavaScript, la palabra clave this se refiere a la instancia actual de un objeto en JavaScript. Cuando se utiliza en un prototipo de JavaScript, se refiere a la instancia del prototipo. Dependiendo del navegador, cuando se utiliza el modelo de evento no-jquery, this también se refiere al elemento DOM. Debido a que algunos navegadores (Internet Explorer) no hacen referencia al this como el elemento DOM en un evento, dificulta el trabajo con eventos. Para evitar esto, jQuery realiza algo de magia de JavaScript que siempre hace que this se refiera al elemento DOM que desencadenó el evento. Esa es (una de las muchas) razones para usar un marco de JavaScript en lugar de hacer el suyo propio.

Answer 2

a veces se refiere a un objeto jQuery, p. $ (this) .val().

aquí se refiere a un elemento DOM; la llamada de función $() es lo que envuelve el elemento DOM en un objeto jQuery. Para devoluciones de llamada de eventos jQuery, this (¿casi?) Siempre se refieren a un elemento DOM. Al escribir una función que se extiende jQuery, que se puede llamar con $ ('select'). Myfunc(), this hará referencia a un objeto jQuery.

---

En JavaScript en general, this se aplica cuando una función se llama como una propiedad de un objeto (la invocación del método de aspecto). Por lo tanto, dada la función:

function foo() { 
    doSomethingWith(this); 
} 

var obj1 = {'foo': foo}; 
var obj2 = {}; 
obj2.myFoo = foo; 

obj1.foo(); // calls function foo(), with 'this' set to obj1 
obj2.myFoo(); // calls function foo(), with 'this' set to obj2 
foo();  // calls function foo(), with 'this' set to the global object 
      // (which, in a browser, is the window object) 
foo.apply(new Date()); // calls foo(), with 'this' set to a Date object 

Así, en Javascript, el tipo de objeto que se refiere esto en una función depende más de cómo se llama una función de la definición real de la Funciton.

Answer 3

No se olvide que si alguna vez no está seguro de lo que el "este" se encuentra en un contexto dado, se puede diagnosticar en Firebug utilizando la consola:

console.log("This is: " + this) 

Si estás usando jQuery (como usted ha mencionado que has sido) siempre se puede asegurar que "este" es todavía un objeto jQuery al hacer esto:

this = $(this); 

Luego, de vuelta en la consola, se puede ver lo que el objeto jQuery de "este" es registrándolo en Firebug:

console.log("The jQuery This is: " + $(this)) 

Por último, ya que estamos hablando de jQuery, hay algunos casos en los que "esto" cambia. Por ejemplo, cuando haces una devolución de llamada después de una animación o fadeIn o fadeOut. En ese contexto, el "esto" se referiría al elemento que recibe el efecto.

Recuerde, si alguna vez no está seguro de qué es "esto" ... pregúntele al Firebug. El Firebug lo ve todo. El Firebug lo sabe todo.

Answer 4

jQuery Proxy podría ayudarle a obtener su respuesta. Puede llamar a una función jQuery y modificar a qué objeto se refiere el alcance this.

p. Ej. algo como:

var me = { 
    type: "zombie" 
    ,test: function() {$('#result').html(this.type)} 

}; 

$.proxy(me.test(), me); //prints 'zombie'