the - Javascript/jsLint: Qué reemplazar con jQuery(esto) cuando se usa "use strict";

use strict node

Question

Cuando valido el siguiente código con jslint obtengo los siguientes errores.

function displayMegaDropDown() {
"use strict";
var liMegaPosition, divMegaOffset;
liMegaPosition = jQuery(this).position();
divMegaOffset = { top: liMegaPosition.top + jQuery(this).height(), left: liMegaPosition.left };
jQuery(this).find("div").offset(divMegaOffset);

jQuery(this).addClass("hovering");
}

Problema en la línea 4 carácter 29: Violación estricta.

 liMegaPosition = jQuery(this).position();  

Problema en la línea 5 carácter 56: Violación estricta.

divMegaOffset = { top: liMegaPosition.top + jQuery(this).height(), left: liM...

Problema en la línea 6 carácter 12: violación estricta.

jQuery(this).find("div").offset(divMegaOffset);

Problema en la línea 8 carácter 12: violación estricta.

jQuery(this).addClass("hovering");

Supongo que es por el uso de jQuery (esto) pero no entiendo con qué reemplazarlo. Tenga en cuenta que esto no se debe a que jQuery no se declara como global.

Answer 1

Creo que el problema es que usas this no dentro de un método. El siguiente código

/*global jQuery */
var myObj = {
    myNethod: function displayMegaDropDown() {
        "use strict";
        var ts = jQuery(this),
            liMegaPosition = ts.position(),
            divMegaOffset = {
                top: liMegaPosition.top + ts.height(),
                left: liMegaPosition.left
            };

        ts.find("div").offset(divMegaOffset);

        ts.addClass("hovering");
    }
};

o este

/*global jQuery */
function displayMegaDropDown(t) {
    "use strict";
    var ts = jQuery(t),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
}

no le dará errores ni advertencias.

ACTUALIZADO : Una versión más, que está muy cerca de la original, tampoco contiene errores o advertencias:

/*global jQuery */
var displayMegaDropDown = function () {
    "use strict";
    var ts = jQuery(this),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
};

ACTUALIZADO 2 : Encuentro la pregunta interesante para entender. Así que miro a través del estándar ECMAScript . Encuentro lo siguiente en el "Anexo C (informativo) El modo estricto de ECMAScript" (vea mejor en la versión HTML here ):

Si esto se evalúa dentro del código de modo estricto, entonces este valor no se obliga a un objeto. Este valor de nulo o no definido no se convierte al objeto global y los valores primitivos no se convierten en objetos de envoltura. Este valor pasado a través de una llamada de función (incluidas las llamadas realizadas con Function.prototype.apply y Function.prototype.call ) no obliga a pasar este valor a un objeto (10.4.3, 11.1.1, 15.3.4.3, 15.3. 4.4).

Supongo que es la razón del error JSLint.

Si se desactivara el modo estricto, el código no tendrá más errores:

/*global jQuery */
/*jslint sloppy: true */
function displayMegaDropDown() {
    var ts = jQuery(this),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
}

ACTUALIZADO 3: Parece que la imposibilidad de su uso en la declaración de la función y la posibilidad de su uso en la expresión de la función parece sospechosa para muchas personas. Hoy recibí un comentario más sobre esto. Así que creé una demo muy simple.

/*jslint devel: true */
(function () {
    ''use strict'';
    function test() {
        alert(this);
    }

    test();
}());

Puede probarlo here en IE9, la demostración de la alerta muestra con el texto "[Ventana de objeto]" y en las versiones actuales de Chrome y Firefox verá "indefinido".

Por lo tanto, el problema con el uso de this declaración en función no es "una cosa jslint". Es un problema real que debe tener en cuenta durante el desarrollo de sus programas de JavaScript.

Personalmente prefiero usar la expresión de función y casi nunca uso más declaraciones de función . Creo que las personas que vienen de otros idiomas del programa (como yo también) intentan al principio usar la misma construcción que era buena en tus idiomas favoritos. Solo más tarde, uno descubre que la definición de las variables en el bloque es mala (no hay un alcance de nivel de bloque en JavaScript) y que las declaraciones de función no siempre son la mejor opción.

Answer 2

No hay violación de modo estricto en su código. Si lo hubiera, obtendrías un error de algún tipo.

Answer 3

Por javascript nativo, this no estará undefined en strict mode si la función contiene no se invoca tampoco:

• como metodo de un objeto
• por Function.call o Function.apply
• como constructor

Esa es la razón por la que jshint se queja de eso.

Sin embargo, si la función se está utilizando como un controlador de eventos para jQuery, jQuery forzará a $(this) como el objeto jQuery del DOM que activa el evento.

Para probar esto, abra la consola de esta página y ejecute el siguiente código.

(function(){
    "use strict";
    function event_handler() {
        $(this).css(''background'',''red'');
    }

    $(''#content'').on(''click'', ''table'', event_handler);
})();

Haga clic en cualquier pregunta o respuesta de esta página y verá que el fondo se vuelve rojo.

Answer 4

¡Más fácil! Solo usa ev.currentTarget en lugar de esto. Es lo mismo que puedes probar con ===

function event_handler(ev) {
    //var $el = $(this); // jshint - error
    var $el = $(ev.currentTarget); // is exactly the same as above
}