¿Qué significa "esto" en jQuery? [duplicar]

thisen JavaScript es muy especial y poderoso. Puede significar casi cualquier cosa. Cubro algo de esto aquí y aquí , pero realmente vale la pena encontrar un buen tutorial sobre JavaScript y dedicar algo de tiempo a él.

Primero veamos el uso que hace jQuery y luego hablemos de ello de manera más general en JavaScript (un poco).

En jQuery, específicamente

En el código escrito con jQuery, this generalmente se refiere al elemento DOM que es el tema de la función que se llama (por ejemplo, en una devolución de llamada de evento).

Ejemplo de devolución de llamada de evento jQuery (lo que thisse trata en los .binddocumentos ):

$("div").click(function() {
    // Here, `this` will be the DOM element for the div that was clicked,
    // so you could (for instance) set its foreground color:
    this.style.color = "red";

    // You'll frequently see $(this) used to wrap a jQuery object around the
    // element, because jQuery makes lots of things a lot simpler. You might
    // hide the element, for example:
    $(this).hide();
});

De manera similar, varias funciones jQuery que actúan sobre todos los elementos coincidentes con el selector jQuery actual pueden opcionalmente aceptar una función, y cuando se llama a esa función, thises nuevamente el elemento DOM en cuestión; por ejemplo, la htmlfunción permite esto:

// Find all divs inside the `foo` element, and set
// their content to their CSS class name(s)
// (Okay, so it's a hokey example)
$("#foo div").html(function() {
    return this.className;
});

Otro lugar que utiliza jQuery thises en la devolución de llamada jQuery.each:

var a = ["one", "two", "three"];
jQuery.each(a, function() {
    alert(this);
});

...lo que alertará a "uno", luego a "dos", luego a "tres". Como puedes ver, este es un uso totalmente diferente de this.

(De manera confusa, jQuery tiene dos funciones llamadas each, la de arriba que está en la función jQuery/$ en sí y siempre se llama de esa manera [ jQuery.each(...)o $.each(...)], y otra diferente en instancias de jQuery [objetos] en lugar de la función jQuery/$ en sí. Aquí son los documentos para el otro, no analizo el otro en esta respuesta porque usa thisla misma forma htmly la devolución de llamada de evento, y quería mostrar un uso diferentethis de jQuery).

Genéricamente en JavaScript

thisse refiere a un objeto. Actualización: a partir del modo estricto de ES5, eso ya no es cierto, thispuede tener cualquier valor. El valor de thisdentro de cualquier llamada a función determinada está determinado por cómo se llama a la función (no por dónde se define la función, como en lenguajes como C# o Java). La forma más común de configurar thiscuando se llama a una función es llamar a la función a través de una propiedad en el objeto:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

Allí, debido a que llamamos fooa través de una propiedad en obj, thisse configuró objdurante la duración de la llamada. Pero no tenga la impresión de que fooestá casado de alguna manera con obj, esto funciona bien:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

var differentObj = {};
differentObj.firstName = "Barney";
differentObj.bar = obj.foo; // Not *calling* it, just getting a reference to it
differentObj.bar(); // alerts "Barney"

De hecho, foono está intrínsecamente ligado a ningún objeto:

var f = obj.foo; // Not *calling* it, just getting a reference to it
f(); // Probably alerts "undefined"

Allí, dado que no llamamos fa través de una propiedad de objeto, thisno se configuró explícitamente. Cuando thisno se establece explícitamente, el valor predeterminado es el objeto global (que se encuentra windowen los navegadores). windowprobablemente no tenga una propiedad firstName, por lo que aparece "indefinido" en nuestra alerta.

Hay otras formas de llamar funciones y establecer su valor this: Usando las funciones .cally .applyfunciones:

function foo(arg1, arg2) {
    alert(this.firstName);
    alert(arg1);
    alert(arg2);
}

var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"

callse establece thisen el primer argumento que le proporciona y luego pasa cualquier otro argumento que le proporcione a la función que está llamando.

applyhace exactamente lo mismo, pero le das los argumentos para la función como una matriz en lugar de individualmente:

var obj = {firstName: "Wilma"};
var a   = [42, 27];
foo.apply(obj, a); // alerts "Wilma", "42", and "27"
//             ^-- Note this is one argument, an array of arguments for `foo`

Sin embargo, una vez más, hay mucho más que explorar thisen JavaScript. El concepto es poderoso, un poco engañoso si estás acostumbrado a cómo lo hacen otros idiomas (y no si estás acostumbrado a otros), y vale la pena conocerlo.

Aquí hay algunos ejemplos de thisno hacer referencia a un objeto en el modo estricto de ES5:

(function() {
    "use strict";   // Strict mode

    test("direct");
    test.call(5, "with 5");
    test.call(true, "with true");
    test.call("hi", "with 'hi'");

    function test(msg) {
        console.log("[Strict] " + msg + "; typeof this = " + typeof this);
    }
})();

Producción:

[Estricto] directo; tipo de esto = indefinido
[Estricto] con 5; tipo de esto = número
[Estricto] con verdadero; tipo de esto = booleano
[Estricto] con 'hola'; tipo de esto = cadena

Mientras que en modo relajado, todos habrían dicho typeof this = object; copia en vivo .

Nov 16 '2010 15:11 T.J. Crowder