Javascript / JSLint: Qu'est-ce que pour remplacer jQuery (ce) lors de l'utilisation « use strict »;

Question

Lorsque je valide le code suivant avec JSLint je reçois les erreurs suivantes.

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");
}

Problème à la ligne 4 caractère 29: violation stricte.

 liMegaPosition = jQuery(this).position();  

Problème à la ligne 5 caractère 56: violation stricte.

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

Problème à la ligne 6 caractère 12: violation stricte.

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

Problème à la ligne 8 caractère 12: violation stricte.

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

Je devine que c'est à cause de l'utilisation de jQuery (cela), mais je ne comprends pas ce qu'il faut remplacer. Notez que ceci est pas parce que jQuery n'est pas déclarée comme globale.

Answer 1

Je pense que le problème est que vous utilisez this pas à l'intérieur d'une méthode. Le code suivant

/*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");
    }
};

ou celui-ci

/*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");
}

vous donnera pas d'erreurs ou des avertissements.

MISE À JOUR : Une version plus, ce qui est très proche de votre original, n'a pas non plus des erreurs ou des avertissements:

/*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");
};

MISE À JOUR 2 : Je trouve l'intéressant pour la compréhension de la question. Alors je regarde à travers ECMAScript norme. Je trouve ce qui suit dans la "Annexe C (informative) Le mode strict de ECMAScript" (voir mieux dans la version HTML ):

Si cette est évaluée dans le code mode strict, le cette valeur est pas sous la contrainte à un objet. A ce valeur null ou undefined est pas convertis à l'objet global et les valeurs primitives ne sont pas converties à des objets wrapper. cette valeur passé par un appel de fonction (Y compris les appels effectués en utilisant Function.prototype.apply et Function.prototype.call ) ne contraint pas le passé cette valeur à un objet (10.4.3, 11.1.1, 15.3.4.3, 15.3.4.4).

Je suppose que c'est la raison de l'erreur JSLint.

Parce que si vous éteignez le mode strict, le code aura pas plus d'erreurs:

/*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");
}

MISE À JOUR 3: Il semble que l'impossibilité de l'utilisation de this dans la instruction de fonction et la possibilité de l'utilisation de this dans le expression de fonction semble suspectée pour beaucoup de gens. Aujourd'hui, je reçu un dernier commentaire à ce sujet. Donc, j'ai créé démo très simple

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

    test();
}());

Vous pouvez tester que IE9 le alerte d'affichage de démonstration avec le texte « [objet fenêtre] » et sur les versions actuelles Chrome et Firefox, vous voyez "non défini".

Le problème avec l'utilisation de this dans instruction de fonction est pas "une chose JSLint". Il est vrai problème que vous devriez prendre en considérations au cours du développement de vos programmes JavaScript.

Personnellement, je préfère utiliser expression de fonction et presque jamais utiliser plus instructions de fonction . Je pense que les gens qui viennent d'un autre programme de langues (comme moi aussi) essayer au début d'utiliser la même construction qui était bon dans vos langues préférées. Seulement plus tard, on découvre que la définition des variables dans le bloc est mauvais (il n'y a pas la portée de niveau bloc en JavaScript) et que les instructions de fonction ne sont pas toujours le meilleur choix aussi.

Answer 2

Il n'y a pas mode strict violation dans votre code. S'il y avait, vous obtiendrez une erreur de quelque sorte.

Answer 3

Par javascript natif, this sera undefined dans strict mode si la fonction contient ne soit invoquée:

• en tant que méthode d'un objet
• par Function.call ou Function.apply
• en tant que constructeur

C'est la raison jshint se plaint à ce sujet.

Cependant, si la fonction est utilisée en tant que gestionnaire d'événement pour jQuery, jQuery va forcer le $(this) que l'objet jQuery du DOM qui déclenche l'événement.

Pour le prouver, ouvrez la console de cette page et exécutez le code suivant.

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

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

Cliquez sur une question ou une réponse de cette page et vous verrez l'arrière-plan devient rouge.

Answer 4

Beaucoup plus facile! Il suffit d'utiliser ev.currentTarget au lieu de cela. Il est le même que vous pouvez tester avec ===

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