$ this vs $ (this) in jQuery

Ich habe einige Diskussionen über SO in Bezug auf $(this)vs $thisin jQuery gesehen, und sie machen für mich Sinn. ( Ein Beispiel finden Sie in der Diskussion hier .)

Aber was ist mit dem folgenden Ausschnitt aus dem Plugin-Tutorial zur jQuery-Website, das zeigt, wie Verkettbarkeit 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 $thisoben? Gerade als ich denke, ich habe es herausgefunden ...

$thisist nur eine gewöhnliche Variable. Das $Zeichen ist ein gültiges Zeichen in Variablennamen und verhält sich daher $thiswie jeder andere nicht reservierte Variablenname. Es ist funktional identisch mit dem Aufruf einer Variablen JellyBean.

Normalerweise var $this = $(this);vermeiden Sie das Erstellen eines neuen jQuery-Objekts häufiger als nötig. Im Fall des folgenden Codes erstellen Sie nur ein Objekt anstelle von zwei / vier. Es hat nichts mit der Verkettbarkeit zu tun.

Man könnte es auch nennen that, $thi$oder irgendetwas anderes (nicht das letztere verwenden obwohl, es ist hässlich: p) als $nur ein einfaches Zeichen in JavaScript ist, genau wie az sind.

thisin Javascript stellt (normalerweise) einen Verweis auf das Objekt dar, das die aktuelle Funktion aufgerufen hat. Dieses Konzept wird durch die Versuche von jQuery, die Verwendung thisbenutzerfreundlicher zu gestalten, etwas verwirrt.each() Schleifenstruktur .

außerhalb der.each() , thisstellt das jQuery - Objekt , das .lockDimensionsdurch aufgerufen wird.

Innerhalb des .each()repräsentiert es das aktuell iterierte DOM-Objekt.

Im Allgemeinen dient das Speichern $(this)in einer lokalen Variablen dazu, zu verhindern, dass Sie die jQuery-Funktion $() mehrmals aufrufen und a zwischenspeichern jQueryized this sollte die Effizienz verbessern, wenn Sie sie mehrmals verwenden müssen.

$ ist einfach ein gültiges Variablennamenzeichen und wird als erstes Zeichen eines Variablennamens verwendet normalerweise um den Programmierer in die Warteschlange zu stellen, dass es sich bereits um ein jQuery-Objekt handelt (und die zugehörigen Methoden / Eigenschaften verfügbar sind).

Diese Frage hat eigentlich nichts mit der Kettenfähigkeit zu thistun. Um jedoch die Kettenfähigkeit aufrechtzuerhalten, sollten Sie zurückkehren, damit andere Funktionsaufrufe hinzugefügt werden können, und die Bedeutung von auch thisin diesen Aufrufen beibehalten .

Möglicherweise haben Sie diese Zeile übersehen:

var $this = $(this);

Hier $thisist nur eine Variable, die den Wert von enthält $(this). Sie können es austauschbar mit $(this)dem Vorteil verwenden, dass Sie nicht immer wieder dieselbe Suche durchführen.

$thisist einfach eine lokale Variable, die so benannt ist, um Sie daran zu erinnern $(this). Dies erspart die Erstellung der jQuery-Version von thisund Sie können sie mehrmals verwenden.

$thisist nur eine lokale Kopie von thisin jQuery eingeschlossen.

Auf lange Sicht thisist es viel effizienter , eine lokale Kopie zu behalten, anstatt sie jedes Mal zu verpacken, wenn sie benötigt wird.

$this = $(this)ist eine Möglichkeit, das jQuery-Objekt zwischenzuspeichern. Es ist teuer, die jQuery-Funktion jedes Mal auszuführen. Wenn Sie also die Ausgabe speichern, können Sie den Selektor immer wieder verwenden, ohne die jQuery-Funktion erneut aufzurufen.

Es füllt nur die $thisVariable mit $(this), sodass Sie nicht bei $(this)jedem Aufruf nach Elementen suchen müssen. Es hat eine bessere Leistung

var $this = $(this);

 $this = $(this)

Dies bedeutet, dass Sie das aktuelle Objekt einer Variablen mit dem Namen zuweisen $this. Es ist kein Schlüsselwort.

Es ist nur ein Variablenname.

Es ist ganz einfach : $this = $(this). Es ist nur eine Abkürzung, die im Rahmen der inneren Funktion verwendet wird. Das Dollarzeichen ist in diesem Fall nur ein Zeichen, es bezieht sich überhaupt nicht auf jQuery. Es könnte genauso gut benannt worden sein _thisoder xthis, die$ ist nur eine Erinnerung daran, was die Variable enthält.

Es mag sinnlos erscheinen, eliminiert jedoch drei redundante Methodenaufrufe (die $()Funktion ist nicht kostenlos), sodass es dort höchstwahrscheinlich aus Leistungsgründen verwendet wird.

Innerhalb $.fn.lockDimensions, thisist das jQuery - Objekt , das hatte lockDimensionssie aufgefordert hat.

Innerhalb der .each, thisverweist nun die DOMElement in der aktuellen Iteration der Schleife. $(this)Wraps das DOMElement in ein jQuery-Objekt und var $this = $(this);speichert es nur $(this)in einer aufgerufenen Variablen $this, sodass der jQuery-Konstruktor nicht mehrmals aufgerufen werden muss (wenn Sie ihn $(this)stattdessen verwenden würden).

$Vorzeichen werden normalerweise vor Variablennamen in JavaScript verwendet, um zwischen allgemeinem Wert und jQuery-Objekt zu unterscheiden. Hier wird also $thisnur der Wert $(this)abgerufen, dessen jQuery-Objekt von zurückgegeben wird this. $ist nur ein Teil des gültigen Variablennamens.

$thisist eine Variable mit dem Namen, $thisdie einen Verweis auf enthält $(this). Ein bisschen sinnlos IMO.

Ich möchte hier einspringen, obwohl ich keine fachkundigen jQuery-Fähigkeiten habe.

Unzählige Male sehe ich Codezeilen oder Konzepte ähnlich:

var $this = $(this);

Also schreibe ich es um, ähnlich wie:

var $jims_this = $(this);

Und teste es. Ich mache das auch, um meine Verwirrung zu beseitigen.

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

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

Fügen Sie als Nächstes den Aufruf addClass zu Ihrem Skript hinzu:

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

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

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

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

Jim

Sie sind in den Bereich des Javascript-Bereichs und der Schließung gewandert.

Für die kurze Antwort:

this.bar()

wird im Rahmen von foo ausgeführt (da dies sich auf foo bezieht)

var barf = this.bar;
barf();

wird im globalen Bereich ausgeführt.

this.bar bedeutet im Grunde:

Führen Sie die Funktion this.bar im Rahmen von this (foo) aus. Wenn Sie this.bar nach barf kopiert und barf ausgeführt haben. Unter Javascript versteht man das Ausführen der Funktion, auf die barf zeigt, und da dies nicht der Fall ist, wird es nur im globalen Bereich ausgeführt.

Um dies zu korrigieren, können Sie ändern

barf();

zu so etwas:

barf.apply(this);

Dies weist Javascript an, den Gültigkeitsbereich vor der Ausführung an barf zu binden.

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