JavaScript/JSlint: Was ist JQuery (dies) zu ersetzen, wenn „Strict verwenden“;

Question

Wenn ich den folgenden Code mit JSlint validiere, erhalte ich die folgenden Fehler.

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

Problem bei Zeile 4 Charakter 29: Strenge Verstoß.

 liMegaPosition = jQuery(this).position();  

Problem bei Zeile 5 Charakter 56: Strenge Verstoß.

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

Problem in Zeile 6 Charakter 12: Strenge Verstoß.

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

Problem in Zeile 8 Charakter 12: Strenge Verstoß.

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

Ich vermute, dass es an der Verwendung von JQuery (dies) liegt, aber ich verstehe nicht, was ich ersetzen soll. Beachten Sie, dass dies ist nicht Weil JQuery nicht als global erklärt wird.

Answer 1

Ich denke, das Problem ist, dass Sie verwenden this nicht innerhalb einer Methode. Der folgende Code

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

oder dieses

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

gibt Ihnen keine Fehler oder Warnungen.

AKTUALISIERT: Eine weitere Version, die sehr nahe an Ihrem ursprünglichen ist, hat auch keine Fehler oder Warnungen:

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

Aktualisiert 2: Ich finde die Frage für das Verständnis interessant. Also schaue ich durch ECMascript -Standard . Ich finde das Folgende im "Anhang C (informativ) im strengen Modus von ECMascript" (siehe besser in der HTML -Version hier):

Wenn Dies wird im strengen Moduscode bewertet, dann der Dies Wert wird nicht zu einem Objekt gezwungen. EIN Dies Wert von Null oder nicht definiert wird nicht in das globale Objekt konvertiert und primitive Werte werden nicht in Wrapper -Objekte konvertiert. Das Dies Wert, der über einen Funktionsaufruf übergeben wurde (einschließlich Anrufe, die verwendet wurden Function.prototype.apply und Function.prototype.call) zwar nicht den Übergeben diesen Wert an ein Objekt (10.4.3, 11.1.1, 15.3.4.3, 15.3.4.4).

Ich nehme an, dass dies der Grund für den JSlint -Fehler ist.

Ursache, wenn Sie den strengen Modus ausschalten würden, hat der Code keine Fehler mehr:

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

Aktualisiert 3: Es scheint, dass die Verwendung der Verwendung von unmöglich ist this in dem Funktionsanweisung und die Möglichkeit der Verwendung von this in dem Funktionsausdruck Scheint für viele Menschen verdächtigt. Heute habe ich noch einen Kommentar dazu erhalten. Also habe ich eine sehr einfache Demo erstellt

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

    test();
}());

Sie können es testen hier dass in IE9 die Demo -Warnung mit dem Text [Objektfenster] und auf den aktuellen Versionen von Chrome und Firefox "undefiniert" sehen.

Also das Problem mit der Verwendung von this in Funktionsanweisung ist nicht "ein JSINT -Ding". Es ist ein echtes Problem, das Sie während der Entwicklung Ihrer JavaScript -Programme überlegen sollten.

Ich persönlich lieber zu verwenden Funktionsausdruck und fast nie mehr verwenden Funktionsanweisungen. Ich denke, dass die Leute, die aus einem anderen Programmsprachen stammen (wie ich auch), am Anfang versuchen, dieselbe Konstruktion zu verwenden, die in Ihren Lieblingssprachen gut war. Erst später findet man heraus, dass die Definition von Variablen im Block schlecht ist (es gibt keinen Blockebene -Bereich in JavaScript) und das Funktionsanweisungen ist auch nicht immer die beste Wahl.

Answer 2

Es gibt kein strikter Modus Verletzung in Ihrem Code. Wenn es so wäre, bekommen Sie einen Fehler.

Answer 3

Von nativem JavaScript, this wird sein undefined in strict mode Wenn die Funktion enthält, wird sie auch nicht aufgerufen:

• Als Methode eines Objekts
• durch Function.call oder Function.apply
• als Konstruktor

Das ist der Grund, warum sich Jsint darüber beschwert.

Wenn die Funktion jedoch als Ereignishandler für JQuery verwendet wird, wird JQuery das erzwingen $(this) als JQuery -Objekt des Dom, das das Ereignis abfeuert.

Öffnen Sie die Konsole dieser Seite und führen Sie den folgenden Code aus.

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

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

Klicken Sie auf eine Frage oder Antwort dieser Seite und Sie würden sehen, dass der Hintergrund rot wird.

Answer 4

Viel einfacher!Verwenden Sie einfach Ev.currentTarget anstelle davon. Es ist dasselbe wie Sie mit === testen können

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