$this vs. $(this) in jQuery

Question

Ich habe auf SO einige Diskussionen gesehen über $(this) 対 $this in jQuery, und sie machen Sinn für mich. (Siehe Diskussion hier für ein Beispiel).

Aber was ist mit dem Schnipsel unten aus dem jQuery-Website-Plugin-Tutorial, der zeigt, wie die Verkettung funktioniert?

(function ($) {

    $.fn.lockDimensions = function (type) {

        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }

        });

    };
})(jQuery);

Was bedeutet $this oben darstellen? Gerade wenn ich denke, dass ich es herausgefunden habe ...

Answer 1

Innerhalb $.fn.lockDimensions , this ist das jQuery-Objekt, das mit lockDimensions angerufen.

Im Inneren der .each , this verweist nun auf das DOMElement in der aktuellen Iteration der Schleife. $(this) wickelt das DOMElement in ein jQuery-Objekt ein, und var $this = $(this); spart gerade $(this) in einer Variablen namens $this so dass der jQuery-Konstruktor nicht mehrfach aufgerufen werden muss (wenn Sie den $(this) stattdessen).

Answer 2

$ Zeichen wird normalerweise vor Variablennamen in JavaScript verwendet, um zwischen einem allgemeinen Wert und einem jQuery-Objekt zu unterscheiden. Hier also $this erhält einfach den Wert von $(this) das ein jQuery-Objekt von this . $ ist nur ein Teil eines gültigen Variablennamens.

Answer 3

$this ist eine Variable mit dem Namen $this die einen Verweis auf $(this) . Ein bisschen sinnlos, IMO.

Answer 4

Ich möchte hier einspringen, auch wenn ich kein Experte für jQuery bin.

Unzählige Male sehe ich Codezeilen oder Konzepte, die ähnlich lauten:

var $this = $(this);

Also schreibe ich es ähnlich um:

var $jims_this = $(this);

Und testen Sie es. Ich tue dies auch, um Verwirrung zu stiften, die ich möglicherweise habe.

Hier ist ein weiteres Beispiel für einen ähnlichen, schlecht erklärten Code:

 <style>
    a.a { font-weight: bold; }
 </style>

Fügen Sie dann den Aufruf addClass zu Ihrem Skript hinzu:

  $("a").addClass("a");

Das funktioniert zwar, ist aber verwirrend. Es hätte auch so geschrieben werden können:

<style>
a.my_bold_class { font-weight: bold; }
</style>

 $("a").addClass("my_bold_class");

Jim

Answer 5

Sie haben sich in das Reich von javascript scope und closure begeben.

Für die kurze Antwort:

this.bar()

unter dem Geltungsbereich von foo ausgeführt wird (da dieser sich auf foo bezieht)

var barf = this.bar;
barf();

wird im globalen Bereich ausgeführt.

this.bar bedeutet im Grunde genommen:

die durch this.bar angegebene Funktion im Rahmen von this (foo) ausführen. Wenn Sie this.bar nach barf kopieren und barf ausführen. Javascript verstanden als, führen Sie die Funktion durch barf gezeigt, und da es keine this, es läuft nur im globalen Bereich.

Um dies zu korrigieren, können Sie Folgendes ändern

barf();

zu etwas wie diesem:

barf.apply(this);

Dieses sagt Javascript, um den Bereich von diesem an barf zu binden, bevor es ausgeführt wird.

Für Jquery-Ereignisse müssen Sie eine anonyme Funktion verwenden oder die Bind-Funktion im Prototyp erweitern, um Scoping zu unterstützen.